Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-datetime-range-picker

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datetime-range-picker

Reusable date time range picker

  • 3.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
687
decreased by-22.64%
Maintainers
1
Weekly downloads
 
Created
Source

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.

NameTypeDefaultDescription
startDateDatenew Date()This sets a value for the start date
endDateDatenew Date()This sets a value for the end date
dateFormatBoolean or StringtrueDefines 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.
timeFormatBoolean or StringtrueDefines 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.
utcbooleanfalseWhen true, start and end time values will be interpreted as UTC. Otherwise they will default to the user's local timezone.
localeStringnullManually set the locale
inputBooleanfalseThis defines whether or not to allow user to manually edit date via input field.
inlineBooleanfalseIf set to true will render start date and end date with calender without input fields
onBlurFunction() => {}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.
onFocusFunction() => {}This callback is triggered when user clicks anywhere inside the outermost element of the picker
onChangeFunction() => {}This callback is triggered everytime a user selects a start date or an end date from the picker
viewModeStringdaysThis defines the default view to display when the pickers are shown. ('years', 'months', 'days', 'time').
closeOnTabBooleantrueWhen true and the input is focused, pressing the tab key will close the datepicker.
classNameString''CSS class(es) for the outermost markup element.
inputPropsObjectundefinedDefines 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
closeOnSelectBooleanfalseWhen 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
isValidEndDateFunction() => trueDefine 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.
isValidStartDateFunction() => trueDefine 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.
onEndDateBlurFunction() => {}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.
onEndDateFocusFunction() => {}Callback trigger for when the user opens the end date datepicker.
onEndDateChangeFunction() => {}This callback is triggered everytime the end date changes. It receives the selected date as the only parameter.
onStartDateBlurFunction() => {}This callback is trigger when user clicks outside of the start date input. The callback receives the selected start date as the a parameter
onStartDateFocusFunction() => {}Callback trigger for when the user opens the end date datepicker.
onStartDateChangeFunction() => {}Callback trigger for when start date changes. This callback receives selected moment object as a parameter.
pickerClassNameString''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-*
startTimeConstraintsObjectnullAdd 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.
endTimeConstraintsObjectnullAdd 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)

Keywords

FAQs

Package last updated on 12 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc