Date Picker

A date picker enables users to select a single date or range of dates in order to filter data for a particular time period.

Single date picker

Live Editor

function SingleDatePickerExample() {
  const [stateDate, setDate] = React.useState(moment());

  const handleDateChange = (date) => {
    setDate(date);
  };

  const setStatusText = visibleMonths => "Now showing: " + visibleMonths.map(moment => moment.format("MMMM YYYY")).join(' and ');

  return (
    <Box display="flex" justifyContent="center">
      <SingleDatePicker
        date={stateDate}
        onDateChange={handleDateChange}
        setStatusText={setStatusText}
      />
    </Box>
  );
}

Properties

Single Date Picker Manual Table

Name	Type	Default	Description	Required?
date	?moment$Moment			✓
onDateChange	(date: moment$Moment) => void			✓
focused	boolean
onFocusChange	({ focused: boolean }) => void
setStatusText	(visibleMonths: moment$Moment[]) => string

Date range picker

Live Editor

function DateRangePickerExample() {
  const START_DATE = "startDate";
  const [dates, setDate] = React.useState({
    startDate: moment(),
    endDate: moment().clone().add(3, "days")
  });
  const [focusedInput, setFocusedInput] = React.useState(START_DATE);

  const handleDatesChange = (nextDates) => {
    setDate(nextDates);
  };

  const handleFocusChange = (nextFocusedInput) => {
    setFocusedInput(
      nextFocusedInput === null ? START_DATE : nextFocusedInput
    );
  };

  const setStatusText = visibleMonths => "Now showing: " + visibleMonths.map(moment => moment.format("MMMM YYYY")).join(' and ');

  return (
    <Box display="flex" justifyContent="center">
      <DateRangePicker
        startDate={dates.startDate}
        endDate={dates.endDate}
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={handleFocusChange}
        setStatusText={setStatusText}
      />
    </Box>
  );
}

Properties

Name	Type	Default	Description	Required?
startDate	?moment$Moment			✓
endDate	?moment$Moment			✓
onDatesChange	({startDate: moment$Moment, endDate: moment$Moment}) => void			✓
focusedInput	EnumFocusedInput			✓
onFocusChange	(EnumFocusedInput) => void			✓
setStatusText	(visibleMonths: moment$Moment[]) => string