react-bootstrap-datetimepicker

This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js

Usage

Installation :

npm install react-bootstrap-datetimepicker

Then

require('react-bootstrap-datetimepicker');

...

render: function() {
  return <DateTimeField />;
}

See Examples for more details.

API

DateTimeField

| Name | Type | Default | Description | | ------------ | ------- | ------- | ----------- | | dateTime | string | moment().format('x') | Represents the inital view dateTime, this string is then parsed by moment.js | | value | string | undefined | Represent the selectedDate of the picker. | | placeholder | string | "Select a Date" | Placeholder of the input field (replace defaultText). | | clearable | boolean | false | Defined if the selector should offer the possibility to clean the selected date. | | disabled | boolean | false | Defines if the selector its enabled or disabled. | | format | string | "x" | Defines the format moment.js should use to parse and output the date to onChange | | inputFormat | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input | | onChange | function | x => console.log(x) | Callback trigger when the date changes | | showToday | boolean | true | Highlights today's date | | daysOfWeekDisabled | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | | viewMode | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') | | inputProps | object | undefined | Defines additional attributes for the input element of the component. | | minDate | moment | undefined | The earliest date allowed for entry in the calendar view. | | maxDate | moment | undefined | The latest date allowed for entry in the calendar view. | | mode | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') |

Update Warning

Starting from 0.0.6, the 3 github repositories react-bootstrap-datetimepicker, react-bootstrap-datetimepicker-npm and react-bootstrap-datetimepicker-bower are merged in a single one. The build process changed but the API is the same. However now the package exports DateTimeField directly, no need to do :

var DateTimeField = require('react-bootstrap-datetimepicker').DateTimeField;

instead use :

var DateTimeField = require('react-bootstrap-datetimepicker');

Contributions

There is still plenty of features missing compared to the original date time picker, hence contributions would be highly appreciated.