Submit your widget

Nice Date Picker with jQuery UI Framework

Created 10 years ago   Views 27725   downloads 4379    Author filamentgroup
Nice Date Picker with jQuery UI Framework
View DemoDownload
118
Share |

 

This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.

 

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.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.
  • jQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.

HTML

 

<input type="text" />

 

jQuery:


$('input').daterangepicker(); 

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.

The article source:http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/