Ecme - The Ultimate Next & TypeScript Web Template

DatePicker

Date picker allow users select a date by from a popup calendar.

Basic

Typical usage DatePicker component.

Range picker

Typical usage RangePicker component.

Date time picker

Combination of <DatePicker /> & <TimeInput />

Controlled

Controlled usage with <DatePicker /> & <DatePickerRange />

Format

Picker allow us to set custom both date format for input & picker via inputFormat & labelFormat props.

Input format:

Inner label format:

Custom Render

You can render custom day elements or apply styles & className to days with these dayStyle, dayClassName & renderDay props.

Disable out of period date

Setting minDate & maxDate props to limit available date within a period.

Disabled certain date

Disabled part of dates by using disabledDate prop callback.

Multiple date view

We can have mutiple date view by setting dateViewCount more than 1.

Disabled Input

Use disabled prop to disable user expand DatePicker.

Inputtable

Release input lock to let user enter the date manually.

Input Size

DatePicker allow us to control the input size via size prop.

Input Affix

inputSuffix or inputPrefix allow us to customize input affix content.

Prefix:

Suffix:

Clear Button

You can customize the clear button via clearable or clearButton props.

No clear button:

Custom clear button:

Localization

DatePicker receive locale value from <ConfigProvider />, but there is also an option to input locale manually.

API

DatePicker

Prop	Description	Type	Default
clearable	Whether allow to clear value	`boolean`	`true`
clearButton	Custom clear button	`string` \| `ReactNode`	`ReactNode`
closePickerOnChange	Whether close picker upon date selected	`boolean`	`true`
dateViewCount	Amount of date view display in picker	`number`	`1`
dayClassName	Apply className to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string`	-
dayStyle	Apply style to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties`	-
defaultValue	Default value of DatePicker (use value instead if it is controlled)	`Date`	-
defaultMonth	Default month for uncontrolled DatePicker	`Date`	-
defaultOpen	Whether to default open DatePicker	`boolean`	`false`
defaultView	Default DatePicker view	`'date'` \| `'month'` \| `'year'`	`'date'`
disabled	Determine whether DatePicker Input is disabled	`boolean`	`false`
disabledDate	Specify the date that cannot be selected	`(date: Date) => boolean`	-
disableOutOfMonth	Whether to disable days that out of given month	`boolean`	`false`
enableHeaderLabel	Enable header label to trigger view change	`boolean`	`true`
firstDayOfWeek	First day of week	`'sunday'` \| `'monday'`	`'monday'`
hideOutOfMonthDates	Whether to hide days that out of given month	`boolean`	`false`
hideWeekdays	Whether to hide week days	`boolean`	`false`
inputFormat	DatePicker Input display format	`string`	`'YYYY-MM-DD'`
inputPrefix	Render a prefix content inside DatePicker Input	`string` \| `ReactNode`	-
inputSuffix	Render a suffix content inside DatePicker Input	`string` \| `ReactNode`	-
inputtable	Whether to allow input typing	`boolean`	`false`
labelFormat	Whether to allow input typing	`{month: string, year: string}`	`{month: 'MMM', year: 'YYYY'}`
locale	DatePicker locale	`dayjs locale`	`en`
maxDate	Maximum date to select	`Date`	-
minDate	Minimum date to select	`Date`	-
monthLabelFormat	Month label format	`string`	`'YYYY'`
onBlur	Callback when DatePicker Input blur-sm	`function(event: Event)`	-
onChange	Callback when date cell is selected	`function(date: Date)`	-
onDayMouseEnter	Callback when date is hovered	`function(date: Date)`	-
onFocus	Callback when DatePicker Input focus	`function(event: Event)`	-
onDropdownClose	Callback when DatePicker close	`() => void`	-
onDropdownOpen	Callback when DatePicker open	`() => void`	-
openPickerOnClear	Whether to open DatePicker upon clear value	`boolean`	`false`
range	Highlight given date range	`[Date \| null, Date \| null]`	-
renderDay	Render custome day element based on the given params	`(date: Date) => ReactNode`	`false`
size	DatePicker input size	`'sm'` \| `'md'` \| `'lg'`	`'md'`
value	Value of DatePicker (Controlled)	`Date`	-
weekdayLabelFormat	Format for weekday display	`string`	`'dd'`
weekendDays	Indicate the days of weekend	`number[]`	`[0, 6]`
yearLabelFormat	Year label format	`string`	`'YYYY'`

