From 3f01b4e36d2d0952c2dfefcc8adf140859de7f7f Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Wed, 24 Jan 2024 22:09:06 +0300 Subject: [PATCH 1/9] feat: add readme --- src/components/DateField/README.md | 376 +++++++++++++++++++++++++++++ 1 file changed, 376 insertions(+) create mode 100644 src/components/DateField/README.md diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md new file mode 100644 index 0000000..cea2b49 --- /dev/null +++ b/src/components/DateField/README.md @@ -0,0 +1,376 @@ + + +# DateField + + + +```tsx +import {DateField} from '@gravity-ui/date-components'; +``` + +`DateField` component is a versatile and convenient input field specifically designed for date entry in React applications. With an intuitive interface and easy integration, it's perfect for any form that requires date or time input, such as event schedulers, booking systems, or data-driven reports. It can be controlled (if you set `value` property) or uncontrolled (if you set `defaultValue` property). Component is uncontrolled by default. + +## Appearance + +The appearance of `DateField` is controlled by the `size`, `view` and `pin` properties. + +### Size + +To control the size of the `DateField` use the `size` property. Default size is `m`. + + + + + +```tsx + + + + +``` + + + +### View + +`normal` - the main view of `DateField` (used by default). + + + +`clear` - view of `DateField` without visible borders (can be used with a custom wrapper) + + + + + +```tsx + + +``` + + + +### Pin + +The `pin` property allows you to control the shape of the right and left edges and is usually used for combining multiple controls in a single unit. +The value of the `pin` property consists of left and edge style names divided by a dash, e.g. `"round-brick"`. +The edge styles are: `round` (default), `circle`, `brick` and `clear`. + + + + + +```tsx + + + +``` + + + +## Value + +### Min and max value + +The minValue property allows you to specify the earliest date and time that can be entered by the user. Conversely, the maxValue property specifies the latest date and time that can be entered. + + + + + +```tsx + + + +``` + + + +## States + +### Disabled + +The state of the `DateField` where you don't want the user to be able to interact with the component. + + + + + +```tsx + +``` + + + +### Readonly + +`readOnly` is a boolean attribute that, when set to true, makes the 'DateField' component immutable to the user. This means that while the input will display its current value, users will not be able to change it. + + + + + +```tsx + +``` + + + +### Error + +The state of the `DateField` in which you want to indicate incorrect user input. To change `DateField` appearance, use the `validationState` property with the `"invalid"` value. An optional message text can be added via the `errorMessage` property. Message text will be rendered under the component. + + + + + +```tsx + + +``` + + + +## Additional content + +### Placeholder + +This prop allows you to provide a short hint that describes the expected value of the input field. This hint is displayed within the input field before the user enters a value, and it disappears upon the entry of text. + + + + + +```tsx + +``` + + + +### Label + +Allows you to place the label in the left part of the field. Label can take up no more than half the width of the entire space of `DateField`. + + + + + +```tsx + +``` + + + +### Clear button + +`hasClear` is a boolean prop that, provides users with the ability to quickly clear the content of the input field. + + + + + +```tsx + +``` + + + +### Left content + +Allows you to add content to the left part of the field. It is placed before all other components. + + + + + +```tsx +Left content} /> +``` + + + +### Right content + +Allows you to add content to the right part of the field. It is placed after all other components. + + + + + +```tsx +Right} /> +``` + + + +## Format + +The `format` prop is a string that defines the date and time format the `DateField` component will accept and display. This prop determines how the date and time are visually presented to the user and how the user's input is expected to be formatted. [Available formats](https://day.js.org/docs/en/display/format) + + + + + +```tsx + +``` + + + +## Properties + +| Name | Description | Type | Default | +| :-------------- | :---------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------: | +| autoComplete | The control's `autocomplete` attribute | `boolean` `string` | | +| autoFocus | The control's `autofocus` attribute | `boolean` | | +| className | The control's wrapper class name | `string` | | +| controlProps | The control's html attributes | `React.InputHTMLAttributes` | | +| controlRef | React ref provided to the control | `React.Ref` | | +| defaultValue | The control's default value, used when the component is not controlled | `string` | | +| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | +| errorMessage | Error text | `string` | | +| errorPlacement | Error placement | `outside` `inside` | `outside` | +| hasClear | Shows the icon for clearing control's value | `boolean` | `false` | +| id | The control's `id` attribute | `string` | | +| label | Help text rendered to the left of the input node | `string` | | +| leftContent | The user`s node rendered before label and input | `React.ReactNode` | | +| name | The `name` attribute of the control. If unspecified, it will be autogenerated if not specified | `string` | | +| note | An optional element displayed under the bottom-right corner of the control that shares a space with the error container | `React.ReactNode` | | +| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `function` | | +| onChange | Fires when the input’s value is changed by the user. Provides change event as an callback's argument | `function` | | +| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `function` | | +| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `function` | | +| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `function` | | +| onUpdate | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | `function` | | +| pin | The control's border view | `string` | `'round-round'` | +| placeholder | Text that appears in the control when it has no value set | `string` | | +| qa | Test ID attribute (`data-qa`) | `string` | | +| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | +| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | +| tabIndex | The `tabindex` attribute of the control | `string` | | +| type | The type of the control | `string` | | +| validationState | Validation state | `"invalid"` | | +| value | The value of the control | `string` | | +| view | The view of the control | `"normal"` `"clear"` | `"normal"` | From 56f156baca72e1dcf61c50fcbf2a1eb476388299 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Wed, 24 Jan 2024 23:05:59 +0300 Subject: [PATCH 2/9] feat: add table with properties --- src/components/DateField/README.md | 72 +++++++++++++++--------------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index cea2b49..9b7682b 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -106,7 +106,7 @@ LANDING_BLOCK--> ### Min and max value -The minValue property allows you to specify the earliest date and time that can be entered by the user. Conversely, the maxValue property specifies the latest date and time that can be entered. +The `minValue` property allows you to specify the earliest date and time that can be entered by the user. Conversely, the `maxValue` property specifies the latest date and time that can be entered. ### Readonly -`readOnly` is a boolean attribute that, when set to true, makes the 'DateField' component immutable to the user. This means that while the input will display its current value, users will not be able to change it. +`readOnly` is a boolean attribute that, when set to true, makes the `DateField` component immutable to the user. This means that while the input will display its current value, users will not be able to change it. ## Properties -| Name | Description | Type | Default | -| :-------------- | :---------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------: | -| autoComplete | The control's `autocomplete` attribute | `boolean` `string` | | -| autoFocus | The control's `autofocus` attribute | `boolean` | | -| className | The control's wrapper class name | `string` | | -| controlProps | The control's html attributes | `React.InputHTMLAttributes` | | -| controlRef | React ref provided to the control | `React.Ref` | | -| defaultValue | The control's default value, used when the component is not controlled | `string` | | -| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | -| errorMessage | Error text | `string` | | -| errorPlacement | Error placement | `outside` `inside` | `outside` | -| hasClear | Shows the icon for clearing control's value | `boolean` | `false` | -| id | The control's `id` attribute | `string` | | -| label | Help text rendered to the left of the input node | `string` | | -| leftContent | The user`s node rendered before label and input | `React.ReactNode` | | -| name | The `name` attribute of the control. If unspecified, it will be autogenerated if not specified | `string` | | -| note | An optional element displayed under the bottom-right corner of the control that shares a space with the error container | `React.ReactNode` | | -| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `function` | | -| onChange | Fires when the input’s value is changed by the user. Provides change event as an callback's argument | `function` | | -| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `function` | | -| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `function` | | -| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `function` | | -| onUpdate | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | `function` | | -| pin | The control's border view | `string` | `'round-round'` | -| placeholder | Text that appears in the control when it has no value set | `string` | | -| qa | Test ID attribute (`data-qa`) | `string` | | -| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | -| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | -| tabIndex | The `tabindex` attribute of the control | `string` | | -| type | The type of the control | `string` | | -| validationState | Validation state | `"invalid"` | | -| value | The value of the control | `string` | | -| view | The view of the control | `"normal"` `"clear"` | `"normal"` | +| Name | Description | Type | Default | +| :---------------- | :------------------------------------------------------------------------------------------------------------ | :-------------------------------------------: | :-----------------------: | +| aria-describedby | The control's `aria-describedby` attribute | `string` | | +| aria-details | The control's `aria-details` attribute | `string` | | +| aria-label | The control's `aria-label` attribute | `string` | | +| aria-labelledby | The control's `aria-labelledby` attribute | `string` | | +| autoFocus | The control's `autofocus` attribute | `boolean` | | +| className | The control's wrapper class name | `string` | | +| defaultValue | The control's default value, used when the component is not controlled | `DateTime` | | +| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | +| errorMessage | Error text | `string` | | +| format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | | +| hasClear | Shows the icon for clearing control's value | `boolean` | `false` | +| id | The control's `id` attribute | `string` | | +| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | `((date: DateTime) => boolean)` | | +| label | Help text rendered to the left of the input node | `string` | | +| leftContent | The user`s node rendered before label and input | `React.ReactNode` | | +| maxValue | The maximum allowed date that a user may select. | `DateTime` | | +| minValue | The minimum allowed date that a user may select. | `DateTime` | | +| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent) => void)` | | +| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent) => void)` | | +| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent) => void)` | | +| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent) => void)` | | +| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: DateTime \| null) => void` | | +| pin | Corner rounding | `string` | `'round-round'` | +| placeholder | Text that appears in the control when it has no value set | `string` | | +| 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` | +| readOnly | Whether the calendar value is immutable. | `boolean` | `false` | +| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | +| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | +| style | Sets inline style for the element. | `CSSProperties` | | +| timeZone | Sets the time zone | `string` | | +| validationState | Validation state | `"invalid"` | | +| value | The value of the control | `DateTime` `null` | | +| view | The view of the control | `"normal"` `"clear"` | `"normal"` | From 421b1f82ffc9d3cd522d3dfa25361e5320cfabd3 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 00:25:29 +0300 Subject: [PATCH 3/9] feat: remove window object --- src/components/DateField/hooks/useDateFieldProps.ts | 4 ++-- src/components/DateField/utils.ts | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/DateField/hooks/useDateFieldProps.ts b/src/components/DateField/hooks/useDateFieldProps.ts index ebb09d9..1e07ce5 100644 --- a/src/components/DateField/hooks/useDateFieldProps.ts +++ b/src/components/DateField/hooks/useDateFieldProps.ts @@ -3,7 +3,7 @@ import React from 'react'; import type {TextInputProps} from '@gravity-ui/uikit'; import type {DateFieldProps} from '../DateField'; -import {CtrlCmd, cleanString} from '../utils'; +import {cleanString} from '../utils'; import type {DateFieldState} from './useDateFieldState'; @@ -157,7 +157,7 @@ export function useDateFieldProps( } else if (e.key === 'Backspace' || e.key === 'Delete') { e.preventDefault(); state.clearSection(); - } else if (e.key === 'a' && e[CtrlCmd]) { + } else if (e.key === 'a' && (e['ctrlKey'] || e['metaKey'])) { e.preventDefault(); setSelectedSections('all'); } diff --git a/src/components/DateField/utils.ts b/src/components/DateField/utils.ts index d73b805..9b0b0ef 100644 --- a/src/components/DateField/utils.ts +++ b/src/components/DateField/utils.ts @@ -9,9 +9,6 @@ import type { DateFormatTokenMap, } from './types'; -export const isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0; -export const CtrlCmd = isMac ? 'metaKey' : 'ctrlKey'; - export function expandFormat(format: string) { const localeFormats = settings.getLocaleData().formats; From 37c81ba8a594cefbc2061849731451846b10d41e Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 15:53:34 +0300 Subject: [PATCH 4/9] fix: use date constructor from node for landing examples --- src/components/DateField/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index 9b7682b..aec5dd4 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -115,8 +115,8 @@ The `minValue` property allows you to specify the earliest date and time that ca `} > - - + + LANDING_BLOCK--> From d9a73be209ba8fe86c917913bf52d6bcd276afdb Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 18:34:27 +0300 Subject: [PATCH 5/9] fix: readme text --- src/components/DateField/README.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index aec5dd4..47fe52c 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -8,7 +8,7 @@ import {DateField} from '@gravity-ui/date-components'; ``` -`DateField` component is a versatile and convenient input field specifically designed for date entry in React applications. With an intuitive interface and easy integration, it's perfect for any form that requires date or time input, such as event schedulers, booking systems, or data-driven reports. It can be controlled (if you set `value` property) or uncontrolled (if you set `defaultValue` property). Component is uncontrolled by default. +`DateField` component is a versatile and convenient input field specifically designed for date entry in React applications. With an intuitive interface and easy integration, it's perfect for any form that requires date or time input, such as event schedulers, booking systems, or data-driven reports. It can be controlled if you set `value` property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property `defaultValue`. Component is uncontrolled by default. ## Appearance @@ -106,7 +106,7 @@ LANDING_BLOCK--> ### Min and max value -The `minValue` property allows you to specify the earliest date and time that can be entered by the user. Conversely, the `maxValue` property specifies the latest date and time that can be entered. +The `minValue` property allows you to specify the earliest date and time that can be entered by the user. Conversely, the `maxValue` property specifies the latest date and time that can be entered. If you input the value out of this bounds component changes it's view like in case of invalid validation state. @@ -124,8 +126,8 @@ LANDING_BLOCK--> ```tsx - - + + ``` @@ -334,9 +336,13 @@ LANDING_BLOCK--> ```tsx - + ``` +## Time zone + +`timeZone` is the property to set the time zone of the value in the input. [Learn more about time zones](https://day.js.org/docs/en/timezone/timezone) + ## Properties @@ -349,7 +355,7 @@ LANDING_BLOCK--> | aria-labelledby | The control's `aria-labelledby` attribute | `string` | | | autoFocus | The control's `autofocus` attribute | `boolean` | | | className | The control's wrapper class name | `string` | | -| defaultValue | The control's default value, used when the component is not controlled | `DateTime` | | +| defaultValue | Sets the initial value for uncontrolled component. Optional. | `DateTime` | | | disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | | errorMessage | Error text | `string` | | | format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | | From 4a4aec3d4c80021215b23619feacb750978c4b3b Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 18:54:12 +0300 Subject: [PATCH 6/9] fix: min max value section --- src/components/DateField/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index 47fe52c..0fbe92e 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -116,9 +116,7 @@ The `minValue` property allows you to specify the earliest date and time that ca `} > - - LANDING_BLOCK--> From d643a25d2564e1b21696ea26669ee1d12dc62e4c Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 18:59:33 +0300 Subject: [PATCH 7/9] fix: error state examples --- src/components/DateField/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index 0fbe92e..33b6134 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -184,11 +184,11 @@ The state of the `DateField` in which you want to indicate incorrect user input. - + `} > - + LANDING_BLOCK--> @@ -196,7 +196,7 @@ LANDING_BLOCK--> ```tsx - + ``` From 3187d7488244f8c40cfb9dbb1172bde6e55a98f4 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 19:04:19 +0300 Subject: [PATCH 8/9] fix: remove optional --- src/components/DateField/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index 33b6134..7a85234 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -353,7 +353,7 @@ LANDING_BLOCK--> | aria-labelledby | The control's `aria-labelledby` attribute | `string` | | | autoFocus | The control's `autofocus` attribute | `boolean` | | | className | The control's wrapper class name | `string` | | -| defaultValue | Sets the initial value for uncontrolled component. Optional. | `DateTime` | | +| defaultValue | Sets the initial value for uncontrolled component. | `DateTime` | | | disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | | errorMessage | Error text | `string` | | | format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | | From 5997d30cdbfdb0c571aa2ffc6a478699d036c206 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 25 Jan 2024 19:10:41 +0300 Subject: [PATCH 9/9] fix: timezone link --- src/components/DateField/README.md | 72 +++++++++++++++--------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/components/DateField/README.md b/src/components/DateField/README.md index 7a85234..e72e8fc 100644 --- a/src/components/DateField/README.md +++ b/src/components/DateField/README.md @@ -339,44 +339,44 @@ LANDING_BLOCK--> ## Time zone -`timeZone` is the property to set the time zone of the value in the input. [Learn more about time zones](https://day.js.org/docs/en/timezone/timezone) +`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) ## Properties -| Name | Description | Type | Default | -| :---------------- | :------------------------------------------------------------------------------------------------------------ | :-------------------------------------------: | :-----------------------: | -| aria-describedby | The control's `aria-describedby` attribute | `string` | | -| aria-details | The control's `aria-details` attribute | `string` | | -| aria-label | The control's `aria-label` attribute | `string` | | -| aria-labelledby | The control's `aria-labelledby` attribute | `string` | | -| autoFocus | The control's `autofocus` attribute | `boolean` | | -| className | The control's wrapper class name | `string` | | -| defaultValue | Sets the initial value for uncontrolled component. | `DateTime` | | -| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | -| errorMessage | Error text | `string` | | -| format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | | -| hasClear | Shows the icon for clearing control's value | `boolean` | `false` | -| id | The control's `id` attribute | `string` | | -| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | `((date: DateTime) => boolean)` | | -| label | Help text rendered to the left of the input node | `string` | | -| leftContent | The user`s node rendered before label and input | `React.ReactNode` | | -| maxValue | The maximum allowed date that a user may select. | `DateTime` | | -| minValue | The minimum allowed date that a user may select. | `DateTime` | | -| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent) => void)` | | -| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent) => void)` | | -| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent) => void)` | | -| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent) => void)` | | -| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: DateTime \| null) => void` | | -| pin | Corner rounding | `string` | `'round-round'` | -| placeholder | Text that appears in the control when it has no value set | `string` | | -| 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` | -| readOnly | Whether the calendar value is immutable. | `boolean` | `false` | -| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | -| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | -| style | Sets inline style for the element. | `CSSProperties` | | -| timeZone | Sets the time zone | `string` | | -| validationState | Validation state | `"invalid"` | | -| value | The value of the control | `DateTime` `null` | | -| view | The view of the control | `"normal"` `"clear"` | `"normal"` | +| Name | Description | Type | Default | +| :---------------- | :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-----------------------: | +| aria-describedby | The control's `aria-describedby` attribute | `string` | | +| aria-details | The control's `aria-details` attribute | `string` | | +| aria-label | The control's `aria-label` attribute | `string` | | +| aria-labelledby | The control's `aria-labelledby` attribute | `string` | | +| autoFocus | The control's `autofocus` attribute | `boolean` | | +| className | The control's wrapper class name | `string` | | +| defaultValue | Sets the initial value for uncontrolled component. | `DateTime` | | +| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` | +| errorMessage | Error text | `string` | | +| format | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) | `string` | | +| hasClear | Shows the icon for clearing control's value | `boolean` | `false` | +| id | The control's `id` attribute | `string` | | +| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | `((date: DateTime) => boolean)` | | +| label | Help text rendered to the left of the input node | `string` | | +| leftContent | The user`s node rendered before label and input | `React.ReactNode` | | +| maxValue | The maximum allowed date that a user may select. | `DateTime` | | +| minValue | The minimum allowed date that a user may select. | `DateTime` | | +| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent) => void)` | | +| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent) => void)` | | +| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `((e: KeyboardEvent) => void)` | | +| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | `((e: KeyboardEvent) => void)` | | +| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | `((value: DateTime \| null) => void` | | +| pin | Corner rounding | `string` | `'round-round'` | +| placeholder | Text that appears in the control when it has no value set | `string` | | +| 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` | +| readOnly | Whether the calendar value is immutable. | `boolean` | `false` | +| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | +| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | +| style | Sets inline style for the element. | `CSSProperties` | | +| timeZone | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) | `string` | | +| validationState | Validation state | `"invalid"` | | +| value | The value of the control | `DateTime` `null` | | +| view | The view of the control | `"normal"` `"clear"` | `"normal"` |