react-datetime-range-picker

This is a datetime range picker based off of react-datetime. It is highly customizable and isn't dependent on jQuery (but it does require Moment).

Installation

> npm install --save react-datetime react-datetime-range-picker

Usage

import DatetimeRangePicker from 'react-datetime-range-picker';

...

  render() {
    return (
      <DatetimeRangePicker
        onChange={this.handler} />
    );
  }

...

Options

Almost all the props available for react-datetime are available for use here too.

| Name | Type | Default | Description | |------|------|---------|-------------| | startDate | Date | new Date() | This sets a value for the start date | | endDate | Date | new Date() | This sets a value for the end date | | dateFormat | Boolean or String | true | Defines the format for the date. It accepts any Moment date format (not in localized format). If true the date will be displayed using the defaults for the current locale. If false the datepicker is disabled and the component can be used as timepicker. | | timeFormat | Boolean or String | true | Defines the format for the time. It accepts any Moment time format (not in localized format). If true the time will be displayed using the defaults for the current locale. If false the timepicker is disabled and the component can be used as datepicker. | | utc | boolean | false | When true, start and end time values will be interpreted as UTC. Otherwise they will default to the user's local timezone. | | locale | String | null | Manually set the locale | | input | Boolean | false | This defines whether or not to allow user to manually edit date via input field. | | inline | Boolean | false | If set to true will render start date and end date with calender without input fields | | onBlur | Function | () => {} | This callback is triggered when user clicks outside the datetime range picker. The callback receives an object with the selected start and date date as only parameter. | | onFocus | Function | () => {} | This callback is triggered when user clicks anywhere inside the outermost element of the picker | | onChange | Function | () => {} | This callback is triggered everytime a user selects a start date or an end date from the picker | | viewMode | String | days | This defines the default view to display when the pickers are shown. ('years', 'months', 'days', 'time'). | | closeOnTab | Boolean | true | When true and the input is focused, pressing the tab key will close the datepicker. | | className | String | '' | CSS class(es) for the outermost markup element. | | inputProps | Object | undefined | Defines additional attributes for the input element of the component. For example: placeholder, disabled, required, name and className (className sets the class attribute for the input element). This applies to both the start and end datetime inputs | | closeOnSelect | Boolean | false | When true, once the day has been selected, the datepicker will be automatically closed. This is useful when using this as a date range picker instead of datetime range picker | | isValidEndDate | Function | () => true | Define the dates that can be selected in the end date picker. The function receives (currentDate, selectedDate) and shall return a true or false whether the currentDate is valid or not. | | isValidStartDate | Function | () => true | Define the dates that can be selected in the start date picker. The function receives (currentDate, selectedDate) and shall return a true or false whether the currentDate is valid or not. | | onEndDateBlur | Function | () => {} | Callback is triggered when user clicks outside the end date input. The callback receives the selected moment object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback returned. | | onEndDateFocus | Function | () => {} | Callback trigger for when the user opens the end date datepicker. | | onEndDateChange | Function | () => {} | This callback is triggered everytime the end date changes. It receives the selected date as the only parameter. | | onStartDateBlur | Function | () => {} | This callback is trigger when user clicks outside of the start date input. The callback receives the selected start date as the a parameter | | onStartDateFocus | Function | () => {} | Callback trigger for when the user opens the end date datepicker. | | onStartDateChange | Function | () => {} | Callback trigger for when start date changes. This callback receives selected moment object as a parameter. | | pickerClassName | String | '' | CSS class to attach to outer div that wraps the individual pickers. This class is applied to both the start and end pickers. This is particular useful if you want to add col-* | | startTimeConstraints | Object | null | Add some constraints to the start timepicker. It accepts an object with the format { hours: { min: 9, max: 15, step: 2 }}, this example means the hours can't be lower than 9 and higher than 15, and it will change adding or subtracting 2 hours everytime the buttons are clicked. The constraints can be added to the hours, minutes, seconds and milliseconds. | | endTimeConstraints | Object | null | Add some constraints to the end timepicker. It accepts an object with the format { hours: { min: 9, max: 15, step: 2 }}, this example means the hours can't be lower than 9 and higher than 15, and it will change adding or subtracting 2 hours everytime the buttons are clicked. The constraints can be added to the hours, minutes, seconds and milliseconds. |

NB: You can read more about customization of the individual datepickers here

Maintainers

Samuel Amoah (snamoah)