Easy TimeInput 🕒

[EN]

A simple and easy to use time input component for React.

✨ Features

🚀 Lightweight: No heavy dependencies

🎨 Customizable: Style every part to match your brand.

♿ Accessible: Full keyboard and screen reader support.

📱 Responsive: Works perfectly on mobile and desktop.

🎨 Support for tailwind css and custom styles

📦 Installation

npm install @bymarcant/easy-time-input

🚀 Basic Use

Is very easy to start using it:

import React, { useState } from "react";
// Import the component and the styles
import { TimeInput } from "@bymarcant/easy-time-input";
import "@bymarcant/easy-time-input/style.css";

const App = () => {
  const [time, setTime] = useState("12:00");

  return (
    <div>
      <label>Select a time:</label>
      <TimeInput value={time} onChange={(newTime) => setTime(newTime)} />
    </div>
  );
};

📝 Example of use with Tailwind CSS

import React, { useState } from "react";
// Import the component and the styles
import { TimeInput } from "@bymarcant/easy-time-input";
import "@bymarcant/easy-time-input/style.css";

// To use it with tailwindcss try to use it like this:
// Remember to import @tailwind in your style.css file

const App = () => {
  const [time, setTime] = useState("12:00");

  return (
    <div>
      <label>Select a time:</label>
      <TimeInput
        value={time}
        onChange={(newTime) => setTime(newTime)}
        className="p-2 bg-teal-500 text-white"
      />
    </div>
  );

Demo and usage examples

Demo (Not available yet)

Future updates and features

• A stand alone hook to control the time effortless
• Control the time with steps hours, minutes and seconds
• More methods to control the time as for example: hasTimeChanged, hasMinutesChanged, hasHoursChanged, etc.

⚙️ Props (API) EN

| Prop | Type | Default | Is optional? | Description | | ------------------- | ---------------------------------------------- | --------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | value | string | Date | undefined | null | "00:00" | Yes | The value used to control or display the time in the input. The default value is "00:00:00". You can use new Date(), null or undefined. | | onChange | (value: Date | string) => void | undefined | Yes | Event function to change the time. | | name | string | "time" | Yes | Define the name to describe the time input in forms. | | disabled | boolean | undefined | Yes | Whether the time input is disabled or not. | | disabledHours | boolean | undefined | Yes | Whether the hours input is disabled or not. | | disabledMinutes | boolean | undefined | Yes | Whether the minutes input is disabled or not. | | disabledSeconds | boolean | undefined | Yes | Whether the seconds input is disabled or not. | | required | boolean | undefined | Yes | Whether the time input is required or not. | | className | string | undefined | Yes | Define the className to change the styles used in the time input. This input support tailwind css classes. | | iconClockClassName | string | undefined | Yes | Define the className to change the styles used in the clock icon | | amPmButtonClassName | string | undefined | Yes | Define the className to change the styles used in the AM/PM button | | controlsClassName | string | undefined | Yes | Define custom css className to change the styles as container | | dataTestId | string | undefined | Yes | Define the data-testid used in the time input | | hoursPlaceholder | "--" | "HH" | "hh" | "--" | Yes | Define the placeholder used in the hours input | | minutesPlaceholder | "--" | "mm" | "--" | Yes | Define the placeholder used in the minutes input | | secondsPlaceholder | "--" | "ss" | "--" | Yes | Define the placeholder used in the seconds input | | iconAriaLabel | string | "clock" | Yes | Define the aria-label in icon button | | secondsAriaLabel | string | "seconds" | Yes | Define the aria-label in seconds input controller | | minutesAriaLabel | string | "minutes" | Yes | Define the aria-label in minute input controller | | hoursAriaLabel | string | "hours"` | Yes | Define the aria-label in hour input controller | | amPmAriaLabel | string | "am-pm" | Yes | Define the aria-label in AM/PM controller | | ariaLabel | string | "time" | Yes | Define the aria-label in the time input. By default is "time" | | hoursInputTitle | string | "Hours input" | Yes | Define the title for the hour input. By default is "Hours input" | | minutesInputTitle | string | "Minutes input" | Yes | Define the title for the minutes input. By default is "Minutes input" | | secondsInputTitle | string | "Seconds input" | Yes | Define the title for the seconds input. By default is "Seconds input" | | hasSeconds | boolean | false | Yes | Whether the time input has to display seconds. By default is false | | id | string | undefined | Yes | Id to identify the time input | | hour12 | boolean | false | Yes | Whether the time input has to show AM/PM button or not. By default is false | | disableFocusOnIcon | boolean | false | Yes | Whether the time input has to display icon. By default is true, but it is false, the input will not focus on click | | format | "HH:mm:ss" | "HH:mm" | "hh:mm:ss" | "hh:mm" | undefined | Yes | Define the format used in the time input. By default is "HH:mm:ss" | | maxTime | string | Date | undefined | Yes | Define the maximum time used in the time input. By default is "23:59:59" | | minTime | string | Date | undefined | Yes | Define the minimum time used in the time input. By default is "00:00:00" | | hideControls | boolean | false | Yes | Whether the time input has to display controls. By default is false | | setZeroOnBlur | boolean | false | Yes | Whether the time input has to set the time to 00:00:00 when the input is blurred. By default is false |

📄 License This project is under the MIT License. Consult the LICENSE file for more details.

[ES]

Un componente de entrada de tiempo para React, ligero, personalizable y accesible.

✨ Características

🚀 Ligero: Sin dependencias pesadas

⚛ Soporte para React 18 y 19

🎨 Personalizable: Estiliza cada parte para que coincida con tu marca.

♿ Accesible: Soporte completo para teclado y lectores de pantalla.

📱 Responsive: Funciona perfectamente en dispositivos móviles y escritorio.

🎨 Soporte para tailwind css y estilos personalizados

📦 Instalación

npm install @bymarcant/easy-time-input

🚀 Uso Básico

Es muy sencillo empezar a usarlo:

import React, { useState } from "react";
import { TimeInput } from "@bymarcant/easy-time-input";
import "@bymarcant/easy-time-input/style.css";

const App = () => {
  const [time, setTime] = useState("12:00");

  return (
    <div>
      <label>Selecciona una hora:</label>
      <TimeInput value={time} onChange={(newTime) => setTime(newTime)} />
    </div>
  );
};

📝 Ejemplo de uso con Tailwind CSS

import React, { useState } from "react";
import { TimeInput } from "@bymarcant/easy-time-input";
import "@bymarcant/easy-time-input/style.css";

const App = () => {
  const [time, setTime] = useState("12:00");

  return (
    <div>
      <label>Selecciona una hora:</label>
      <TimeInput
        value={time}
        onChange={(newTime) => setTime(newTime)}
        className="p-2 bg-teal-500 text-white"
      />
    </div>
  );

Demo y ejemplos de uso

Demo (No disponible por ahora)

Proximas actualizaciones o features

• Hook para controlar el tiempo de manera más sencilla y de forma separada y reactiva
• Controlar el tiempo con pasos de horas, minutos y segundos
• Mas métodos para controlar el tiempo como por ejemplo: hasTimeChanged, hasMinutesChanged, hasHoursChanged, etc.

📄 Licencia Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.