react-pikaday
A component wrapper around Pikaday.
Importing
Normal
To import Pikaday without any CSS:
import Pikaday from 'react-pikaday';You'll then need to make sure you include the CSS from pikaday/css/pikaday.css.
Bundled
If you're using webpack with a configured style-loader for CSS, you can actually require this component along with the Pikaday CSS in one go:
import Pikaday from 'react-pikaday/bundled';See the example app in this repo and the webpack.config.js for an example of how this can be configured.
Usage
import React from 'react';
import Pikaday from 'react-pikaday';
var MyComponent = React.createClass({
getInitialState: function() {
return {
date: null
};
},
handleChange: function(date) {
this.setState({
date: date
});
},
render: function() {
var date = this.state.date;
return (
<div>
<p>
The date is {date.toDateString()}
</p>
<Pikaday value={date} onChange={this.handleChange} />
</div>
);
}
});Properties
value |
A Date object to set the currently-displayed date to. |
onChange |
A callback called when the date is updated by the user. Passes a Date object as the first argument. |
valueLink |
Instead of manually hooking up value/onChange to a state variable, you can instead use LinkedStateMixin to bind the two. |