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"><SingleDatePickerdate={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"><DateRangePickerstartDate={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 |