react-date

react-date

An input that parses and formats dates using dehumanize-date and occasion.

Installation

npm install react-date

Usage

See example/app.js

'use strict';

var React = require('react');
var parse = require('dehumanize-date');
var format = require('occasion');
var DateInput = React.createFactory(require('react-date'));

var div = React.createFactory('div');
var h1 = React.createFactory('h1');
var p = React.createFactory('p');
var pre = React.createFactory('pre');
var code = React.createFactory('code');

module.exports = React.createClass({
  getInitialState: function () {
    return {
      date: '2014-01-23'
    };
  },
  render: function () {
    return div({},
      h1({}, 'Using "defaultValue"'),
      p({}, 'This creates an editable input, as you would expect. ' +
                      'Note that it will not respond to changes in the model though.'),
      DateInput({
        className: ['form-control'],
        format: 'DD/MM/YYYY',
        defaultValue: this.state.date
      }),
      h1({}, 'Using "value" and no "onChange"'),
      p({}, 'This creates a read only input that responds to changes.'),
      DateInput({
        className: ['form-control'],
        format: 'DD-MM-YYYY',
        value: this.state.date,
        readOnly: true
      }),
      h1({}, 'Using "value" with "onChange"'),
      p({}, 'This creates a typical, input, you can edit it and when the input "blurs" it will revert to the auto-formatted date.'),
      DateInput({
        className: ['form-control'],
        format: 'DD/MM/YYYY',
        value: this.state.date,
        onChange: function (e) {
          this.setState({date: e.target.value});
        }.bind(this)
      }),
      h1({}, 'Using valueLink'),
      p({}, 'This is exactly the same as using "value" with "onChange".'),
      DateInput({
        className: ['form-control'],
        format: function (value) {
          return value === parse('today') ? 'today' : format(value, 'DD-MM-YYYY');
        },
        valueLink: {
          value: this.state.date,
          requestChange: function (v) { this.setState({date: v}); }.bind(this)
        }
      }),
      h1({}, 'Just a pre/code'),
      p({}, 'Just so you can see the output.'),
      pre({}, code({},  this.state.date))
    );
  }
});

License

MIT