Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-range-picker with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactRangePicker = require("react-range-picker")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-range-picker v1.0.1

React Js based date/range picker. With this picker user can select date or range in the single calander not like other pickers which gives you two calander to pick start date and end date.

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


$ npm i react-range-picker --save


import RangePicker from "react-range-picker"



defaultValueobjectset default values for the calendar - {startDate: Date, endDate: Date}
onDateSelectedfunctiongets called each time date/time gets selected (params - startDate, startDate)
onClosefunctiongets called when calendar closes or ok/select button is pressed
closeOnSelectbooleanif true picker will hide on select of a date or range (default false)
disableRangebooleanif true user can select only one date (default false)
selectTimebooleanif true, time select will show up on date select (default false)
rangeTillEndOfDaybooleanif 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)
placeholderfunction => ReactComponentchange placeholder, placeholder function will recieve following object as param - {startDate (date object),endDate (date object)}
placeholderTextstringreplaces placeholder default text
dateFormatstringformat of placeholder date
footerfunction => ReactComponentchange 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)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free