This time I will share jQuery Plugin and tutorial about Scrollable jQuery Date Picker and Range Selector – Continuous Calendar, hope it will help you in programming stack.
Continuous Calendar is a jQuery plugin for creating date picker and range selector with scrollable months instead of paged.
Licensed under the Apache License, Version 2.0.
Main features:
- Date dragging
- No pagination, continuous month flow
- Range shifting by dragging
- Range expand with Shift + Mouse click
- Display current date
- Allow disabling of dates
- Month select
- Week select
- Popup support (with current day in calndar icon)
- Support for different date formats
- Support for specifying holidays or disabled days
- Support for setting minimum range
Basic Usage:
1. Include jQuery Continuous Calendar CSS in the header
1 |
< link rel = "stylesheet" href = "build/jquery.continuousCalendar-latest-min.css" /> |
2. The HTML. Range selection is attached to fields with class startDate and endDate
2 |
< input type = "hidden" class = "startDate" name = "range_start" > |
3 |
< input type = "hidden" class = "endDate" name = "range_end" > |
3. Include jQuery library and jQuery Continuous Calendar plugin on the page
1 |
< script src = "jquery.min.js" ></ script > |
2 |
< script src = "build/jquery.continuousCalendar-latest-min.js" ></ script > |
4. Call the plugin with default options.
1 |
$( "#dateRange1" ).continuousCalendar({ |
5. Default options to config the date picker.
21 |
startField: t( "input.startDate" , this ), |
24 |
endField: t( "input.endDate" , this ), |
36 |
disableWeekends: false , |
57 |
popupCallback: t.noop, |
71 |
allowClearDates: false , |
80 |
useIsoForInput: false , |
81 |
initScrollBar: function () { }, |
82 |
executeCallback: function () { } |
Changelog:
v5.1.1 (2019-09-02)
- removed unused dependencies
v5.0.1 (2016-02-17)
v4.12.2 (2016-02-16)
- Use commonJS for source files
v4.12.1 (2015-08-27)
- Add Language support for German and French
v4.11.0 (2015-05-28)
- Highlight Finnish holidays and show tooltips
v4.10.0 (2014-12-16)
- Provide possibility to use iso date format for input field
v4.9.0 (2014-12-16)
- Read dateutils from external dependency
- Ensure box-sizing=content box for calendar icon
v4.8.0 (2014-11-13)
- Support js date objects and DateTime objects as first and last date
- Add callback for popup opening
- Use inline images for custom scrollbar
v4.7.0 (2014-08-13)
- Prevent date labels wrap between week day and date
- Add possibility to set date selection as constructor parameter
- Add DateTime.toISODateString
- De-couple DateLocale and continuousCalendar
- Remove IE 6 tweaks
- Make tinyscrollbar as separate dependency
- Add Duration module
v4.6.2 (2014-04-17)
- Bring old IE support back by using $.map instead of Array.prototype.map
- Make DateTime constructor less ambigous and rely on factory methods instead
v4.6.1 (2014-03-04)
- Get rid of eval in DateFormat.js.
v4.6.0 (2014-03-03)
- Determine single date vs range with configuration parameter instead of provided input elements.
v4.5.3 (2014-02-15)
v4.5.2 (2014-01-22)
v4.5.1 (2014-01-22)
v4.4.1 (2013-09-04)
- Add possibility to use fixed height scroll when using custom scrollbar
This awesome jQuery plugin is developed by continuouscalendar. For more Advanced Usages, please check the demo page or visit the official website.