Skip to content

aadilhasan/react-range-picker

Repository files navigation

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)