DatePicker

A versatile DatePicker component with a popover calendar view for selecting dates.
It supports custom formats, default values, and restrictions like minimum, maximum, or disabled dates.

Usage

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

Clearable

Use the clearable prop to allow resetting the selected date.

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

Display Format

Use the displayDateFormat prop to format the displayed date, following the format options from the dayjs library.

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

Default Value

Provide a default value using either a Date object or a formatted string (matching the outputDateFormat).

Note: Always use outputDateFormat when passing string dates 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>
  )
}

Min Date

Restrict date selection to only those after a specific minimum date.

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

Max Date

Restrict date selection to only those before a specific maximum date.

function DatePickerMaxDate() {
  const today = new Date()
  const nextMonth = new Date()
  nextMonth.setMonth(today.getMonth() + 1)

  return (
    <View>
      <DatePicker label="Passing as Date Object" maxDate={new Date()} />
      <DatePicker label="Upto Next month" maxDate={nextMonth} />
      <DatePicker
        label="Passing as formatted string"
        maxDate="20-02-2028"
        outputDateFormat="DD-MM-YYYY"
      />
    </View>
  )
}

Min & Max Date

Combine both minDate and maxDate to define a valid date range.

function DatePickerMinMaxDate() {
  const today = new Date()
  const prevMonth = new Date()
  prevMonth.setMonth(today.getMonth() - 1)

  const nextMonth = new Date()
  nextMonth.setMonth(today.getMonth() + 1)

  return (
    <View>
      <DatePicker
        label="Min Max Date"
        minDate={prevMonth}
        maxDate={nextMonth}
      />
    </View>
  )
}

Disable Dates

Disable specific dates by passing an array of Date objects or formatted strings matching outputDateFormat.

For example, if outputDateFormat is "DD-MM-YYYY",
then "10-02-2025" should be passed in that exact 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
        label="Disabling Specific Dates"
        placeholder="Disabling Specific Dates"
        disableDates={[yesterday, new Date(), tomorrow, '10-02-2025']}
        outputDateFormat="DD-MM-YYYY"
      />

      <DatePicker
        label="Disabling Future Dates"
        placeholder="Disabling Future Dates"
        disableFutureDates
      />
      <DatePicker
        label="Disabling Past Dates"
        placeholder="Disabling Past Dates"
        disablePastDates
      />
    </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.
minDate	string | Date	--	minimum selectable date inclusive.Can be a string (in `outputDateFormat`) or a Date object.
maxDate	string | Date	--	maximum selectable date inclusive.Can be a string (in `outputDateFormat`) or a Date object.