@bymarcant/easy-time-input 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +18 -0
- package/.hintrc +13 -0
- package/README.md +192 -0
- package/dist/easy-time-input.css +1 -0
- package/dist/easy-time-input.es.js +3896 -0
- package/dist/easy-time-input.umd.js +12 -0
- package/dist/index.d.ts +282 -0
- package/index.html +19 -0
- package/package.json +76 -0
- package/tailwind.config.js +9 -0
- package/tsconfig.json +25 -0
- package/tsconfig.node.json +10 -0
package/.eslintrc.cjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
root: true,
|
|
3
|
+
env: { browser: true, es2020: true },
|
|
4
|
+
extends: [
|
|
5
|
+
'eslint:recommended',
|
|
6
|
+
'plugin:@typescript-eslint/recommended',
|
|
7
|
+
'plugin:react-hooks/recommended',
|
|
8
|
+
],
|
|
9
|
+
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
|
10
|
+
parser: '@typescript-eslint/parser',
|
|
11
|
+
plugins: ['react-refresh'],
|
|
12
|
+
rules: {
|
|
13
|
+
'react-refresh/only-export-components': [
|
|
14
|
+
'warn',
|
|
15
|
+
{ allowConstantExport: true },
|
|
16
|
+
],
|
|
17
|
+
},
|
|
18
|
+
}
|
package/.hintrc
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
# Simple TimeInput 🕒
|
|
2
|
+
|
|
3
|
+
[EN]
|
|
4
|
+
|
|
5
|
+
A simple, lightweight, and accessible time input component for React.
|
|
6
|
+
|
|
7
|
+
✨ Features
|
|
8
|
+
|
|
9
|
+
🚀 Lightweight: No heavy dependencies
|
|
10
|
+
|
|
11
|
+
🎨 Customizable: Style every part to match your brand.
|
|
12
|
+
|
|
13
|
+
♿ Accessible: Full keyboard and screen reader support.
|
|
14
|
+
|
|
15
|
+
📱 Responsive: Works perfectly on mobile and desktop.
|
|
16
|
+
|
|
17
|
+
🎨 Support for tailwind css and custom styles
|
|
18
|
+
|
|
19
|
+
## 📦 Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @simple-time-input
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 🚀 Basic Use
|
|
26
|
+
|
|
27
|
+
Is very easy to start using it:
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import React, { useState } from "react";
|
|
31
|
+
import { TimeInput } from "@simple-time-input";
|
|
32
|
+
|
|
33
|
+
const App = () => {
|
|
34
|
+
const [time, setTime] = useState("12:00");
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<div>
|
|
38
|
+
<label>Select a time:</label>
|
|
39
|
+
<TimeInput value={time} onChange={(newTime) => setTime(newTime)} />
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 📝 Example of use with Tailwind CSS
|
|
46
|
+
|
|
47
|
+
```jsx
|
|
48
|
+
import React, { useState } from "react";
|
|
49
|
+
import { TimeInput } from "@simple-time-input";
|
|
50
|
+
|
|
51
|
+
const App = () => {
|
|
52
|
+
const [time, setTime] = useState("12:00");
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<div>
|
|
56
|
+
<label>Select a time:</label>
|
|
57
|
+
<TimeInput
|
|
58
|
+
value={time}
|
|
59
|
+
onChange={(newTime) => setTime(newTime)}
|
|
60
|
+
className="p-2 bg-teal-500 text-white"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Demo and usage examples
|
|
67
|
+
|
|
68
|
+
[Demo](https://easy-time-input.vercel.app/)
|
|
69
|
+
|
|
70
|
+
## Future updates and features
|
|
71
|
+
|
|
72
|
+
- A stand alone hook to control the time effortless
|
|
73
|
+
- More methods to control the time as for example: hasTimeChanged, hasMinutesChanged, hasHoursChanged, etc.
|
|
74
|
+
|
|
75
|
+
## ⚙️ Props (API) EN
|
|
76
|
+
|
|
77
|
+
| Prop | Type | Default | Is optional? | Description |
|
|
78
|
+
| ------------------- | ---------------------------------------------- | --------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
79
|
+
| 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. |
|
|
80
|
+
| onChange | (value: Date \| string) => void | undefined | Yes | Event function to change the time. |
|
|
81
|
+
| name | string | "time" | Yes | Define the name to describe the time input in forms. |
|
|
82
|
+
| disabled | boolean | undefined | Yes | Whether the time input is disabled or not. |
|
|
83
|
+
| disabledHours | boolean | undefined | Yes | Whether the hours input is disabled or not. |
|
|
84
|
+
| disabledMinutes | boolean | undefined | Yes | Whether the minutes input is disabled or not. |
|
|
85
|
+
| disabledSeconds | boolean | undefined | Yes | Whether the seconds input is disabled or not. |
|
|
86
|
+
| required | boolean | undefined | Yes | Whether the time input is required or not. |
|
|
87
|
+
| className | string | undefined | Yes | Define the className to change the styles used in the time input. This input support tailwind css classes. |
|
|
88
|
+
| iconClockClassName | string | undefined | Yes | Define the className to change the styles used in the clock icon |
|
|
89
|
+
| amPmButtonClassName | string | undefined | Yes | Define the className to change the styles used in the AM/PM button |
|
|
90
|
+
| controlsClassName | string | undefined | Yes | Define custom css className to change the styles as container |
|
|
91
|
+
| dataTestId | string | undefined | Yes | Define the data-testid used in the time input |
|
|
92
|
+
| hoursPlaceholder | "--" \| "HH" \| "hh" | "--" | Yes | Define the placeholder used in the hours input |
|
|
93
|
+
| minutesPlaceholder | "--" \| "mm" | "--" | Yes | Define the placeholder used in the minutes input |
|
|
94
|
+
| secondsPlaceholder | "--" \| "ss" | "--" | Yes | Define the placeholder used in the seconds input |
|
|
95
|
+
| iconAriaLabel | string | "clock" | Yes | Define the aria-label in icon button |
|
|
96
|
+
| secondsAriaLabel | string | "seconds" | Yes | Define the aria-label in seconds input controller |
|
|
97
|
+
| minutesAriaLabel | string | "minutes" | Yes | Define the aria-label in minute input controller |
|
|
98
|
+
| hoursAriaLabel | string | "hours"` | Yes | Define the aria-label in hour input controller |
|
|
99
|
+
| amPmAriaLabel | string | "am-pm" | Yes | Define the aria-label in AM/PM controller |
|
|
100
|
+
| ariaLabel | string | "time" | Yes | Define the aria-label in the time input. By default is "time" |
|
|
101
|
+
| hoursInputTitle | string | "Hours input" | Yes | Define the title for the hour input. By default is "Hours input" |
|
|
102
|
+
| minutesInputTitle | string | "Minutes input" | Yes | Define the title for the minutes input. By default is "Minutes input" |
|
|
103
|
+
| secondsInputTitle | string | "Seconds input" | Yes | Define the title for the seconds input. By default is "Seconds input" |
|
|
104
|
+
| hasSeconds | boolean | false | Yes | Whether the time input has to display seconds. By default is false |
|
|
105
|
+
| id | string | undefined | Yes | Id to identify the time input |
|
|
106
|
+
| hour12 | boolean | false | Yes | Whether the time input has to show AM/PM button or not. By default is false |
|
|
107
|
+
| 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 |
|
|
108
|
+
| 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" |
|
|
109
|
+
| maxTime | string \| Date | undefined | Yes | Define the maximum time used in the time input. By default is "23:59:59" |
|
|
110
|
+
| minTime | string \| Date | undefined | Yes | Define the minimum time used in the time input. By default is "00:00:00" |
|
|
111
|
+
| hideControls | boolean | false | Yes | Whether the time input has to display controls. By default is false |
|
|
112
|
+
| 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 |
|
|
113
|
+
|
|
114
|
+
📄 License
|
|
115
|
+
This project is under the MIT License. Consult the LICENSE file for more details.
|
|
116
|
+
|
|
117
|
+
[ES]
|
|
118
|
+
|
|
119
|
+
Un componente de entrada de tiempo para React, ligero, personalizable y accesible.
|
|
120
|
+
|
|
121
|
+
✨ Características
|
|
122
|
+
|
|
123
|
+
🚀 Ligero: Sin dependencias pesadas
|
|
124
|
+
|
|
125
|
+
⚛ Soporte para React 18 y 19
|
|
126
|
+
|
|
127
|
+
🎨 Personalizable: Estiliza cada parte para que coincida con tu marca.
|
|
128
|
+
|
|
129
|
+
♿ Accesible: Soporte completo para teclado y lectores de pantalla.
|
|
130
|
+
|
|
131
|
+
📱 Responsive: Funciona perfectamente en dispositivos móviles y escritorio.
|
|
132
|
+
|
|
133
|
+
🎨 Soporte para tailwind css y estilos personalizados
|
|
134
|
+
|
|
135
|
+
## 📦 Instalación
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
npm install @simple-time-input
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## 🚀 Uso Básico
|
|
142
|
+
|
|
143
|
+
Es muy sencillo empezar a usarlo:
|
|
144
|
+
|
|
145
|
+
```jsx
|
|
146
|
+
import React, { useState } from "react";
|
|
147
|
+
import { TimeInput } from "@simple-time-input";
|
|
148
|
+
|
|
149
|
+
const App = () => {
|
|
150
|
+
const [time, setTime] = useState("12:00");
|
|
151
|
+
|
|
152
|
+
return (
|
|
153
|
+
<div>
|
|
154
|
+
<label>Selecciona una hora:</label>
|
|
155
|
+
<TimeInput value={time} onChange={(newTime) => setTime(newTime)} />
|
|
156
|
+
</div>
|
|
157
|
+
);
|
|
158
|
+
};
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## 📝 Ejemplo de uso con Tailwind CSS
|
|
162
|
+
|
|
163
|
+
```jsx
|
|
164
|
+
import React, { useState } from "react";
|
|
165
|
+
import { TimeInput } from "@simple-time-input";
|
|
166
|
+
|
|
167
|
+
const App = () => {
|
|
168
|
+
const [time, setTime] = useState("12:00");
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<div>
|
|
172
|
+
<label>Selecciona una hora:</label>
|
|
173
|
+
<TimeInput
|
|
174
|
+
value={time}
|
|
175
|
+
onChange={(newTime) => setTime(newTime)}
|
|
176
|
+
className="p-2 bg-teal-500 text-white"
|
|
177
|
+
/>
|
|
178
|
+
</div>
|
|
179
|
+
);
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Demo y ejemplos de uso
|
|
183
|
+
|
|
184
|
+
[Demo](https://easy-time-input.vercel.app/)
|
|
185
|
+
|
|
186
|
+
## Proximas actualizaciones o features
|
|
187
|
+
|
|
188
|
+
- Hook para controlar el tiempo de manera más sencilla y de forma separada y reactiva
|
|
189
|
+
- Mas métodos para controlar el tiempo como por ejemplo: hasTimeChanged, hasMinutesChanged, hasHoursChanged, etc.
|
|
190
|
+
|
|
191
|
+
📄 Licencia
|
|
192
|
+
Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer base{._inputContainer_9rf1m_2{display:flex;align-items:center;justify-content:center;background-color:#fff;transition:.3s all ease-in-out;padding-inline:.35rem;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;max-width:fit-content;width:100%;min-height:36px}._timeInputMainContainer_9rf1m_15{display:flex;justify-content:center;align-items:center;min-width:94px}._inputContainer_9rf1m_2 input[type=number]{outline:0;border:none;background-color:transparent;max-width:20px;text-align:center;font-family:inherit;font-size:2ch;color:inherit;appearance:textfield}._inputContainer_9rf1m_2 input[type=number] -webkit-outer-spin-button,._inputContainer_9rf1m_2 input[type=number] -webkit-inner-spin-button{-webkit-appearance:none;appearance:textfield}}._inputContainer_9rf1m_2 input[type=number]:focus{outline:0}._inputContainer_9rf1m_2._disabled_9rf1m_43 input[type=number],._inputContainer_9rf1m_2._disabled_9rf1m_43 span{opacity:.5}._inputContainer_9rf1m_2 span{font-weight:inherit;margin-inline:.2rem;font-size:2ch}._hourContainer_9rf1m_54._hh_9rf1m_54._noValue_9rf1m_54{max-width:28px}._hourContainer_9rf1m_54._hyphen_9rf1m_58._noValue_9rf1m_54,._hourContainer_9rf1m_54._noZero_9rf1m_62{max-width:20px}._minutesContainer_9rf1m_66._mm_9rf1m_66._noValue_9rf1m_54{max-width:32px}._minutesContainer_9rf1m_66._hyphen_9rf1m_58._noValue_9rf1m_54,._minutesContainer_9rf1m_66._noZero_9rf1m_62{max-width:20px}._minutesContainer_9rf1m_66 ._withSeconds_9rf1m_78{width:9px}._minutesContainer_9rf1m_66._noZero_9rf1m_62{max-width:20px}._secondsContainer_9rf1m_86._ss_9rf1m_86._noValue_9rf1m_54{max-width:32px}._secondsContainer_9rf1m_86._hyphen_9rf1m_58._noValue_9rf1m_54{max-width:20px}._secondsContainer_9rf1m_86._noZero_9rf1m_62{max-width:23px}._inputContainer_9rf1m_2 input[type=number]::-webkit-inner-spin-button,._inputContainer_9rf1m_2 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;padding:0}._inputContainer_9rf1m_2 ._timerContainer_9rf1m_105,._inputContainer_9rf1m_2 ._minutesContainer_9rf1m_66{display:flex;align-items:center;justify-content:center;background-color:transparent;font-family:inherit;font-size:inherit}._inputContainer_9rf1m_2 ._iconContainer_9rf1m_115{display:flex;justify-content:center;align-items:center;cursor:pointer}._inputContainer_9rf1m_2 ._iconContainer_9rf1m_115 svg{width:20px;height:20px}._inputContainer_9rf1m_2._disabled_9rf1m_43 ._iconContainer_9rf1m_115{opacity:.7}button{font-size:inherit;font-weight:500;font-family:inherit;background-color:transparent;cursor:pointer;border:none;line-height:1}._arrowsContainer_9rf1m_141{display:flex;flex-direction:column;gap:5px}._arrowsContainer_9rf1m_141 button{max-height:1rem;display:flex;color:inherit}._arrowsContainer_9rf1m_141 button svg{width:.8rem;height:.8rem;stroke-width:2}._toggleAmPmContainer_9rf1m_159 button{display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:2ch;padding-inline:.2rem}._toggleAmPmContainer_9rf1m_159 button:disabled{opacity:.5}
|