DatePicker.DatePickerRange

Prop	Description	Type	Default
clearable	Whether allow to clear value	`boolean`	`true`
clearButton	Custom clear button	`string` \| `ReactNode`	`ReactNode`
closePickerOnChange	Whether close picker upon date selected	`boolean`	`true`
dateViewCount	Amount of date view display in picker	`number`	`1`
dayClassName	Apply className to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string`	-
dayStyle	Apply style to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties`	-
defaultValue	Default value of DatePickerRange (use value instead if it is controlled)	`Date`	-
defaultMonth	Default month for uncontrolled DatePickerRange	`Date`	-
defaultOpen	Whether to default open DatePickerRange	`boolean`	`false`
defaultView	Default DatePickerRange view	`'date'` \| `'month'` \| `'year'`	`'date'`
disabled	Determine whether DatePickerRange Input is disabled	`boolean`	`false`
disabledDate	Specify the date that cannot be selected	`(date: Date) => boolean`	-
disableOutOfMonth	Whether to disable days that out of given month	`boolean`	`false`
enableHeaderLabel	Whether to disable header label to trigger view change	`boolean`	`true`
firstDayOfWeek	First day of week	`'sunday'` \| `'monday'`	`'monday'`
hideOutOfMonthDates	Whether to hide days that out of given month	`boolean`	`false`
hideWeekdays	Whether to hide week days	`boolean`	`false`
inputFormat	DatePickerRange Input display format	`string`	`'YYYY-MM-DD'`
inputPrefix	Render a prefix content inside DatePickerRange Input	`string` \| `ReactNode`	-
inputSuffix	Render a suffix content inside DatePickerRange Input	`string` \| `ReactNode`	-
inputtable	Whether to allow input typing	`boolean`	`false`
inputtableBlurClose	Whether to close DatePicker upon input (only work when inputtable is true)	`boolean`	`true`
labelFormat	Seperator between date display on input	`string`	`'~'`
locale	DatePickerRange locale	`dayjs locale`	`en`
lockView	Whether to lock the year or month selection on change	`boolean`	`false`
maxDate	Maximum date to select	`Date`	-
minDate	Minimum date to select	`Date`	-
monthLabelFormat	Month label format	`string`	`'YYYY'`
onChange	Callback when date cell is selected	`function(date: Date)`	-
onDayMouseEnter	Callback when date is hovered	`function(date: Date)`	-
onDropdownClose	Callback when DatePickerRange close	`() => void`	-
onDropdownOpen	Callback when DatePickerRange open	`() => void`	-
openPickerOnClear	Whether to open DatePickerRange upon clear value	`boolean`	`false`
range	Highlight given date range	`[Date \| null, Date \| null]`	-
renderDay	Render custome day element based on the given params	`(date: Date) => ReactNode`	`false`
separator	Seperator between dates	`string`	`'~'`
size	DatePickerRange input size	`'sm'` \| `'md'` \| `'lg'`	`'md'`
singleDate	Only one date can be selected	`boolean`	`false`
value	Value of DatePickerRange (Controlled)	`[Date \| null, Date \| null]`	-
weekdayLabelFormat	Format for weekday display	`string`	`'dd'`
weekendDays	Indicate the days of weekend	`number[]`	`[0, 6]`
yearLabelFormat	Year label format	`string`	`'YYYY'`

DatePicker.DateTimepicker

