Range date picker
RangeDatePicker uses renderer pattern. It's uncontrolled and manages state by itself. Developer can decide what children it should use.
```js
const handleChange = value => {
console.log(value);
}
const options = [
{id: 'today', label: 'Today', value: {from: new Date(), to: new Date()}},
{id: 'yesterday', label: 'Yesterday', value: {from: DateFns.subDays(new Date(), 1), to: DateFns.subDays(new Date(), 1)}},
{id: 'last_7_days', label: 'Last 7 days', value: {from: DateFns.subDays(new Date(), 7), to: new Date()}},
{id: 'custom_date', isManual: true, label: 'Custom date', value: null}
];
const selectItems = options.map(option => ({
key: option.id,
props: {
label: option.label,
value: option.id,
isManual: option.isManual || false
}
}));
const SelectItem = props => (
{props.children}
)
const getSelectedItemBody = (props, inputs) => {
if (props.isManual) {
return (
);
}
return {props.label}
};
const getItemBody = props => {props.label};
{({ select, datepicker, selectedOption, inputs }) => (
getSelectedItemBody(selectedItemProps, inputs)}
placeholder="Select option"
searchPlaceholder="Search..."
/>
{selectedOption && selectedOption.isManual ? (
) : null}
)}
```