react-datetime-range-super-picker

React date, time, date-time range, calender, clock and even month i.e. all in one picker !!

This is a super picker due to how it handles date-time props for each components. This component permenantly solves the time handling issue where you get certain format of Date as an input and you have to return completely different format after user edit. Not to forget it does it while looking extremely cool !

There are lot of Date Range pickers but most of them do not handle Date-TIME Range picking

Amazing demo just for you ---> Checkout Demo

Install

Install using npm simply (If you can just get that long name right...)

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

if you are using yarn

yarn add react-datetime-range-super-picker

Install dependencies

Install using npm

npm install --save lodash date-fns

if you are using yarn

yarn add lodash date-fns

Preview

Table of Contents

• Components
  • TimePicker
  • DatePicker
  • DateTimePicker
  • DateRangeCalendarPicker
  • DateTimeRangePicker
  • MonthPicker
  • DateRangePicker - Beta
• Input Components
• Styling
• Future Updates
• Contributors

---

TimePicker

import React, {useState} from 'react'

import { TimePicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const TimePickerWrapper = () => {

  const [hour24, setHour] = useState(22)
  const [minute, setMin] = useState(30)
  // OR use hour (12 hour format), minute and meridian (AM | PM) for props
  // OR for string time use : "HH:mm" ( 24 hrs ) | "hh:mm aa" ( 12 hrs )

  const handleTimeUpdate = ({time}) => {
    setHour(time.hour24)
    setMin(time.minute)
  }

  return (
    <TimePicker time={{hour24, minute }} 
      onTimeUpdate={handleTimeUpdate} />
  )
}

Available Props:

Props	Type	Description
time	Object String	Default value: "08:00 am" Time can be Json object, which can be either 12hr OR 24hr format. While using string time, format is hh:mm aaa (12 hr) OR HH:mm (24hr) Examples : 12 hour format : { hour: 8, minute: 0, meridiem: 'AM' } 24 hour format : { hour24: 16, minute: 0 } "16:30" "08:30 AM"
format (Optional)	String	Default value: 'hh:mm aaa' choose format of time returned and shown on picker
onTimeUpdate	Function	This function will be called every time user changes time. Handler Arguments :{ { hour24, hour, minute, meridiem }, formatted} formatted will be time as per selected format

Supports Input component : TimePickerInput . Checkout further details

DatePicker

import React, {useState} from 'react'

import { DatePicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const DatePickerWrapper = () => {

  const [curr_date, setDate] = useState(new Date())
  // OR use JSON object with : day, month, year

  const handleDateUpdate = ({date}) => {
    setDate(date)
  }
  
  return (
    <DatePicker weekStartsOn={0} 
      date={curr_date}
      onDateUpdate={handleDateUpdate} />
  )
}

Available Props:

Props	Type	Description
date	Date Object Json Object String	Different types of input this prop can handle : JS Date object : new Date() Json Object :{ day : number, month : number, year : number } String : "1st january 2020"; string format needs to be same as format prop
weekStartsOn	Number	Default value: 0 (Sunday) 0 = sunday -> 6 = saturday Updates calender date ordering
format	String	Default value : "do MMMM yyyy" checkout all supported formats at date-fns
onDateUpdate	Function	Every time user changes date, month or year this function will be called with following Json object as an argument: { day, month, year, date, formatted }
onComplete	Function	Once user selects a date this handler is called. Can be used to hide picker on date select

Supports Input component : DatePickerInput . Checkout further details

DateTimePicker

import React, {useState} from 'react'

import { DateTimePicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const DateTimePickerWrapper = () => {

  const [curr_date, setDate] = useState(new Date())
  // OR use JSON object with : day, month, year

  const handleDateUpdate = ({date}) => {
    setDate(date.date)
  }
  
  return (
    <DateTimePicker date={curr_date}
      onDateTimeUpdate={handleDateUpdate} />
  )
}

Available Props:

Props	Type	Description
date	Date Object Json Object String	Different types of input this prop can handle : JS Date object : new Date() Json Object :{ day, month, year, hour? , hour24?, minute?, meridiem?}; use hour(12 hr format) with meridiem, OR hour24 and minute only for time String : "1st january 2020 12:30 PM"; string format needs to be same as format prop
format (optional)	String	Select input and output string format of the picker. Default value : "dd/MM/YYY hh:mm aaa" More format supported date-fns
timeFormat (optional)	String	Select time picker specific format. More format supported date-fns
dateFormat (optional)	String	Select date picker specific format. More format supported date-fns
weekStartsOn (optional)	Number	Default value: 0 (Sunday) 0 = sunday -> 6 = saturday Updates calender date ordering
onDateTimeUpdate	Function	Every time user changes date or time this handler will be called. Arguments for the handlers : { date: { day, month, year, hour , hour24, minute, meridiem }, formatted }
onDateUpdate (optional)	Function	Every time user changes date this handler will be called. Arguments for the handlers : { day, month, year, date, formatted }
onTimeUpdate (optional)	Function	Every time user changes time this handler will be called. Arguments for the handlers : { time: { hour, hour24, minute, meridiem }, formatted }

Supports Input component : DateTimePickerInput . Checkout further details

DateRangeCalendarPicker

import React, {useState} from 'react'

import { DateRangeCalendarPicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const DateRangeCalendarPickerWrapper = () => {

  const [from_date, setFromDate] = useState(new Date())
  const [to_date, setToDate] = useState(new Date())
  // OR use JSON object with : day, month, year

  const handleFromDateUpdate = ({date}) => {
    setFromDate(date.date)
  }
  const handleToDateUpdate = ({date}) => {
    setToDate(date.date)
  }
  
  return (
    <DateRangeCalendarPicker from_date={from_date} to_date={to_date}
      onFromDateUpdate={handleFromDateUpdate} 
      onToDateUpdate={handleToDateUpdate} />
  )
}

Available Props:

Props	Type	Description
from_date, to_date	Date Object Json Object String	Different types of input this prop can handle : JS Date object : new Date() Json Object :{ day, month, year }; String : "1st january 2020"; string format needs to be same as format prop
format	String	Default value : "do MMMM yyyy" checkout all supported formats at date-fns
weekStartsOn	Number	Default value: 0 (Sunday) 0 = sunday -> 6 = saturday Updates calender date ordering
closeButtonText (Optional)	String	Default value: "Close"
onFromDateUpdate, onToDateUpdate	Function	Every time user changes date this handler will be called. Arguments for the handlers : { day, month, year, date, formatted }
onDone (optional)	Function	If this function is passed as a prop, picker will show a done/close button and call this handler when user clicks it. Can be used to easily handle picker hide state.

Supports Input component : DateRangeCalendarPickerInput . Checkout further details

DateTimeRangePicker

import React, {useState} from 'react'

import { DateTimeRangePicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const DateTimeRangePickerWrapper = () => {

  const [from_date, setFromDate] = useState(new Date())
  const [to_date, setToDate] = useState(new Date())
  // OR use JSON object with : day, month, year

  const handleFromDateUpdate = ({date}) => {
    setFromDate(date.date)
  }
  const handleToDateUpdate = ({date}) => {
    setToDate(date.date)
  }
  
  return (
    <DateTimeRangePicker from_date={from_date} to_date={to_date}
      onFromDateTimeUpdate={handleFromDateUpdate} 
      onToDateTimeUpdate={handleToDateUpdate} />
  )
}

Available Props:

Props	Type	Description
from_date, to_date	Date Object Json Object String	Different types of input this prop can handle : JS Date object : new Date() Json Object :{ day, month, year, hour? , hour24?, minute?, meridiem?}; use hour(12 hr format) with meridiem, OR hour24 and minute only for time String : "1st january 2020 12:30 PM"; string format needs to be same as format prop
format	String	Default value : "dd/MM/YYY hh:mm aaa". More format supported date-fns
timeFormat	String	More format supported date-fns
dateFormat	String	More format supported date-fns
weekStartsOn	Number	Default value: 0 (Sunday) 0 = sunday -> 6 = saturday Updates calender date ordering
closeButtonText (Optional)	String	Default value: "Close"
onFromDateTimeUpdate, onToDateTimeUpdate	Function	Every time user changes date or time this handler will be called Arguments for the handlers : { date: { day, month, year, hour , hour24, minute, meridiem }, formatted }
onFromDateUpdate, onToDateUpdate (optional)	Function	Every time user changes date this handler will be called. Arguments for the handlers : { day, month, year, date, formatted }
onFromTimeUpdate, onToTimeUpdate (optional)	Function	Every time user changes time this handler will be called. Arguments for the handlers : { time: { hour, hour24, minute, meridiem }, formatted }
onDone (optional)	Function	If this function is passed as a prop, picker will show a done/close button and call this handler when user clicks it. Can be used to easily handle picker hide state.

Supports Input component : DateTimeRangePickerInput . Checkout further details

MonthPicker

Bonus Month picker! Useful when you want to pick just month and year in a cool way.

import React, {useState} from 'react'

import { MonthPicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const MonthPickerWrapper = () => {

  const [res_month, setMonth] = useState(4)
  const [res_year, setYear] = useState(2020)
  // OR use Date object as input

  const handleUpdate = ({month, year}) => {
    setMonth(month)
    setYear(year)
  }
  
  return (
    <MonthPicker time={{month: res_month, year:res_year}}
      onDateUpdate={handleUpdate} />
  )
}

Available Props:

Props	Type	Description
time	Date OR Object	Example new Date() { month : number, year : number }
onDateUpdate	Function	Returns { month, year }

DateRangePicker (Beta)

import React, {useState} from 'react'

import { DateRangePicker } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const DateRangePickerWrapper = () => {

  const [from_date, setFromDate] = useState(new Date())
  const [to_date, setToDate] = useState(new Date())
  // OR use JSON object with : day, month, year

  const handleFromDateUpdate = ({date}) => {
    setFromDate(date.date)
  }
  const handleToDateUpdate = ({date}) => {
    setToDate(date.date)
  }
  
  return (
    <DateRangePicker from_date={from_date} to_date={to_date}
      onFromDateUpdate={handleFromDateUpdate} 
      onToDateUpdate={handleToDateUpdate} />
  )
}

Available Props:

Props	Type	Description
from_date, to_date	Date Object Json Object String	Different types of input this prop can handle : JS Date object : new Date() Json Object :{ day, month, year }; String : "1st january 2020"; string format needs to be same as format prop
format	String	Default value : "do MMMM yyyy" checkout all supported formats at date-fns
weekStartsOn	Number	Default value: 0 (Sunday) 0 = sunday -> 6 = saturday Updates calender date ordering
closeButtonText (Optional)	String	Default value: "Close"
onFromDateUpdate, onToDateUpdate	Function	Every time user changes date this handler will be called. Arguments for the handlers : { day, month, year, date, formatted }
onDone (optional)	Function	If this function is passed as a prop, picker will show a done/close button and call this handler when user clicks it. Can be used to easily handle picker hide state.

Supports Input component : DateRangePickerInput . Checkout further details

InputComponents

Input components are wrapper around their picker components. They handle show / hide states and logic internally. If you want to show a simple form input box, which will show or hide Picker component as per user interaction than use Input components. List of Input Components : TimePickerInput, DatePickerInput, DateTimePickerInput, DateTimeRangePickerInput.

Here is an example code for DateTimeRangePickerInput component.

import React, {useState} from 'react'

import { DateTimeRangePickerInput } from 'react-datetime-range-super-picker'
import 'react-datetime-range-super-picker/dist/index.css'


const DateTimeRangePickerInputWrapper = () => {

  const [from_date, setFromDate] = useState(new Date())
  const [to_date, setToDate] = useState(new Date())
  // OR use JSON object with : day, month, year

  const handleFromDateUpdate = ({date}) => {
    setFromDate(date.date)
  }
  const handleToDateUpdate = ({date}) => {
    setToDate(date.date)
  }
  
  return (
    <DateTimeRangePickerInput from_date={from_date} to_date={to_date}
      onFromDateTimeUpdate={handleFromDateUpdate} 
      onToDateTimeUpdate={handleToDateUpdate} />
  )
}

Every Input component takes the same props as simple picker component. In addition it provides extra props for styling. Which are as listed below.

Props	Description
inputStyle	Pass styles directly to text box input component as Json object. Follows same rules as React style object.
popupStyle	Pass styles directly to picker popup wrapper component as Json object. Can be used to position, resize wrapper. Follows same rules as React style object.
className	String, css class to be used apply additional style to text box with raw css
popupClassName	String, css class to be used apply additional style to picker popup with raw css
isDisabled	Boolean, to control input model show
inputComponent	React Component, to render custom input

Note : All of above props are optional.

Styling

Every picker component color scheme can be changed with 2 props: theme and colors. Currently all picker supports few themes out of the box as shown in props table below. (More themes coming soon !!) Theme is created using colors listed in props table below.

There are 3 easy ways to customise color scheme to suit your requirements:

1. Use theme prop if that matches your needs.
2. Use all the colors and customise whole picker look.
3. Use theme prop and override just the colors you want to change in that theme. i.e. choose "dark" theme and just override primary color

Props	Type	Description
theme	String	light, dark, colorful Default is light
colors	Json Object	Json object keys : primary_color primary_font_color light_font_color secondary_color primary_highlight_color secondary_highlight_color

All styling props above are optional

1. Light (Default)

2. Dark

3. Colorful

FutureUpdates

Things that this date time range super picker library does not do (YET).

We are open to suggestions. Open an issue with your ideas, if we like it and it is really useful ( or just cool ) we will implement it in next release !

• Filter props to handle disable / enable pickable dates
• Time duration component with range picker
• "Last X days/hours" dynamic selector for range picker

Contributors

• Dishant Chavda : Creator
• Harsh Darji : Contributions with styling updates and setting up the demo

---

License

MIT © Dishant15