react-date-select
React component used to navigate dates.
Installation
An UMD build is published to the global component 'modules/umd/date-select.min.js' and can be included with a script tag. The components are available in the global ReactDateSelect variable.
<script src="/file/component/modules/umd/date-select.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { DateSelect, StatefulDateSelect } = ReactDateSelect;
</script>If using dynamic imports, there is an ESM build available.
const { importModule } = ob.utils;
const module = '/file/component/modules/esm/date-select.min.js';
const { DateSelect, StatefulDateSelect } = await importModule(module);Usage
Use the DateSelect component if you wish to control the date state yourself.
class MyComponent extends Rect.Component {
state = {
date: new Date()
};
handleDateChanged(date) {
this.setState({ date });
}
render() {
return <DateSelect onChange={(date) => this.handleDateChanged(date)} date={this.state.date}/>
}
}If you don't need to control the date yourself, the StatefulDateSelect is a small wrapper around the DateSelect component that will keep the date in its state. You can pass an initial date value to it.
function handleDateChanged(date) {
dsSomeDataSource.setParameter('filterString', `[Date] = '${date.toISOString()}'`);
dsSomeDataSource.refreshDataSource();
}
ReactDOM.render(
<StatefulDateSelect onChange={handleDateChanged} initialDate={yesterday}/>,
document.querySelector('#dateSelect');
)