Dashboard UI Kit

Apps PreviewDownload Design Package


import { SelectDate } from '@duik/it'
import SelectDate from '@duik/select-date'

SelectDate is a select which wraps Datepicker component, in which documentation you can also find more information. SelectDate accepts same properties and some extra such as "label" in the list below

Basic SelectDate

Same way as Datepicker is designed, you can use SelectDate as an component with uncontrolled value.

Date of Birth
<SelectDate label="Date of Birth" />
ReactHTML Snippet

Controlled Value

Here is an example selecting date range with a controlled value.

  onDateChange={function x(){}}
    from: new Date('2020-05-07T22:00:00.000Z'),
    to: new Date('2020-05-18T22:00:00.000Z')
ReactHTML Snippet

Localization and Formatting

You can format how to display the displayed value. For other formatters, check Datepicker localization.

renderValue(value?: DatepickerValue, isRange?: boolean, placeholder?: React.ReactNode) => React.ReactNode



Required: false

type: React.ReactNode

Required: false

type: React.ReactNode
Label to be displayed above the select.

Required: false

You can pass any prop that Datepicker accepts as well, e.g. minDate

Required: false

type: boolean
When multiple elements are rendered, e.g. providing a label, the component will wrap the content with a FormGroup component for mroe consistent UI. pass noWrap={false} to disable the default behaviour.

Required: false

type: any
Rest of the properties are passed down to Dropdown.