DatePicker

DatePickers combine a DateInput and a Calendar popover to allow users to enter or select a date and time value.

Basic Usage

when locale is zhCN, the format is YYYY-MM-DD, when locale is enUS, the format is MM/DD/YYYY:

single mode:


import Spross from 'spross';

// undefined
const [value, setValue] = useState<Date | undefined>(new Date());

<Spross.DatePicker locale="enUS" value={value} onChange={setValue} />

Disabled days

you can combine disabledDays prop with minDate and maxDate prop to disable days:


import Spross from 'spross';

// 6/13/2025
const [value, setValue] = useState<Date | undefined>(new Date());
const today = new Date();
const minDate = new Date(today.getFullYear(), 0, 1);
const maxDate = new Date(today.getFullYear(), 11, 31);

<Spross.DatePicker
  value={value}
  onChange={setValue}
  minDate={minDate}
  maxDate={maxDate}
  disabledDays={(date) => date.getDay() === 0 || date.getDay() === 2}
/>