react-pikaday

react-pikaday

A component wrapper around Pikaday.

View Example

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.

Changelog

v0.4.0 (Mar 1, 2016)

• [Breaking] react-pikaday now uses ES6 modules through Babel. If you use ES6 modules, you shouldn't have to change anything. If you use CommonJS, you'll now need to import react-pikaday like so:

// before
var Pikaday = require('react-pikaday');

//after
var Pikaday = require('react-pikaday').default;

• react-pikaday now uses a peer dependency for React, preventing duplicate copies of React from being installed (#13)
• react-pikaday no longer uses the long-deprecated getDOMNode() API (#14)