Skip to content

Commit 6b5042a

Browse files
ieromanovieromanov
committed
feat(DateField): docs
1 parent ab2ff70 commit 6b5042a

File tree

2 files changed

+120
-68
lines changed

2 files changed

+120
-68
lines changed

‎src/components/DateField/README.md

Lines changed: 61 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -347,44 +347,70 @@ LANDING_BLOCK-->
347347

348348
<!--/GITHUB_BLOCK-->
349349

350+
### Custom Date Parser
351+
352+
You can provide a custom parser function to handle pasted date strings through the `parseDateFromString` prop. This is useful when you need to support specific date formats or custom parsing logic that differs from the default behavior.
353+
354+
<!--GITHUB_BLOCK-->
355+
356+
```tsx
357+
import {dateTime} from '@gravity-ui/date-utils';
358+
359+
const customParser = (dateStr: string, format: string, timeZone?: string) => {
360+
// Custom parsing logic
361+
// For example, handle DD/MM/YYYY format specifically
362+
if (dateStr.match(/^\d{2}\/\d{2}\/\d{4}$/)) {
363+
const [day, month, year] = dateStr.split('/');
364+
return dateTime({input: `${year}-${month}-${day}`, timeZone});
365+
}
366+
// Fallback to default parsing
367+
return dateTime({input: dateStr, format, timeZone});
368+
};
369+
370+
<DateField parseDateFromString={customParser} />
371+
```
372+
373+
<!--/GITHUB_BLOCK-->
374+
350375
## Time zone
351376

352377
`timeZone` is the property to set the time zone of the value in the input. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)
353378

354379
## Properties
355380

356-
| Name | Description | Type | Default |
357-
| :---------------- | :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-----------------------: |
358-
| aria-describedby | The control's `aria-describedby` attribute | `string` | |
359-
| aria-details | The control's `aria-details` attribute | `string` | |
360-
| aria-label | The control's `aria-label` attribute | `string` | |
361-
| aria-labelledby | The control's `aria-labelledby` attribute | `string` | |
362-
| autoFocus | The control's `autofocus` attribute | `boolean` | |
363-
| className | The control's wrapper class name | `string` | |
364-
| defaultValue | Sets the initial value for uncontrolled component. | `DateTime` | |
365-
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
366-
| errorMessage | Error text | `ReactNode` | |
367-
| format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | |
368-
| hasClear | Shows the icon for clearing control's value | `boolean` | `false` |
369-
| id | The control's `id` attribute | `string` | |
370-
| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | `((date: DateTime) => boolean)` | |
371-
| label | Help text rendered to the left of the input node | `string` | |
372-
| startContent | The user`s node rendered before label and input | `React.ReactNode` | |
373-
| maxValue | The maximum allowed date that a user may select. | `DateTime` | |
374-
| minValue | The minimum allowed date that a user may select. | `DateTime` | |
375-
| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | |
376-
| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | |
377-
| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | |
378-
| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | |
379-
| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: DateTime \| null) => void` | |
380-
| pin | Corner rounding | `string` | `'round-round'` |
381-
| placeholder | Text that appears in the control when it has no value set | `string` | |
382-
| placeholderValue | A placeholder date that controls the default values of each segment when the user first interacts with them. | `DateTime` | `today's date at midnigh` |
383-
| readOnly | Whether the component's value is immutable. | `boolean` | `false` |
384-
| endContent | User`s node rendered after the input node and clear button | `React.ReactNode` | |
385-
| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
386-
| style | Sets inline style for the element. | `CSSProperties` | |
387-
| timeZone | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) | `string` | |
388-
| validationState | Validation state | `"invalid"` | |
389-
| value | The value of the control | `DateTime` `null` | |
390-
| view | The view of the control | `"normal"` `"clear"` | `"normal"` |
381+
| Name | Description | Type | Default |
382+
| :---------------- | :------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------: | :-----------------------: |
383+
| aria-describedby | The control's `aria-describedby` attribute | `string` | |
384+
| aria-details | The control's `aria-details` attribute | `string` | |
385+
| aria-label | The control's `aria-label` attribute | `string` | |
386+
| aria-labelledby | The control's `aria-labelledby` attribute | `string` | |
387+
| autoFocus | The control's `autofocus` attribute | `boolean` | |
388+
| className | The control's wrapper class name | `string` | |
389+
| defaultValue | Sets the initial value for uncontrolled component. | `DateTime` | |
390+
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
391+
| errorMessage | Error text | `ReactNode` | |
392+
| format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | |
393+
| hasClear | Shows the icon for clearing control's value | `boolean` | `false` |
394+
| id | The control's `id` attribute | `string` | |
395+
| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | `((date: DateTime) => boolean)` | |
396+
| label | Help text rendered to the left of the input node | `string` | |
397+
| startContent | The user`s node rendered before label and input | `React.ReactNode` | |
398+
| maxValue | The maximum allowed date that a user may select. | `DateTime` | |
399+
| minValue | The minimum allowed date that a user may select. | `DateTime` | |
400+
| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | |
401+
| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent<Element, Element>) => void)` | |
402+
| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | |
403+
| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent<Element>) => void)` | |
404+
| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: DateTime \| null) => void` | |
405+
| parseDateFromString | Custom parser function for parsing pasted date strings. If not provided, the default parser will be used. | `((dateStr: string, format: string, timeZone?: string) => DateTime)` | |
406+
| pin | Corner rounding | `string` | `'round-round'` |
407+
| placeholder | Text that appears in the control when it has no value set | `string` | |
408+
| placeholderValue | A placeholder date that controls the default values of each segment when the user first interacts with them. | `DateTime` | `today's date at midnigh` |
409+
| readOnly | Whether the component's value is immutable. | `boolean` | `false` |
410+
| endContent | User`s node rendered after the input node and clear button | `React.ReactNode` | |
411+
| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
412+
| style | Sets inline style for the element. | `CSSProperties` | |
413+
| timeZone | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) | `string` | |
414+
| validationState | Validation state | `"invalid"` | |
415+
| value | The value of the control | `DateTime` `null` | |
416+
| view | The view of the control | `"normal"` `"clear"` | `"normal"` |

0 commit comments

Comments
 (0)