Prop	Description	Type	Default
amPm	Whether to set time input to 12 hours format	`boolean`	`true`
clearable	Whether allow to clear value	`boolean`	`true`
clearButton	Custom clear button	`string` \| `ReactNode`	`ReactNode`
closePickerOnChange	Whether close picker upon date selected	`boolean`	`false`
dateViewCount	Amount of date view display in picker	`number`	`1`
dayClassName	Apply className to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string`	-
dayStyle	Apply style to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties`	-
defaultValue	Default value of DateTimepicker (use value instead if it is controlled)	`Date`	-
defaultMonth	Default month for uncontrolled DateTimepicker	`Date`	-
defaultOpen	Whether to default open DateTimepicker	`boolean`	`false`
defaultView	Default DateTimepicker view	`'date'` \| `'month'` \| `'year'`	`'date'`
disabled	Determine whether DateTimepicker Input is disabled	`boolean`	`false`
disabledDate	Specify the date that cannot be selected	`(date: Date) => boolean`	-
disableOutOfMonth	Whether to disable days that out of given month	`boolean`	`false`
enableHeaderLabel	Whether to disable header label to trigger view change	`boolean`	`true`
firstDayOfWeek	First day of week	`'sunday'` \| `'monday'`	`'monday'`
hideOutOfMonthDates	Whether to hide days that out of given month	`boolean`	`false`
hideWeekdays	Whether to hide week days	`boolean`	`false`
inputFormat	DateTimepicker Input display format	`string`	`'YYYY-MM-DD'`
inputPrefix	Render a prefix content inside DateTimepicker Input	`string` \| `ReactNode`	-
inputSuffix	Render a suffix content inside DateTimepicker Input	`string` \| `ReactNode`	-
labelFormat	Whether to allow input typing	`{month: string, year: string}`	`{month: 'MMM', year: 'YYYY'}`
locale	DateTimepicker locale	`dayjs locale`	`en`
lockView	Whether to lock the year or month selection on change	`boolean`	`false`
lockView	Whether to lock the year or month selection on change	`boolean`	`false`
maxDate	Maximum date to select	`Date`	-
minDate	Minimum date to select	`Date`	-
monthLabelFormat	Month label format	`string`	`'YYYY'`
okButtonContent	Ok button content	`string` \| `ReactNode`	`'ok'`
onBlur	Callback when DateTimepicker Input blur-sm	`function(event: Event)`	-
onChange	Callback when date cell is selected	`function(date: Date)`	-
onDayMouseEnter	Callback when date is hovered	`function(date: Date)`	-
onFocus	Callback when DateTimepicker Input focus	`function(event: Event)`	-
onDropdownClose	Callback when DateTimepicker close	`() => void`	-
onDropdownOpen	Callback when DateTimepicker open	`() => void`	-
openPickerOnClear	Whether to open DateTimepicker upon clear value	`boolean`	`false`
range	Highlight given date range	`[Date \| null, Date \| null]`	-
renderDay	Render custome day element based on the given params	`(date: Date) => ReactNode`	`false`
size	DateTimepicker input size	`'sm'` \| `'md'` \| `'lg'`	`'md'`
value	Value of DateTimepicker (Controlled)	`Date`	-
weekdayLabelFormat	Format for weekday display	`string`	`'dd'`
weekendDays	Indicate the days of weekend	`number[]`	`[0, 6]`
yearLabelFormat	Year label format	`string`	`'YYYY'`

Prop

Description

Type

Default

clearable

Whether allow to clear value

boolean

true

clearButton

Custom clear button

string | ReactNode

ReactNode

closePickerOnChange

Whether close picker upon date selected

boolean

true

dateViewCount

Amount of date view display in picker

number

1

dayClassName

Apply className to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string

dayStyle

Apply style to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties

defaultValue

Default value of DatePicker (use value instead if it is controlled)

Date

defaultMonth

Default month for uncontrolled DatePicker

Date

defaultOpen

Whether to default open DatePicker

boolean

false

