DatePicker

A DatePicker with popover showing the month days with customization.

Usage

function DatePickerUsage() {
  return (
    <View>
      <DatePicker />
    </View>
  )
}

Clearable

function DatePickerClearable() {
  return (
    <View>
      <DatePicker clearable />
    </View>
  )
}

Display Format

Use the displayDateFormat prop to format the display date in the DatePicker, you can use the format as provided in the dayjs library

function DatePickerDisplayFormat() {
  return (
    <View>
      <DatePicker clearable displayDateFormat="MMMM DD YYYY" />
    </View>
  )
}

Default Value

Pass any default value in terms of either Date object or string formatted in the same format as passed in the outputDateFormat

Note: The outputDateFormat should be always used whenever you are passing any date as a string to the component.

function DatePickerDefaultValue() {
  return (
    <View>
      <DatePicker label="Passing as Date Object" defaultDate={new Date()} />
      <DatePicker
        label="Passing as formatted string"
        defaultDate="20-02-2025"
        outputDateFormat="DD-MM-YYYY"
      />
    </View>
  )
}

Disable Dates

Disable the array of dates passed as either Date object or string (again in the outputDateFormat format)

function DatePickerDisableDates() {
  const yesterday = new Date()
  yesterday.setFullYear(
    yesterday.getFullYear(),
    yesterday.getMonth(),
    yesterday.getDate() - 1,
  )

  const tomorrow = new Date()
  tomorrow.setFullYear(
    tomorrow.getFullYear(),
    tomorrow.getMonth(),
    tomorrow.getDate() + 1,
  )

  return (
    <View>
      <DatePicker
        clearable
        disableDates={[yesterday, new Date(), tomorrow, '10-02-2025']}
        outputDateFormat="DD-MM-YYYY"
      />
    </View>
  )
}

Here, if you look closer the date string (10-02-2025) passed here is formatted in the same as of the outputDateFormat format i.e. DD-MM-YYYY

Props

Prop	Data Type	Default Value	Description
Extends	BaseDatePickerProps	--	Inherits properties from BaseDatePickerProps
defaultDate	string | Date	--	The default selected date.Can be a string (formatted date) or a Date object.
clearable	boolean	--	Whether the date picker allows clearing the selected date.