Scrollable jQuery Date Picker and Range Selector - Continuous Calendar

File Size: 115 KB
Views Total: 12822
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Scrollable jQuery Date Picker and Range Selector - Continuous Calendar

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

<link rel="stylesheet" href="build/jquery.continuousCalendar-latest-min.css" />

2. The HTML. Range selection is attached to fields with class startDate and endDate

<div id="dateRange1">
  <input type="hidden" class="startDate" name="range_start">
  <input type="hidden" class="endDate" name="range_end">
</div>

3. Include jQuery library and jQuery Continuous Calendar plugin on the page

<script src="jquery.min.js"></script>
<script src="build/jquery.continuousCalendar-latest-min.js"></script> 

4. Call the plugin with default options.

$("#dateRange1").continuousCalendar({
  // options here
});

5. Default options to config the date picker.

// Specifies amount of weeks displayed before selection. 
// If no default selection then count from current day.
weeksBefore: 26,

// Specifies amount of weeks displayed after selection. 
// If no default selection then count from current day.
weeksAfter: 26,

// Specifies exact date for calendar start. 
// This is alternative for weeksBefore. 
// Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.
firstDate: null,

// Specifies exact date for calendar end. 
// This is alternative for weeksAfter. 
// Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.
lastDate: null,

// Specifies jquery element for start input field. 
// This is used also for single date calendar
startField: t("input.startDate", this),

// Specifies jquery element for end input field.
endField: t("input.endDate", this),

// Specifies if calendar opens as popup or as inline version
isPopup: false,

// True, of current date is to be chosen, even if input field is empty.
selectToday: false,

// Specifies locale for rendering calendar and parsing input fields.
locale: EN,

// True if weekends are disabled.
disableWeekends: false,

// Space separated list of disabled dates. 
// Dates are presented in short date format of current locale.
disabledDates: null,

// Sets minimum range permitted in days. Shorter selections are expanded automatically.
minimumRange: -1,

// Set to true for automatically selecting full weeks.
selectWeek: false,

// Duration for fade out. 
// Value is passed for jQuery's .fadeOut function.
fadeOutDuration: 0,

// Function called in init and after date selection. 
// DateRange or Date is passed as argument and this points to calendar container.
callback: t.noop,

// Popup callback
popupCallback: t.noop,


customScroll: false,
scrollOptions: {
  sizethumb: "auto"
},

// Theme to be used. 
// Currently available alternative themes are rounded and transparent. 
// Don't forget to include the required css for the theme.
theme: "",

// Allows the user to clear dates
allowClearDates: false,

// Is date range picker?
isRange: false,

// Start/end dates
startDate: null,
endDate: null,

useIsoForInput:  false,
initScrollBar: function() { },
executeCallback: function() { }

Changelog:

v5.1.1 (2019-09-02)

  • removed unused dependencies

v5.0.1 (2016-02-17)

  • update

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)

  • version update.

v4.5.2 (2014-01-22)

  • version update.

v4.5.1 (2014-01-22)

  • version update.

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.