React component for calendar widget.

React Input Calendar is available as an npm package.

npm install react-input-calendar

Use browserify and reactify for dependency management and JSX transformation.

All styles written in CSS and are in file input-component.css.

http://rudeg.github.io/react-input-calendar

var Calendar = require('react-input-calendar');
React.render(
  <Calendar
    format="DD/MM/YYYY"
    date="4-12-2014"
  />,
  document.body
);

React

Moment-range

Font-Awesome

Type: String

Default: 'MM-DD-YYYY'

Allowed Keys: All formats supported by moment.js

Format of date, which display in input and set in date property.

Type: String or Date

Default: Current date

Set initial date value.

Type: Int (from 0 to 2)

Default: 0 (DaysView)

Set minimal view. Values:

0 - days

1 - months

2 - years.

Type: String

Default: 'MM-DD-YYYY'

Allowed Keys: All formats supported by moment.js

Format of date for the onChange event. Default on the date format (ISO 8601) to ease the save of data.

Type: Function

Default: null

Set a function that will be triggered whenever there is a change in the selected date. It will return the date in the props.computableFormat format.

Type: Function

Default: null

Set a function that will be triggered when the input field is blurred. It will return the event and the date in the props.computableFormat format.

Type: Boolean

Default: undefined

Define state when date picker would close once the user has clicked on a date.

Type Boolean

Default: undefined

Setting this value to true makes the calendar widget open when the iput field is focused.

Type: String

Default: undefined

Value to show in the input text box if no date is set.

Type: String

Default: null

Define the ID of the input field where the date picker represents it's value. This can be useful when the date picker is used with a label element. The label element can be bound to the input field using the label for attribute.

MIT