Date Picker

Components

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

import { SingleDatePicker } from '@sproutsocial/racine'

({ date = moment(), onDateChange, ...rest }) => {
    const [stateDate, setDate] = useState(date)

    const handleDateChange = (date) => {
      onDateChange && onDateChange(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}
          {...rest}
        />
      </Box>
    )
  }

Properties

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

import { DateRangePicker } from '@sproutsocial/racine'

({
    startDate = moment(),
    endDate = moment().clone().add(3, "days"),
    onDatesChange,
    onFocusChange,
    ...rest
  }) => {

    const START_DATE = "startDate"
    const [dates, setDate] = useState({ startDate, endDate });
    const [focusedInput, setFocusedInput] = useState(START_DATE);

    const handleDatesChange = (nextDates) => {
      onDatesChange && onDatesChange(nextDates);

      setDate(nextDates);
    };

    const handleFocusChange = (nextFocusedInput) => {
      onFocusChange && onFocusChange(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}
          {...rest}
        />
      </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`