Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework

Posted by Scott Jehl 01/05/2009

We’ve updated our popular Date Range Picker plugin to use jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a previous version we wrote for jQuery UI 1.5.3.

Working Demo:

Demo Page

The demo above was generated with the following code:

HTML 

<input type="text" />

jQuery: 

$('input').daterangepicker();

An additional demo with arrows and a custom dateFormat:

Demo Page

Features and Updates

  • Uses jQuery UI 1.7.1: The range picker now uses the latest version of jQuery UI’s datepicker, and allows passing of native datepicker options.
  • Date JSDate.js Integration: We’ve integrated the fantastic date.js library to allow for easy preset development.
  • Optional Range Advancing Arrows: Optional forward and back arrows allow a user to jump forward and backward by range duration.
  • ThemeRoller-ReadyjQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.

Download (and help us improve) the code

The date range picker plugin code is open source and available in a git repository, jQuery-UI-Date-Range-Picker. If you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.

Developer Options

The following options are available in this plugin:

  • presetRanges: Array of objects to be made into menu range presets. Each object requires 3 properties:

    • text: string, text for menu item
    • dateStart: date.js string, or function which returns a date object, start of date range
    • dateEnd: date.js string, or function which returns a date object, end of date range

  • presets: Object, datepicker toggle links. Available options are: ‘specificDate’, ‘allDatesBefore’, ‘allDatesAfter’, ‘dateRange’. Each can be passed a string for link and label text. (example: presets: {specificDate: ‘Pick a date’} ).

  • rangeStartTitle: string, text for label above start calendar in a range.

  • rangeEndTitle: string, text for label above end calendar in a range.

  • doneButtonText: string, text for the done/close button.

  • prevLinkText: string, text for the previous arrow (used in title attr of links as well).

  • nextLinkText: string, text for the next arrow (used in title attr of links as well).

  • earliestDate: Date.js string, earliest date allowed in system

  • latestDate: Date.js string, latest date allowed in system

  • rangeSplitter: String, character between two dates in a range.

  • dateFormat String, date formatting, see available values

  • closeOnSelect: Boolean, true will close the rangepicker when a full range is selected.

  • arrows: Boolean, true will add date range advancing arrows to input.

  • posX: int or string, left absolute position of rangepicker. Defaults to bottom left of input.

  • posY: int or string, top absolute position of rangepicker. Defaults to bottom left of input.

  • appendTo: jQuery selector or element, element to append range picker to.

  • onOpen: function, callback that executes the moment the range picker starts to open.

  • onClose: function, callback that executes when the datepicker closes.

  • onChange: function, callback that executes whenever the date input changes (can happen twice on range selections).

  • datepickerOptions: Object, accepts all jQuery UI Datepicker options. See UI datepicker options.

Development Notes

This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. We’ve tested it in Firefox 2/3, Safari 3, and IE6/7.

Dependencies

This plugin requires jQuery and jQuery UI Datepicker. It also uses the jQuery UI CSS Framework as well as one additional custom CSS file. The demo in the zip file includes all necessary dependencies.

Setting Menu Presets

Setting preset ranges is now very easy and powerful with the help of date.js. To add a preset, simply pass an array to the presetRanges option like this:

$('input').daterangepicker( {
  presetRanges: [
    {text: 'My Range', dateStart: '03/07/08', dateEnd: 'Today' }
  ]
 } );

Note that the dateStart and dateEnd properties can accept strings (as shown), or functions which return a date object. The string will be parsed by date.js to generate a date (visit Date.js for a list of values). For more custom dates, you can write a function that returns a date object. Keep in mind that you can use Date.js within that function for any helpers you might need.

About Date.js

Date.js is an open source date parsing library written by Coolite. Essentially, you can pass some text into it and get a date in return. For example, it would parse the words “next week” and return a date object for a day 7 days from today - VERY slick! The library does a heck of a lot more than that too, and we strongly advise checking it out at Datejs.com to find out more.

Multiple Inputs

If you’d like to use this plugin with 2 inputs for the start and end dates, simply call the plugin on two inputs instead of one. The plugin will update them in order of appearance.

Demo page using 2 inputs

Driven by Input Value

The datepickers will be generated based on any values that are in the inputs at page load. For single inputs, it will split the input value by the rangeSplitter character (default: ‘-’). Each value is parsed by date.js, so you could even begin with a range like “today - next week” in the input, and the datepickers will be set accordingly.

Still to do…

  • Collision detection: At the moment, the rangepicker simply gets placed on the page by coordinates. There’s no collision detection yet.
  • Instance management: Currently, 2 rangepickers on one page won’t play well together. We’ll look to improve this soon.

All blog posts