date-navigator
v1.0.5
Published
A React component used for selecting a date in any time span
Downloads
2
Readme
React_DateNavigator
A date selector component that highlights the selected week built with React.
Example available here: https://reactdatenavigator.murrayleroux.now.sh
NPM Package: https://www.npmjs.com/package/date-navigator
Dependencies
- Node v8+ and NPM
Starting it up
npm install
to install any other necessary dependenciesnpm start
will start up storybook locally to demo the componentnpm test
runs the unit tests
Any push to github will trigger a Travis build, which will update the npm package and deploy the latest version to now here: https://reactdatenavigator.murrayleroux.now.sh
Usage
Install using npm i date-navigator
API
date
- Optional. The currently selected date. Defaults to today.onChange
- Required. Called with the new date when one is selectedminimumDate
- Optional. Earliest selectable date. Defaults to beginning of the previous year.maximumDate
- Optional. Latest selectable date. Defaults to end of 3 years from current date.
Example
import DateNavigator from 'date-navigator'
class DateNavigatorStoryWrapper extends React.Component {
constructor () {
super();
this.handleChange = this.handleChange.bind(this);
this.state = {
date: new Date()
};
}
handleChange (date) {
this.setState({
date: new Date(date)
});
}
render () {
return (
<DateNavigator
date={this.state.date}
onChange={this.handleChange}
/>
);
}
}
Conventions
- Tests are located in the same folder as the component tested and has
.spec.js
extensions - Stories are located in the same folder as the component described and has
.story.js
extensions
Authored by
Murray le Roux