DateRange

Props

NameTypeDescription
formatstringdd.MM.yyyy is default
isDisabledbooleanIn case you want it to be disabled
isOpenboolean...
maxDateMax available date
minDateMin available date
onBlur(ev: BlurEvent) => voidBlur handler
onChange(ev: ChangeEvent) => voidChange handler
onEnterPress(ev: ChangeEvent) => voidEnter press handler
onFocus(ev: FocusEvent) => voidFocus handler
placeholderstring | [string | undefined, string | undefined]Placeholder
shouldRender
boolean
Pass false if you don't want the component to appear
valuestring | Date | nullSelected date
_[className]
[x: string]: unknown
E.g.: _w-48 adds a css class w-48 to the component's outer wrapper.
  • Uncontrolled
  • Controlled
  • Form
  • Required

() => {
  return (
    <L.DateRange
      onChange={({ component }) => {
        log(component.value)
      }}
      _w-96
    />
  )
}
  

Validation

NameTypeDescription
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. (value) => value.length > 4

type PredefinedValidator = | 'creditCardNumber' | 'email' | 'url'

See predefined validators

interface ValidatorObject { validator: PredefinedValidator | RegExp | Validator, invalidMessage?: string, }

ValidatorObject is useful wnen you need to validate a value against several validators and show inividual messages for each.
Just use an array of validator objects.

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' } ]