date-pikinator
v0.3.0
Published
Date picker React component
Downloads
9
Readme
Date Pikinator
A React input component for picking dates. Leverages the Pikaday control to create the calendar pop-up.
Example
Also see demo.js
var React = require('react'),
DatePicker = require('./index'),
div = React.DOM.div
;
var App = React.createClass({
getInitialState: function() {
var value = new Date();
return {
theDate: value.toJSON()
}
},
handleDateChange: function(evt) {
this.setState({
theDate: evt.value.toJSON()
})
},
render: function() {
return div({}, [
DatePicker({
onChange: this.handleDateChange,
ref: 'theWidget',
defaultValue: this.state.theDate
}),
div({}, [this.state.theDate])
]);
}
});
React.renderComponent(
App({}),
document.body
);
Features
- Pops up a nice calendar picker, with its own modular styles.
- Appends 'invalid' to the input class if value isn't a recognized date.
- Provides access to underlying input control through refs.
- onChange event fires whenever when a date value is selected (either by typing and blurring, or picking a date on the calendar).
- Set an initial value through the defaultValue prop.