Free Download Scrollable jQuery Date Picker and Range Selector – Continuous Calendar

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.

Scrollable jQuery Date Picker Range Selector Continuous Calendar - Free Download Scrollable jQuery Date Picker and Range Selector - Continuous Calendar

File Size:	115 KB
Views Total:	10970
Last Update:	2 years ago
Publish Date:	8 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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

1
<div id="dateRange1">

2
  <input type="hidden" class="startDate" name="range_start">

3
  <input type="hidden" class="endDate" name="range_end">

4
</div>

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({

2
  // options here

3
});

5. Default options to config the date picker.

01
// Specifies amount of weeks displayed before selection. 

02
// If no default selection then count from current day.

03
weeksBefore: 26,

04
 
05
// Specifies amount of weeks displayed after selection. 

06
// If no default selection then count from current day.

07
weeksAfter: 26,

08
 
09
// Specifies exact date for calendar start. 

10
// This is alternative for weeksBefore. 

11
// Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.

12
firstDate: null,

13
 
14
// Specifies exact date for calendar end. 

15
// This is alternative for weeksAfter. 

16
// Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.

17
lastDate: null,

18
 
19
// Specifies jquery element for start input field. 

20
// This is used also for single date calendar

21
startField: t("input.startDate", this),

22
 
23
// Specifies jquery element for end input field.

24
endField: t("input.endDate", this),

25
 
26
// Specifies if calendar opens as <a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a> or as inline version

27
isPopup: false,

28
 
29
// True, of current date is to be chosen, even if input field is empty.

30
selectToday: false,

31
 
32
// Specifies locale for rendering calendar and parsing input fields.

33
locale: EN,

34
 
35
// True if weekends are disabled.

36
disableWeekends: false,

37
 
38
// Space separated list of disabled dates. 

39
// Dates are presented in short date format of current locale.

40
disabledDates: null,

41
 
42
// Sets minimum range permitted in days. Shorter selections are expanded automatically.

43
minimumRange: -1,

44
 
45
// Set to true for automatically selecting full weeks.

46
selectWeek: false,

47
 
48
// Duration for fade out. 

49
// Value is passed for jQuery's .fadeOut function.

50
fadeOutDuration: 0,

51
 
52
// Function called in init and after date selection. 

53
// DateRange or Date is passed as argument and this points to calendar container.

54
callback: t.noop,

55
 
56
// Popup callback

57
popupCallback: t.noop,

58
 
59
 
60
custom<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: false,

61
scrollOptions: {

62
  sizethumb: "auto"

63
},

64
 
65
// Theme to be used. 

66
// Currently available alternative themes are rounded and transparent. 

67
// Don't forget to include the required css for the theme.

68
theme: "",

69
 
70
// Allows the user to clear dates

71
allowClearDates: false,

72
 
73
// Is date range picker?

74
isRange: false,

75
 
76
// Start/end dates

77
startDate: null,

78
endDate: null,

79
 
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)

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.

source : jquery.net

Main features:

Basic Usage:

Changelog:

Share this:

Related posts: