JS Date Range Picker: Let the user pick a range between two dates

Recommend this page to a friend!
  Info   View files Example   Screenshots Screenshots   View files View files (8)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 258 All time: 180 This week: 4Up
Version License JavaScript version Categories
date-range-picker 1.0BSD License1.5HTML, Validation, Time and Date
Description Author

This package can let the user pick a range between two dates.

It can be used to present two form inputs that let the user choose dates using calendar pull down menus.

The dates may be validated so the range end date is not set to a day before the range start date.

The format of the dates and the week start day are configurable parameters. The picked dates are returned in the ISO-8601 extended format.

Innovation Award
JavaScript Programming Innovation award winner
August 2013

Prize: One book of choice by Packt
Picking dates in a calendar is a common task that users need to perform in Web based user interfaces.

This object makes it easier to pick two dates, so they define a valid date range.

Manuel Lemos
Picture of Vallo Reima
  Performance   Level  
Name: Vallo Reima <contact>
Classes: 6 packages by
Country: Estonia Estonia
Age: ???
All time rank: 351 in Estonia Estonia
Week rank: 6 Up1 in Estonia Estonia Equal
Innovation award
Innovation award
Nominee: 4x

Winner: 1x


JS Date Range Picker

There is a cross-browser solution presented to specify a date range for further activities (queries etc.). The date range can be selected from a pre-defined list of spans and the date fields can be straight-edited. The date picker is integrated with the date spanner to specify the date from a popup calendar. Different short date formats can be set and calendar weeks can be set to begin from Monday or Sunday. The dates entered are checked for correctness and saved to hidden fields in standard format (ISO-8601 extended).

How it works

The classes use the functionality supplied by common.js and the view is determined by datespck.css.

The frm object is created from the Forms class after page load to manage the fields status and contents. The dsp object is created from the DateSpan class and the event handlers are attached during initialization. The date fields are filled according to spans list selection and checked for a correctness after editing.

Clicking the calendar button invokes the DatePick class initiation by dsp. The calendar popup is created and the event handlers are attached. Clicking any day returns the date to dsp to be saved in the date field. Any click outside the calendar cancels the pickup. In both cases the events are detached and the popup is closed.

The dsp.CheckDates method checks the range and saves the dates in hidden fields. The frm.Term method detaches the events and disables the fields.

About the example

The example.php creates necessary html/css/js shell to run the demo. You can edit the text arrays in the beginnig of the code in your preferred language. The $sets array contains 2 settings that are passed to JS:

  • dats defines a date format: delimiter and day-month-year sequence (yy - full year); for example, 01 Jan 2013: '.dmyy' means 01.09.2013, '/ymd' means 13/09/01, '-yymd' means 2013-09-01;
  • wsuf determines the calendar week's 1st day: false - Monday, true - Sunday; Monday is recommended as meeting ISO-8601 (try Jan 2016).

In real applications the settings should be specified from some preferences panel and made available via some globals mechanism. It concerns the texts also in multilingual applications. The classes presume certain field id's to be used. Some of id's can be passed as parameters during instantiation. Although the pickup calendar is created on the fly, it's skeleton must be prepared server-side.

The years list is complemented dynamically if needed. If the date format is incorrect (do not correspond to dats setting), then the field label's color becomes red. Pressing Go button displays the dates' hidden values, End button deactivates the datespan form.

The package

The following files are included:

  1. datespan.js - class of date span selection & editing and checking;
  2. datepick.js - class of date selection from a popup calendar;
  3. common.js - support functions and classes;
  4. datespck.css - date span and pick styling;
  5. calendar.png - date picker button's image;
  6. example.php - html/css/js shell for functionality demonstration;
  7. readme.md - the file you are reading.

The Date Range Picker is implemented in vRegistry solution (see [vregistry.com]).

[vregistry.com]: http://vregistry.com/hlp/en

  • date-range-picker.png
  Files folder image Files  
File Role Description
Accessible without login Image file calendar.png Icon Date picker button's image
Accessible without login Plain text file common.js Aux. Support functions and classes
Plain text file datepick.js Class Date selection from a popup calendar
Plain text file datespan.js Class Date span selection & editing and checking
Accessible without login Plain text file datespck.css Data Date span and pick styling
Accessible without login Plain text file example.php Example Shell for functionality demonstration
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:180
This week:4Up