DateRange
Props
Name | Type | Description |
---|---|---|
format | string | dd.MM.yyyy is default |
isDisabled | boolean | In case you want it to be disabled |
isOpen | boolean | ... |
max | Date | Max available date |
min | Date | Min available date |
onBlur | (ev: BlurEvent) => void | Blur handler |
onChange | (ev: ChangeEvent) => void | Change handler |
onEnterPress | (ev: ChangeEvent) => void | Enter press handler |
onFocus | (ev: FocusEvent) => void | Focus handler |
placeholder | string | [string | undefined, string | undefined] | Placeholder |
shouldRender | boolean | Pass false if you don't want the component to appear |
value | [string | string] | [Date | null, Date | null] | Input fields values |
_[className] | [x: string]: unknown | E.g.: _w-48 adds a css class w-48 to the component's outer wrapper. |
() => { return ( <L.DateTimeRange onChange={({ component }) => { log(component.value) }} _w-96 /> ) }
Validation components' props
Name | Type | Description |
---|---|---|
form | string | Form name |
name | string | Component name |
isRequired | boolean | If you don't want the field to be empty |
isValid | boolean | Controlled valid state |
invalidMessage | ReactNode | Text to show when the value does not match requirements |
requiredMessage | ReactNode | Text to show when the field is not filled |
shouldValidateUnmounted | boolean | The field can still affect form submission even if it is not rendered |
validator | Validator
| PredefinedValidator
| RegExp
| ValidatorObject[] | |
interface Validator {
(value: any): boolean,
} | A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. | |
type PredefinedValidator =
| 'creditCardNumber'
| 'email'
| 'url'
| ||
interface ValidatorObject {
validator: PredefinedValidator
| RegExp
| Validator,
invalidMessage?: string,
} |
E.g. [
{
validator: (value) => value.length > 4,
invalidMessage:
'More than 4 sympols please'
},
{
validator: /^\w+$/,
invalidMessage:
'Only a-z, A-Z, 0-9 and _ are allowed'
}
] |