Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic SelectDate
  2. Controlled Value
  3. Localization and Formatting
  4. Prop Table

SelectDate

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
MonTueWedThuFriSatSun
<SelectDate label="Date of Birth" />
ReactHTML Snippet

Controlled Value

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

MonTueWedThuFriSatSun
<SelectDate
  isRange
  onDateChange={function x(){}}
  value={{
    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

Props

placeholder

Required: false

type: React.ReactNode
label

Required: false

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

Required: false

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

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.
...rest

Required: false

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