defaultView

Default DatePicker view

'date' | 'month' | 'year'

'date'

disabled

Determine whether DatePicker Input is disabled

boolean

false

disabledDate

Specify the date that cannot be selected

(date: Date) => boolean

disableOutOfMonth

Whether to disable days that out of given month

boolean

false

enableHeaderLabel

Enable header label to trigger view change

boolean

true

firstDayOfWeek

First day of week

'sunday' | 'monday'

'monday'

hideOutOfMonthDates

Whether to hide days that out of given month

boolean

false

hideWeekdays

Whether to hide week days

boolean

false

inputFormat

DatePicker Input display format

string

'YYYY-MM-DD'

inputPrefix

Render a prefix content inside DatePicker Input

string | ReactNode

inputSuffix

Render a suffix content inside DatePicker Input

string | ReactNode

inputtable

Whether to allow input typing

boolean

false

labelFormat

Whether to allow input typing

{month: string, year: string}

{month: 'MMM', year: 'YYYY'}

locale

DatePicker locale

dayjs locale

en

maxDate

Maximum date to select

Date

minDate

Minimum date to select

Date

monthLabelFormat

Month label format

string

'YYYY'

onBlur

Callback when DatePicker Input blur-sm

function(event: Event)

onChange

Callback when date cell is selected

function(date: Date)

onDayMouseEnter

Callback when date is hovered

function(date: Date)

onFocus

Callback when DatePicker Input focus

function(event: Event)

onDropdownClose

Callback when DatePicker close

() => void

onDropdownOpen

Callback when DatePicker open

() => void

openPickerOnClear

Whether to open DatePicker upon clear value

boolean

false

range

Highlight given date range

[Date | null, Date | null]

renderDay

Render custome day element based on the given params

(date: Date) => ReactNode

false

size

DatePicker input size

'sm' | 'md' | 'lg'

'md'

value

Value of DatePicker (Controlled)

Date

weekdayLabelFormat

Format for weekday display

string

'dd'

weekendDays

Indicate the days of weekend

number[]

[0, 6]

yearLabelFormat

Year label format

string

'YYYY'

Prop

Description

Type

Default

clearable

Whether allow to clear value

boolean

true

clearButton

Custom clear button

string | ReactNode

ReactNode

closePickerOnChange

Whether close picker upon date selected

boolean

true

dateViewCount

Amount of date view display in picker

number

1

dayClassName

Apply className to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string

dayStyle

Apply style to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties

defaultValue

Default value of DatePickerRange (use value instead if it is controlled)

Date

defaultMonth

Default month for uncontrolled DatePickerRange

Date

defaultOpen

Whether to default open DatePickerRange

boolean

false

defaultView

Default DatePickerRange view

'date' | 'month' | 'year'

'date'

disabled

Determine whether DatePickerRange Input is disabled

boolean

false

disabledDate

Specify the date that cannot be selected

(date: Date) => boolean

disableOutOfMonth

Whether to disable days that out of given month

boolean

false

enableHeaderLabel

Whether to disable header label to trigger view change

boolean

true

firstDayOfWeek

First day of week

'sunday' | 'monday'

'monday'

hideOutOfMonthDates

Whether to hide days that out of given month

boolean

false

hideWeekdays

Whether to hide week days

boolean

false

inputFormat

DatePickerRange Input display format

string

'YYYY-MM-DD'

inputPrefix

Render a prefix content inside DatePickerRange Input

string | ReactNode

inputSuffix

Render a suffix content inside DatePickerRange Input

string | ReactNode

inputtable

Whether to allow input typing

boolean

false

inputtableBlurClose

Whether to close DatePicker upon input (only work when inputtable is true)

boolean

true

labelFormat

Seperator between date display on input

string

'~'

locale

DatePickerRange locale

dayjs locale

en

lockView

Whether to lock the year or month selection on change

boolean

false

maxDate

Maximum date to select

Date

minDate

Minimum date to select

