React-Bootstrap based date picker.


See the demo at pushtell.github.io/react-bootstrap-date-picker.


Please ★ on GitHub!

Using this module in production? We'd love to hear about it.

Table of Contents

- Installation
- Usage
- API Reference
-
- Tests
- Browser Coverage
- 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

$3

DatePicker component. Renders as a React-Bootstrap InputGroup.

InputGroup 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"
* 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
* 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 D/DD, M/MM, YYYY and separator.
* Optional
* Type: string
* Examples: "MM/DD/YYYY", "YYYY/M/D", "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
* 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 - Makes the calendar's week to start on Monday.
* Optional
* Type: boolean
* Example: true
* 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

$3

Karma tests are performed on Browserstack 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 if a different configuration should be included here.

$3

Locally:

`bash

npm test

`

On Browserstack:

`bash

BROWSERSTACK_USERNAME=YOUR_USERNAME BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY npm test

``