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 Playground

Clearable

Date Display Delimiter

Date Picker Mode

single

multiple

range

Show Adjacent Month Days

Disable Future Dates

Disable Past Dates

Display Date Format

Output Date Format

Code Snippet

import { DatePicker } from "@react-native-blossom-ui/dates";

    function Usage() {
        return (
            <DatePicker/>
        );
    }

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.
dateDisplayDelimiter	string	to	Separator string to display for the multiple and range modes.default value is - ' to ' for "range" mode and ' ... ' for "multiple" mode
datePickerMode	DatePickerMode	single	Selection mode for the date picker.single - single date selection multiple - multiple date selection range - range date selection
showAdjacentMonthDays	boolean	true	Whether to show days from adjacent months to fill the weeks.If true, days from the previous and next months will be displayed to fill the calendar grid.
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.
disabledDaysOfWeek	number[]	--	disable the given days of the week,from 0 (Sunday) to 6 (Saturday).