React Js based date/range picker, unlike other range pickers it uses single calendar to select the range. Click here to see it in action

install

$ npm i react-range-picker --save

use

import RangePicker from "react-range-picker"

<RangePicker/>

APIS

API	Type	Description
visible	boolean	to controlled visibility of the calendar, only works if on calendar mount visible prop is a boolean value
defaultValue	object	set default values for the calendar - {startDate: Date, endDate: Date}
onDateSelected	function	gets called each time date/time gets selected (params - startDate, startDate)
onOpen	function	gets called when calendar opens
onClose	function	gets called when calendar closes or ok/select button is pressed
closeOnSelect	boolean	if true picker will hide on select of a date or range (default false)
closeOnOutsideClick	boolean	if true calendar won't close on click of outside area (default true)
disableRange	boolean	if true user can select only one date (default false)
selectTime	boolean	if true, time select will show up on date select (default false)
rangeTillEndOfDay	boolean	if true, then second selected date for range will have time of end of the day (11.59 PM) else it will have time of start of the day (12:00 AM)
placeholder	function => ReactComponent	change placeholder, placeholder function will recieve following object as param - {startDate (date object),endDate (date object)}
placeholderText	string	replaces placeholder default text
dateFormat	string	format of placeholder date
footer	function => ReactComponent	change footer, footer function will recieve following object as param - {startDate (date object), endDate (date object),today (function) - to select today's date, close (function) - closes the calendar and calls, onClose callback passed by user}

Followings are the variables for the date format.

• dd - date
• DD - day short
• DDDD - day full
• mm - month
• MM - month short
• MMMM - month full
• yyyy or YYYY - full year
• h - hours
• mi - minutes
• a - lowercase period (am),
• A - capital period (AM)