Skip to main content

onChange

Description​

Fires when a new option is selected in a date range picker

Usage​

onChange?: (ev: {
  value: { start: Date; end: Date | null } | null;
}) => void;

Parameters​

The callback of the onChange event takes an object with the following parameter:

  • value - (object) an object with the newly selected value (start and end dates of the selected range)

Example​

function handleSelect({
  value,
}: {
  value: { start: Date; end: Date | null } | null;
}) {
  console.log(value);
  // => an object with the start and end dates of the selected range, or null
}

export default function App() {
  return <DateRangePicker onChange={handleSelect} />;
}

Details​

The handler function receives an object with the newly selected value of the date range picker (start and end dates of the selected range).

Related article: Catching the change of the selected date

Related sample: DateRangePicker