Date

monthLabelFormat

Month label format

string

'YYYY'

onChange

Callback when date cell is selected

function(date: Date)

onDayMouseEnter

Callback when date is hovered

function(date: Date)

onDropdownClose

Callback when DatePickerRange close

() => void

onDropdownOpen

Callback when DatePickerRange open

() => void

openPickerOnClear

Whether to open DatePickerRange upon clear value

boolean

false

range

Highlight given date range

[Date | null, Date | null]

renderDay

Render custome day element based on the given params

(date: Date) => ReactNode

false

separator

Seperator between dates

string

'~'

size

DatePickerRange input size

'sm' | 'md' | 'lg'

'md'

singleDate

Only one date can be selected

boolean

false

value

Value of DatePickerRange (Controlled)

[Date | null, Date | null]

weekdayLabelFormat

Format for weekday display

string

'dd'

weekendDays

Indicate the days of weekend

number[]

[0, 6]

yearLabelFormat

Year label format

string

'YYYY'

Prop

Description

Type

Default

amPm

Whether to set time input to 12 hours format

boolean

true

clearable

Whether allow to clear value

boolean

true

clearButton

Custom clear button

string | ReactNode

ReactNode

closePickerOnChange

Whether close picker upon date selected

boolean

false

dateViewCount

Amount of date view display in picker

number

1

dayClassName

Apply className to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string

dayStyle

Apply style to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties

defaultValue

Default value of DateTimepicker (use value instead if it is controlled)

Date

defaultMonth

Default month for uncontrolled DateTimepicker

Date

defaultOpen

Whether to default open DateTimepicker

boolean

false

defaultView

Default DateTimepicker view

'date' | 'month' | 'year'

'date'

disabled

Determine whether DateTimepicker Input is disabled

boolean

false

disabledDate

Specify the date that cannot be selected

(date: Date) => boolean

disableOutOfMonth

Whether to disable days that out of given month

boolean

false

enableHeaderLabel

Whether to disable header label to trigger view change

boolean

true

firstDayOfWeek

First day of week

'sunday' | 'monday'

'monday'

hideOutOfMonthDates

Whether to hide days that out of given month

boolean

false

hideWeekdays

Whether to hide week days

boolean

false

inputFormat

DateTimepicker Input display format

string

'YYYY-MM-DD'

inputPrefix

Render a prefix content inside DateTimepicker Input

string | ReactNode

inputSuffix

Render a suffix content inside DateTimepicker Input

string | ReactNode

labelFormat

Whether to allow input typing

{month: string, year: string}

{month: 'MMM', year: 'YYYY'}

locale

DateTimepicker locale

dayjs locale

en

lockView

Whether to lock the year or month selection on change

boolean

false

lockView

Whether to lock the year or month selection on change

boolean

false

maxDate

Maximum date to select

Date

minDate

Minimum date to select

Date

monthLabelFormat

Month label format

string

'YYYY'

okButtonContent

Ok button content

string | ReactNode

'ok'

onBlur

Callback when DateTimepicker Input blur-sm

function(event: Event)

onChange

Callback when date cell is selected

function(date: Date)

onDayMouseEnter

Callback when date is hovered

function(date: Date)

onFocus

Callback when DateTimepicker Input focus

function(event: Event)

onDropdownClose

Callback when DateTimepicker close

() => void

onDropdownOpen

Callback when DateTimepicker open

() => void

openPickerOnClear

Whether to open DateTimepicker upon clear value

boolean

false

range

Highlight given date range

[Date | null, Date | null]

renderDay

Render custome day element based on the given params

(date: Date) => ReactNode

false

size

DateTimepicker input size

'sm' | 'md' | 'lg'

'md'

value

Value of DateTimepicker (Controlled)

Date

weekdayLabelFormat

Format for weekday display

string

'dd'

weekendDays

Indicate the days of weekend

number[]

[0, 6]

yearLabelFormat

Year label format

string

'YYYY'