Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Usage
  2. Controlled Date Value
  3. Min and Max Date
  4. Range Date Select
  5. Initial Visible month/date
  6. First week day
  7. Localization and Formatting
  8. Prop Table

Datepicker

import { Datepicker, DatepickerContainer } from '@duik/it'
import Datepicker, { DatepickerContainer } from '@duik/datepicker'

A datepicker shows a monthly calendar to choose a single date or a range with 0 external dependencies.


Basic Datepicker

Basic Datepicker comes plain without external wrapping styling and has an uncontrolled value.

MonTueWedThuFriSatSun
<Datepicker />
ReactHTML Snippet

Single Date With Controlled Value

As you can see, we wrapped our Datepicker with a purely UI component DatepickerContainer. This is a recommended way to display your Datepicker.

In the example below, we are taking control over the displayed value by passing value and onDateChange prop. You onChange shuld accept date as a single param.

MonTueWedThuFriSatSun


<DatepickerContainer>
  <Datepicker
    value={value1}
    onDateChange={setValue1}
  />
</DatepickerContainer>
ReactHTML Snippet

Min and Max Date

You can limit the date selection by passing minDate, maxDate or both. The days which do not fit in the range will be disabled.

MonTueWedThuFriSatSun


<DatepickerContainer>
  <Datepicker
    value={value3}
    onDateChange={setValue3}
    minDate={new Date(currentYear, currentMonth, 5)}
    maxDate={new Date(currentYear, currentMonth, 25)}
  />
</DatepickerContainer>
ReactHTML Snippet

Range Date

You can allow range selection with isRange prop. As a value (and onChange param), you should pass an DatepickerRangeValue = { from?: Date, to?: Date }

MonTueWedThuFriSatSun
<DatepickerContainer>
  <Datepicker isRange value={value2} onDateChange={setValue2} />
</DatepickerContainer>
ReactHTML Snippet

Initial Visible month/date

You can change the initial visible month by passing initialVisibleDate. If you don't, this will be determined based on value or current date.

MonTueWedThuFriSatSun
<DatepickerContainer>
  <Datepicker initialVisibleDate={new Date(2222, 1, 1)} />
</DatepickerContainer>
ReactHTML Snippet

First WeekDay

By default, Monday is a first weekday. You can change this by passing weekdayOffset prop. See example below starting with Sunday.

SunMonTueWedThuFriSat
<DatepickerContainer>
<Datepicker weekdayOffset={1} />
</DatepickerContainer>
ReactHTML Snippet

Localization and Formatting

Anywhere the datepicker renders text, you can replace it by passing formatters. Your formatters can return plain string or ReactNode as well.

renderTitle(visibleDate: Date, activeView: DatepickerView) => React.ReactNode
renderMonthName(monthNumber: number) => React.ReactNode
renderWeekdayShort(weekdayNumber: number) => React.ReactNode

Props

value

Required: false

type: DatepickerValue
Pass "Date" or object with from and to if you are using isRange
onDateChange

Required: false

type: (value: DatepickerValue) => void
This gives you the ability to handle the date selection.
isRange

Required: false

type: boolean
Enables date range selection
minDate

Required: false

type: Date
A minimum date that can be selected. The rest is disabled.
maxDate

Required: false

type: Date
A maximum date that can be selected. The rest is disabled.
initialVisibleDate

Required: false

type: Date
A date to determine initial visible month. If not provided, initial display month will be determined based on value prop or current date.
weekdayOffset

Required: false

type: number

default value: 0

Allows you to change starting weekday. 0 is Monday, 1 is Sunday.

DatepickerValue

Value varies based on the isRange prop.

DatepickerSimpleValueDateif isRange is false
DatepickerRangeValue{from ?: Date, to?: Date }if isRange is true