react-bootstrap-date-picker

WebJar for react-bootstrap-date-picker

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-bootstrap-date-picker
Last Version

Last Version

5.1.0
Release Date

Release Date

Type

Type

jar
Description

Description

react-bootstrap-date-picker
WebJar for react-bootstrap-date-picker
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/pushtell/react-bootstrap-date-picker

Download react-bootstrap-date-picker

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-bootstrap-date-picker/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-bootstrap-date-picker</artifactId>
    <version>5.1.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-bootstrap-date-picker/
implementation 'org.webjars.npm:react-bootstrap-date-picker:5.1.0'
// https://jarcasting.com/artifacts/org.webjars.npm/react-bootstrap-date-picker/
implementation ("org.webjars.npm:react-bootstrap-date-picker:5.1.0")
'org.webjars.npm:react-bootstrap-date-picker:jar:5.1.0'
<dependency org="org.webjars.npm" name="react-bootstrap-date-picker" rev="5.1.0">
  <artifact name="react-bootstrap-date-picker" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-bootstrap-date-picker', version='5.1.0')
)
libraryDependencies += "org.webjars.npm" % "react-bootstrap-date-picker" % "5.1.0"
[org.webjars.npm/react-bootstrap-date-picker "5.1.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

React-Bootstrap based date picker.

NPM Version Circle CI Coverage Status Dependency Status NPM Downloads

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

Demo

Please ★ on GitHub!

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

Table of Contents

Installation

react-bootstrap-date-picker is compatible with React 0.14.x and 0.15.x.

npm install react-bootstrap-date-picker

Usage

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 <FormGroup>
      <ControlLabel>Label</ControlLabel>
      <DatePicker id="example-datepicker" value={this.state.value} onChange={this.handleChange} />
      <HelpBlock>Help</HelpBlock>
    </FormGroup>;
  }
});

API Reference

<DatePicker />

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"
    • 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: <CustomControl />
  • Methods:

Tests

Browser Coverage

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.

Running Tests

Locally:

npm test

On Browserstack:

BROWSERSTACK_USERNAME=YOUR_USERNAME BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY npm test

Versions

Version
5.1.0
3.4.0
2.0.0
1.1.0