# React-Bootstrap based date picker. [![NPM Version](https://badge.fury.io/js/react-bootstrap-date-picker.svg)](https://www.npmjs.com/package/react-bootstrap-date-picker) [![Circle CI](https://circleci.com/gh/pushtell/react-bootstrap-date-picker.svg?style=shield)](https://circleci.com/gh/pushtell/react-bootstrap-date-picker) [![Coverage Status](https://coveralls.io/repos/pushtell/react-bootstrap-date-picker/badge.svg?branch=master&service=github)](https://coveralls.io/github/pushtell/react-bootstrap-date-picker?branch=master) [![Dependency Status](https://david-dm.org/pushtell/react-bootstrap-date-picker.svg)](https://david-dm.org/pushtell/react-bootstrap-date-picker) [![NPM Downloads](https://img.shields.io/npm/dm/react-bootstrap-date-picker.svg?style=flat)](https://www.npmjs.com/package/react-bootstrap-date-picker) See the demo at [pushtell.github.io/react-bootstrap-date-picker](http://pushtell.github.io/react-bootstrap-date-picker/). [![Demo](https://cdn.rawgit.com/pushtell/react-bootstrap-date-picker/master/documentation-images/date-picker-screencast.gif)](http://pushtell.github.io/react-bootstrap-date-picker/) Please [★ on GitHub](https://github.com/pushtell/react-bootstrap-date-picker)! Using this module in production? [We'd love to hear about it.](https://github.com/pushtell/react-bootstrap-date-picker/issues/17)

