Date Input UI component for React optimized for i18n and a11y
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src Several improvements Mar 29, 2017
storybook Bump globalize up and other minor updates May 24, 2017
.babelrc
.eslintrc.json Include build step, .eslint, and fix lint errors Mar 28, 2017
.gitignore
LICENSE-MIT Initial commit Feb 27, 2017
README.md Several improvements Mar 29, 2017
package.json Bump globalize up and other minor updates May 24, 2017

README.md

react-date-input


Date Input UI component for React optimized for i18n and a11y.

Screenshots

locale DateInput MonthInput
en DateInputEn MonthInputEn
es DateInputEs MonthInputEs
de DateInputDe MonthInputDe
zh DateInputZh MonthInputZh

Features

  • I18n support
  • A11y support
  • Style unoppinionated (no style provided)
  • Supports IE9, IE9+, Chrome, Firefox & Safari

Install

npm install --save react-date-input

Usage

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {DateInput, MonthInput} from 'react-date-input';

class App extends Component {
  render() {
    return (
      <form>
        <label>
          Date of birth:
          <DateInput />
        </label>
        <label>
          Month and year of establishment:
          <MonthInput />
        </label>
      </form>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('container')
);

API

DateInput & MonthInput

Properties

Name Type Default Description
defaultValue date null Set initial value of the date input.
value date null Set current value of the date input.
onChange function Called for each valid date change, taking one argument date

Development

npm install
npm run storybook

Example

npm start and then go to http://localhost:9001

Online examples: TBD

Test Case

TBD

License

react-date-input is released under the MIT license © Rafael Xavier de Souza.