React-datetime-range-picker-sd NPM

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.

Installation

> npm install --save 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 the initial start date
endDate	`Date`	`new Date()`	This sets the initial 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)

react date datetime range datetime-rangepicker moment

react moment prop-types react-datetime

@infinitebrahmanuniverse/nolb-react-da @everything-registry/sub-chunk-2550 @zalastax/nolb-react-da

1.0.5

6 years ago