@bolttech/atoms-date-input 0.4.8 → 0.4.9
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/README.md +99 -33
- package/index.cjs.js +679 -429
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,27 +30,37 @@ This component relies on these peer dependencies (usually resolved by the monore
|
|
|
30
30
|
|
|
31
31
|
The `DateInput` component accepts the following properties:
|
|
32
32
|
|
|
33
|
-
| Prop
|
|
34
|
-
|
|
|
35
|
-
| id
|
|
36
|
-
| dataTestId
|
|
37
|
-
| variant
|
|
38
|
-
| label
|
|
39
|
-
| required
|
|
40
|
-
| disabled
|
|
41
|
-
| value
|
|
42
|
-
| min
|
|
43
|
-
| max
|
|
44
|
-
| locale
|
|
45
|
-
| cancel
|
|
46
|
-
| confirm
|
|
47
|
-
| showDatepicker
|
|
48
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
33
|
+
| Prop | Type | Default | Description |
|
|
34
|
+
| ------------------ | ---------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| id | `string` | — | The `id` prefix used to generate internal element ids. |
|
|
36
|
+
| dataTestId | `string` | — | The `data-testid` prefix for testing. |
|
|
37
|
+
| variant | `'grey' \| 'border'` | `'grey'` | The variant of the component. |
|
|
38
|
+
| label | `string` | — | A label to describe the input. |
|
|
39
|
+
| required | `boolean` | `false` | Whether the inputs are required or not. |
|
|
40
|
+
| disabled | `boolean` | `false` | Whether the component is disabled or not (also prevents opening the datepicker). |
|
|
41
|
+
| value | `string` | — | The controlled value of the date in `YYYY-MM-DD` format. |
|
|
42
|
+
| min | `Date \| string` | — | Minimum date (passed to `Calendar`). |
|
|
43
|
+
| max | `Date \| string` | — | Maximum date (passed to `Calendar`). |
|
|
44
|
+
| locale | `string` | — | Locale (passed to `Calendar`). |
|
|
45
|
+
| cancel | `string` | — | Cancel button label (passed to `Calendar`). |
|
|
46
|
+
| confirm | `string` | — | Confirm button label (passed to `Calendar`). |
|
|
47
|
+
| showDatepicker | `boolean` | `false` | Shows the calendar icon and enables the datepicker. |
|
|
48
|
+
| calendarYearOrder | `'asc' \| 'desc'` | `'desc'` | Year list order in the calendar. |
|
|
49
|
+
| icon | `string` | — | Custom icon for the datepicker button. |
|
|
50
|
+
| placeholder | `string \| null` | — | Placeholder text split by the separator into day/month/year parts. When not provided, no placeholder is shown.|
|
|
51
|
+
| separator | `'/' \| '-'` | `'/'` | Separator character displayed between date fields and used to parse the placeholder. |
|
|
52
|
+
| fieldOrder | `'DMY' \| 'YMD' \| 'YDM'` | `'DMY'` | Order of the date input fields. Auto-focus follows this order. |
|
|
53
|
+
| helperMessage | `string` | — | Helper text displayed below the input (hidden when `errorMessage` is present). |
|
|
54
|
+
| errorMessage | `string` | — | An error message displayed below the input. |
|
|
55
|
+
| onChange | `(evt: React.ChangeEvent<HTMLInputElement>) => void` | — | Called on changes. Emits `evt.target.value` as `YYYY-MM-DD` or `''` when incomplete. |
|
|
56
|
+
| onBlur | `(value: string) => void` | — | Called on blur with a `YYYY-MM-DD` string (note: not a FocusEvent). |
|
|
57
|
+
|
|
58
|
+
> The component also accepts all other props from `InputProps` (`@bolttech/atoms-input`) that are not listed above.
|
|
51
59
|
|
|
52
60
|
## Usage
|
|
53
61
|
|
|
62
|
+
### Basic usage
|
|
63
|
+
|
|
54
64
|
```tsx
|
|
55
65
|
import React, { useState } from 'react';
|
|
56
66
|
import { DateInput } from '@bolttech/atoms-date-input';
|
|
@@ -59,27 +69,83 @@ import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundat
|
|
|
59
69
|
const ExampleComponent = () => {
|
|
60
70
|
const [dateValue, setDateValue] = useState('');
|
|
61
71
|
|
|
62
|
-
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
63
|
-
/**
|
|
64
|
-
* While the date is incomplete, e.target.value === ''
|
|
65
|
-
* Once day+month+year are filled, e.target.value === 'YYYY-MM-DD'
|
|
66
|
-
*/
|
|
67
|
-
setDateValue(e.target.value);
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
const handleBlur = (value: string) => {
|
|
71
|
-
// value is a string, e.g. '2026-02-26'
|
|
72
|
-
console.log('blur:', value);
|
|
73
|
-
};
|
|
74
|
-
|
|
75
72
|
return (
|
|
76
73
|
<BolttechThemeProvider theme={bolttechTheme}>
|
|
77
|
-
<DateInput
|
|
74
|
+
<DateInput
|
|
75
|
+
id="date-input-id"
|
|
76
|
+
dataTestId="custom-date-input"
|
|
77
|
+
label="Date of Birth"
|
|
78
|
+
variant="grey"
|
|
79
|
+
value={dateValue}
|
|
80
|
+
onChange={(e: any) => setDateValue(e.target.value)}
|
|
81
|
+
showDatepicker={true}
|
|
82
|
+
required={true}
|
|
83
|
+
/>
|
|
78
84
|
</BolttechThemeProvider>
|
|
79
85
|
);
|
|
80
86
|
};
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Custom placeholder (i18n)
|
|
90
|
+
|
|
91
|
+
The `placeholder` prop accepts a format string split by the `separator`. Each segment maps to the corresponding field based on `fieldOrder`. When not provided, no placeholder is displayed.
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
{/* Portuguese — DD/MM/AAAA */}
|
|
95
|
+
<DateInput placeholder="DD/MM/AAAA" locale="pt-BR" label="Data de nascimento" />
|
|
96
|
+
|
|
97
|
+
{/* French — JJ/MM/AAAA */}
|
|
98
|
+
<DateInput placeholder="JJ/MM/AAAA" locale="fr-FR" label="Date de naissance" />
|
|
99
|
+
|
|
100
|
+
{/* No placeholder (default behavior) */}
|
|
101
|
+
<DateInput label="Date" />
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Separator
|
|
105
|
+
|
|
106
|
+
Choose between `/` and `-` as the visual separator between fields:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
<DateInput separator="-" placeholder="DD-MM-YYYY" label="Date" />
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Field order
|
|
113
|
+
|
|
114
|
+
Control the order of the input fields. Useful for locales that use year-first formats:
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
{/* ISO format: Year / Month / Day */}
|
|
118
|
+
<DateInput fieldOrder="YMD" placeholder="YYYY/MM/DD" label="Date (ISO)" />
|
|
119
|
+
|
|
120
|
+
{/* ISO with dash separator */}
|
|
121
|
+
<DateInput fieldOrder="YMD" separator="-" placeholder="YYYY-MM-DD" label="Date" />
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
> Note: Regardless of `fieldOrder`, the emitted value is always `YYYY-MM-DD`.
|
|
81
125
|
|
|
82
|
-
|
|
126
|
+
### Helper message
|
|
127
|
+
|
|
128
|
+
Display a helper text below the input. It is automatically hidden when `errorMessage` is present:
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
<DateInput
|
|
132
|
+
helperMessage="Formato: DD/MM/AAAA"
|
|
133
|
+
label="Data de nascimento"
|
|
134
|
+
/>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### With datepicker
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
<DateInput
|
|
141
|
+
showDatepicker
|
|
142
|
+
locale="pt-BR"
|
|
143
|
+
min={new Date('1900-01-01')}
|
|
144
|
+
max={new Date('2030-12-31')}
|
|
145
|
+
cancel="Cancelar"
|
|
146
|
+
confirm="Confirmar"
|
|
147
|
+
label="Data"
|
|
148
|
+
/>
|
|
83
149
|
```
|
|
84
150
|
|
|
85
151
|
## Contributing
|