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

NameTypeDefaultDescriptionRequired?
date?moment$Moment
onDateChange(date: moment$Moment) => void
focusedboolean
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

NameTypeDefaultDescriptionRequired?
startDate?moment$Moment
endDate?moment$Moment
onDatesChange({startDate: moment$Moment, endDate: moment$Moment}) => void
focusedInputEnumFocusedInput
onFocusChange(EnumFocusedInput) => void
setStatusText(visibleMonths: moment$Moment[]) => string