| | |
| | | =============================== |
| | | A date and time picker in the same React.js component. It can be used as a datepicker, timepicker or both at the same time. |
| | | |
| | | [![Build Status](https://secure.travis-ci.org/arqex/react-datetime.svg)](https://travis-ci.org/arqex/react-datetime) |
| | | [![npm version](https://badge.fury.io/js/react-datetime.svg)](http://badge.fury.io/js/react-datetime) |
| | | |
| | | It allows to edit even date's milliseconds. |
| | | |
| | | This project started as a fork of https://github.com/quri/react-bootstrap-datetimepicker but the code and the API has changed a lot. |
| | |
| | | ``` |
| | | npm install react-datetime |
| | | ``` |
| | | |
| | | [React.js](http://facebook.github.io/react/) and [Moment.js](http://momentjs.com/) are peer dependencies for react-datetime. These dependencies are not installed along with react-datetime automatically, but your project needs to have them installed in order to make the datetime picker work. |
| | | |
| | | Then |
| | | ```javascript |
| | |
| | | | **dateFormat** | `bool` or `string` | `true` | Defines the format for the date. It accepts any [moment.js date format](http://momentjs.com/docs/#/displaying/format/). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker. | |
| | | | **timeFormat** | `bool` or `string` | `true` | Defines the format for the time. It accepts any [moment.js time format](http://momentjs.com/docs/#/displaying/format/). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker. | |
| | | | **input** | boolean | true | Wether to show an input field to edit the date manually. | |
| | | | **open** | boolean | null | Wether to open or close the picker. If not set react-datetime will open the datepicker on input focus and close it on click outside. | |
| | | | **locale** | string | null | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see [i18n docs](#i18n). |
| | | | **onChange** | function | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter. | |
| | | | **onBlur** | function | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter. | |
| | | | **onChange** | function | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If it isn't, the value of the input (a string) is returned. | |
| | | | **onBlur** | function | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If it isn't, the value of the input (a string) is returned. | |
| | | | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days', 'time') | |
| | | | **className** | string | `""` | Extra class names for the component markup. | |
| | | | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | |
| | |
| | | | **renderDay** | function | DOM.td( day ) | Customize the way that the days are shown in the day picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#appearance-customization) | |
| | | | **renderMonth** | function | DOM.td( month ) | Customize the way that the months are shown in the month picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization) | |
| | | | **renderYear** | function | DOM.td( year ) | Customize the way that the years are shown in the year picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization) | |
| | | | **strictParsing** | boolean | false | Whether to use moment's [strict parsing](http://momentjs.com/docs/#/parsing/string-format/) when parsing input. |
| | | |
| | | ## i18n |
| | | Different language and date formats are supported by react-datetime. React uses [moment.js](http://momentjs.com/) to format the dates, and the easiest way of changing the language of the calendar is [changing the moment.js locale](http://momentjs.com/docs/#/i18n/changing-locale/). |