DateRangePicker

DateRangePickers combine a DateInput and a Calendar popover to allow users to enter or select a date range.

Basic Usage

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

single mode:


import Spross from 'spross';

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

<Spross.DateRangePicker 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';

// undefined - undefined
const [value, setValue] = useState<[Date, Date] | undefined>([today, tomorrow]);
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}
/>

Max range

use onStartDaySelect and onEndDaySelect to limit the range number to 7 days:


import Spross from 'spross';

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

const [startDay, setStartDay] = useState<Date | undefined>(undefined);
let oneWeekBefore: Date | undefined = undefined;
let oneWeekLater: Date | undefined = undefined;
if (startDay) {
  oneWeekBefore = new Date(startDay.getTime() - 7 * 24 * 60 * 60 * 1000);
  oneWeekLater = new Date(startDay.getTime() + 7 * 24 * 60 * 60 * 1000);
}

<Spross.DateRangePicker
  value={value}
  onChange={setValue}
  disabledDays={(day) =>
  !!startDay && ((!!oneWeekBefore && day < oneWeekBefore) || (!!oneWeekLater && day > oneWeekLater))
}
  onStartDaySelect={(day) => setStartDay(day)}
  onEndDaySelect={() => setStartDay(undefined)}
/>