A Reactstrap based, zero dependencies, date picker.

Based on react-bootstrap-date-picker but adding some quite handy extras:

• possibility to disable days in a week
• typescript types for easier integration
• spanish language support

Table of Contents

1. Installation
2. Usage
3. API Reference
4. Deeper customizing
5. Inspect this package

Installation

reactstrap-date-picker2 is compatible with React 0.14.x, 0.15.x and 0.16.x.

npm install reactstrap-date-picker2

Usage

import React from 'react'
import {FormGroup, Label, FormText} from 'reactstrap'
var DatePicker = require("reactstrap-date-picker");

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state= {
      value: new Date().toISOString()
    }
  }

  handleChange(value, formattedValue) {
    this.setState({
      value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
      formattedValue: formattedValue // Formatted String, ex: "11/19/2016"
    })
  }

  componentDidUpdate() {
    // 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() {
    return (
      <FormGroup>
        <Label>My Date Picker</Label>
        <DatePicker id = "example-datepicker" 
                    value = {this.state.value} 
                    onChange = {(v,f) => this.handleChange(v, f)} />
        <FormText>Help</FormText>
      </FormGroup>
    )
  }
}

API Reference

<DatePicker />

reactstrap-date-picker2's public component.

Date 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"

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"

weekStartsOn

Makes the calendar's week to start on a specified day. 0 = Sunday, 1 = Monday, etc.

• Optional
• Type: number
• Example: 4

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"

disabledWeekDays

The calenday will show specified weekdays a disabled. 0 = Sunday, 1 = Monday, etc.

• Optional
• Type: array
• Example: [0, 2, 4, 6]

Events

onChange

Change 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

onClear

Defines what happens when clear button is clicked.

• Optional
• Type: function

Customize Input Group

valid

Applies the is-valid class when true, does nothing when false

• Optional
• Type: bool
• Example: true

invalid

Applies the is-invalid class when true, does nothing when false

• Optional
• Type: bool
• Example: true

customInputGroup

Overwrite the default InputGroup component with your own component.

• Optional
• Type: React.Component
• Example: <CustomInputGroup />

Customize Form Control

Form control is the shown HTML input, and you can customize it.

style

Style object passed to the Form Control input element.

• Optional
• Type: object
• Example: {width: "100%"}

className

Class name passed to the Form Control input element.

• Optional
• Type: string
• Example: example-class

autoComplete

autoComplete attribute passed to the Form Control 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

size

Size of the input

• Optional
• Type: string
• Examples: lg, sm, ...

You can also override it completely and pass your own component:

customControl

Overwrite the default Form Control component with your own component.

• Optional
• Type: React.Component
• Example: <CustomControl />

Clear button

showClearButton

Toggles the visibility of the clearButton

• Optional
• Type: bool
• Default: false

clearButtonElement

Character or component to use for the clear button.

• Optional
• Type: string or ReactClass
• Default: "×"

Customize Calendar

You can also customize the popup's Calendar:

previousButtonElement

Character or component to use for the calendar's previous button.

• Optional
• Type: string or ReactClass
• Default: "<"

nextButtonElement

Character or component to use for the calendar's next button.

• Optional
• Type: string or ReactClass
• Default: ">"

cellPadding

CSS padding value for calendar date cells.

• Optional
• Type: string
• Default: "5px"

dayLabels

Array of day names to use in the calendar. Starting on Sunday.

• Optional
• Type: array
• Default: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

monthLabels

Array of month names to use in the calendar.

• Optional
• Type: array
• Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

calendarPlacement

Overlay placement for the popover calendar.

• Optional
• Type: string or function
• Default: "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

showTodayButton

Toggles the visibility of the today-button.

• Optional
• Type: boolean
• Default: false

todayButtonLabel

Label for the today-button

• Optional
• Type: string
• Default: "Today"

Deeper customizing

You can also customize reactstrap-date-picker2 trough element's id or class attributes.

reactstrap-date-picker2 renders several elements, all contained within a reactstrap InputGroup. Such elements will have its unique id attribute, plus reactstrap-date-picker2 custom class names (prefixed by rdp-*).

The rendered DOM structure seems like this:

  <div class="input-group rdp-input-group" id="rdp-input-group-SUFFIX">
    <input class="form-control rdp-form-control" id="props.formControl.id or rdp-form-control-SUFFIX" />
    <div class="rdp-overlay">
      <div>
        <div class="rdp-popover">
          <div class="popover">
            <div class="popover-inner">
              <div class="popover-header">
                <div class="rdp-header">
                  <div class="rdp-header-previous-wrapper"/>
                  <span/>
                  <div class="rdp-header-next-wrapper"/>
                </div>
              </div>
              <div class="popover-body">
                <table class="rdp-calendar">
                </table>
              </div>
            </div>
            <span class="arrow">
          </div>
        </div>
      </div>
    </div>
    <input class="rdp-hidden" id="props.id or rdp-hidden-SUFFIX" />
    <div class="input-group-addon rdp-addon">
      <span class="input-group-text">
    </div>
  </div>

This SUFFIX is:

· props.name

· if props.name is not passed, then use props.id

· if props.id is not passed, then take a global counter of active reactstrap-date-picker2 instances

So, the idea is, depending on your needs:

· if you don't need handle ids at all, reactstrap-date-picker2 will render unique id with no problem

· if you need a basic id usage, for example accessing the reactstrap-date-picker2's value from the DOM, then you just have to pass props.id and get the value from the element with that id

· if you will perform more complex operations, then use props.name or props.id, and pay attention to the previous DOM structure and the SUFFIX presences

Inspect this package

Demo

npm run demo

And visit http://localhost:3010 on your browser

Running Tests

npm run test