@olenbetong/date-navigator v1.1.1

@olenbetong/date-navigator

React component used to navigate dates.

Installation

NPM:

npm i @olenbetong/date-navigator

import { DateNavigator, StatefulDateNavigator } from '@olenbetong/date-navigator';

UMD and ESM builds are available on unpkg.com. For UMD, the components are available in the global ReactDateNavigator variable.

<script src="https://unpkg.com/@olenbetong/date-navigator@latest/dist/umd/date-navigate.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { DateNavigator, StatefulDateNavigator } = ReactDateNavigator;
</script>

<script type="module">
import { DateNavigator, StatefulDateNavigator } from "https://unpkg.com/@olenbetong/date-navigator@latest/dist/esm/date-navigate.min.js";
</script>

Usage

Use the DateNavigator component if you wish to control the date state yourself.

class MyComponent extends React.Component {
	state = {
		date: new Date()
	};

	handleDateChanged(date) {
		this.setState({ date });
	}

	render() {
		return <DateNavigator onChange={(date) => this.handleDateChanged(date)} date={this.state.date}/>
	}
}

If you don't need to control the date yourself, the StatefulDateNavigator is a small wrapper around the DateNavigator 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(
	<StatefulDateNavigator onChange={handleDateChanged} initialDate={yesterday}/>,
	document.querySelector('#DateNavigator');
)