- [Installation](#installation) - [Usage](#usage) - [API Reference](#api-reference) - [``](#datepicker-) - [Tests](#tests) - [Browser Coverage](#browser-coverage) - [Running Tests](#running-tests) ## Installation `react-bootstrap-date-picker` is compatible with React 0.14.x and 0.15.x. ```bash npm install react-bootstrap-date-picker ``` ## Usage ```js var DatePicker = require("react-bootstrap-date-picker"); var App = React.createClass({ getInitialState: function(){ var value = new Date().toISOString(); return { value: value } }, handleChange: function(value, formattedValue) { this.setState({ value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z" formattedValue: formattedValue // Formatted String, ex: "11/19/2016" }); }, componentDidUpdate: function(){ // Access ISO String and formatted values from the DOM. var hiddenInputElement = document.getElementById("example-datepicker"); console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z" console.log(hiddenInputElement.getAttribute('data-formattedvalue')) // Formatted String, ex: "11/19/2016" }, render: function(){ return Label Help ; } }); ``` ## API Reference ### `` DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bootstrap.github.io/components.html#forms-input-groups). [InputGroup](https://react-bootstrap.github.io/components.html#forms-input-groups) properties are passed through to the input group. * **Properties:** * `value` - ISO date string representing the current value. * **Optional** * **Type:** `string` * **Example:** `"2016-05-19T12:00:00.000Z"` * `defaultValue` - ISO date string representing the default value. Cannot be set with 'value'. * **Optional** * **Type:** `string` * **Example:** `"2016-05-19T12:00:00.000Z"` * `minDate` - ISO date string to set the lowest allowable date value. * **Optional** * **Type:** `string` * **Example:** `"2016-05-19T12:00:00.000Z"` * `maxDate` - ISO date string to set the highest allowable date value. * **Optional** * **Type:** `string` * **Example:** `"2016-05-19T12:00:00.000Z"` * `style` - Style object passed to the `FormControl` input element. * **Optional** * **Type:** `object` * **Example:** `{width: "100%"}` * `className` - Class name passed to the `FormControl` input element. * **Optional** * **Type:** `string` * **Example:** `example-class` * `autoComplete` - autoComplete attribute passed to the `FormControl` input element. * **Optional** * **Type:** `string` * **Example:** `off` * `autoFocus` - Whether or not component starts with focus. * **Optional** * **Type:** `bool` * **Example:** `false` * `disabled` - Whether or not component is disabled. * **Optional** * **Type:** `bool` * **Example:** `false` * `onChange` - Focus callback function. * **Optional** * **Type:** `function` * **Callback Arguments:** * `value` - ISO date string representing the selected value. * **Type:** `String` * **Example:** `"2016-05-19T12:00:00.000Z"` * `formattedValue` - String representing the formatted value as defined by the `dateFormat` property. * **Type:** `String` * **Example:** `"05/19/2016"` * `onFocus` - Focus callback function. * **Optional** * **Type:** `function` * **Callback Arguments:** * `event` - Focus event. * **Type:** `Event` * `onBlur` - Blur callback function. * **Optional** * **Type:** `function` * **Callback Arguments:** * `event` - Blur event. * **Type:** `Event` * `dateFormat` - Date format. Any combination of DD, MM, YYYY and separator. * **Optional** * **Type:** `string` * **Examples:** `"MM/DD/YYYY"`, `"YYYY/MM/DD"`, `"MM-DD-YYYY"`, or `"DD MM YYYY"` * `clearButtonElement` - Character or component to use for the clear button. * **Optional** * **Type:** `string` or `ReactClass` * **Example:** `"×"` * `showClearButton` - Toggles the visibility of the clearButton * **Optional** * **Type:** `bool` * **Example:** `false` * `onClear` - Defines what happens when clear button is clicked. * **Optional** * **Type:** `function` * `previousButtonElement` - Character or component to use for the calendar's previous button. * **Optional** * **Type:** `string` or `ReactClass` * **Example:** `"<"` * `nextButtonElement` - Character or component to use for the calendar's next button. * **Optional** * **Type:** `string` or `ReactClass` * **Example:** `">"` * `cellPadding` - CSS padding value for calendar date cells. * **Optional** * **Type:** `string` * **Example:** `"2px"` * `dayLabels` - Array of day names to use in the calendar. Starting on Sunday. * **Optional** * **Type:** `array` * **Example:** `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` * `monthLabels` - Array of month names to use in the calendar. * **Optional** * **Type:** `array` * **Example:** `['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']` * `calendarPlacement` - Overlay placement for the popover calendar. * **Optional** * **Type:** `string` or `function` * **Example:** `"top"` * `calendarContainer` - Overlay container for the popover calendar. When placing the date-picker in a scrolling container, set this prop to some ancestor of the scrolling container. * **Optional** * **Type:** A DOM element or a component * **Example:** `document.body` * `weekStartsOnMonday` - **OBSOLETE** use `weekStartsOn` * `weekStartsOn` - Makes the calendar's week to start on a specified day. 0 = Sunday, 1 = Monday, etc. * **Optional** * **Type:** `number` * **Example:** `4` * `showTodayButton` - Toggles the visibility of the today-button. * **Optional** * **Type:** `boolean` * **Example:** `false` * `todayButtonLabel` - Label for the today-button * **Optional** * **Type:** `string` * **Example:** `"Today"` * `customControl` - Overwrite the default `FormControl` component with your own component. * **Optional** * **Type:** `React.Component` * **Example:** `` * **Methods:** ## Tests ### Browser Coverage [Karma](http://karma-runner.github.io/0.13/index.html) tests are performed on [Browserstack](https://www.browserstack.com/) in the following browsers: * IE 9, Windows 7 * IE 10, Windows 7 * IE 11, Windows 7 * Opera (latest version), Windows 7 * Firefox (latest version), Windows 7 * Chrome (latest version), Windows 7 * Safari (latest version), OSX Yosemite * Mobile Safari (latest version), iPhone 6, iOS 8.3 Please [let us know](https://github.com/pushtell/react-bootstrap-date-picker/issues/new) if a different configuration should be included here. ### Running Tests Locally: ```bash npm test ``` On [Browserstack](https://www.browserstack.com/): ```bash BROWSERSTACK_USERNAME=YOUR_USERNAME BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY npm test ```

Table of Contents

	Stars	Issues	Version	Updated	Created
react-bootstrap-date-picker	344	62	5.1.0	7 years ago	8 years ago
react-date-time-group			5.0.5	5 years ago	8 years ago
react-datepicker	7,839	322	6.9.0	11 days ago	10 years ago

react-bootstrap-date-picker vs react-date-time-group vs react-datepicker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past