Date Picker

import {
  DatePicker,
  DatePickerLabel,
  DatePickerInput,
  DatePickerCalendar
} from '@cerberus/react'

Usage

The DatePicker component is a controlled component that allows users to select a single date or a range of dates. It consists of a label, input field, and a calendar view.

Single Date Picker

Date Range Picker

To create a date range picker, set the selectionMode prop to range on the DatePicker component and use the RangePickerInput component as the input field.

Using Default Values

You can set the default values for the range date picker by passing the defaultValue prop to the DatePicker component in the form of an Array of two date strings.

Custom Styles

You can customize the DatePicker width and other styles using the css prop along with the data-part selector to target specific primitives.

Date Helpers

The DatePicker component relies on different date utilities to handle date parsing and formatting. Here are the options available:

Creating Dates

You can create a structured date Object using the CalendarDate class. This function accepts a date string or an object with year, month, and day properties.

import { CalendarDate } from '@cerberus/react'
const date = new CalendarDate(2022, 2, 3);

Parsing Dates

You can use the parseDate function to convert an array of date strings into a date object that the DatePicker can understand.

import { parseDate } from '@cerberus/react'
const date = parseDate(['2025-01-01', '2025-01-15'])

Today's Date

You can use the today function to get the current date in a format that the DatePicker can understand.

import { today, getLocalTimeZone } from '@cerberus/react'

const nyDate = today('America/New_York');
const localDate = today(getLocalTimeZone());

Formatting Dates

You can use the DateFormatter class to format a date object into a string. This is useful for displaying dates in a human-readable format.

import { DateFormatter } from '@cerberus/react'

const formatter = new DateFormatter('en-US', {
  dateStyle: 'long',
  timeZone: 'America/New_York'
})
const date = formatter.format(new Date()); // "January 1, 2025"

Primitives

You can utilize the primitive components or the css prop to customize the date picker.

Data Attributes

The Primitives additionally use the following data attributes for custom styling:

API

Props

DatePicker

The DatePicker component accepts all the props of the DatePickerRoot primitive

DatePickerLabel

The DatePickerLabel component accepts all the props of the DatePickerLabel primitive

DatePickerInput

The DatePickerInput component accepts all the props of the DatePickerInputEl primitive

DatePickerCalendar

The DatePickerCalendar component is an abstraction of the primitives and accepts the following props:

Parts

The DatePickerParts API is an Object containing the full family of components.