Nanotechnology Promises Much

    @lendinghome/react-pikaday

    0.6.0 • Public • Published

    react-pikaday

    A component wrapper around Pikaday.

    View Example

    Importing

    Normal

    If you're using Browserify, or want to bring a custom Pikaday stylesheet, just require this component like any other module:

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

    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:

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

    Usage

    /** @jsx React.DOM */
    var React = require('react');
    var Pikaday = require('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.

    Keywords

    none

    Install

    npm i @lendinghome/react-pikaday

    DownloadsWeekly Downloads

    2

    Version

    0.6.0

    License

    MIT

    Last publish

    Collaborators

    • lendinghome