node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Date Pikinator

A React input component for picking dates. Leverages the Pikaday control to create the calendar pop-up.


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) {
      theDate: evt.value.toJSON()
  render: function() {
    return div({}, [
        onChange: this.handleDateChange,
        ref: 'theWidget',
        defaultValue: this.state.theDate
      div({}, [this.state.theDate])


  • 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.