Compact and Highly Configurable jQuery Datepicker Plugin - Zebra_Datepicker

Compact and Highly Configurable jQuery Datepicker Plugin - Zebra_Datepicker
File Size: 89.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Zebra_Datepicker is a lightweight, cross-browser, and highly customizable jQuery Datepicker Plugin. Zebra_Datepicker works by wrapping an input element and adding a calendar button inside the wrapper and opening a datepicker on clicked.

More Examples:

Related plugins:

Features:

  • Custom date format
  • Event callback supported
  • Easy to navigate through months and years
  • Custom view modes.
  • Custom date direction
  • Support for disabled dates

Basic Usage:

1. Include jQuery library and Zebra_Datepicker plugin on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="zebra_datepicker.js"></script> 

2. Markup

<input id="datepicker-example1" type="text">

3. The CSS. You can also include default.css on your web page

.Zebra_DatePicker * {
margin: 0;
padding: 0;
color: #000
}
.Zebra_DatePicker {
position: absolute;
background: #666;
border: 3px solid #666;
display: none;
z-index: 100;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px
}
/* = GLOBALS
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker table {
border-collapse: collapse;
border-spacing: 0
}
.Zebra_DatePicker td, .Zebra_DatePicker th {
text-align: center;
padding: 5px 0
}
.Zebra_DatePicker td {
cursor: pointer
}
.Zebra_DatePicker .dp_daypicker, .Zebra_DatePicker .dp_monthpicker, .Zebra_DatePicker .dp_yearpicker {
margin-top: 3px
}
.Zebra_DatePicker .dp_daypicker td, .Zebra_DatePicker .dp_daypicker th, .Zebra_DatePicker .dp_monthpicker td, .Zebra_DatePicker .dp_yearpicker td {
background: #E8E8E8;
width: 30px;
border: 1px solid #7BACD2
}
.Zebra_DatePicker, .Zebra_DatePicker .dp_header .dp_hover, .Zebra_DatePicker .dp_footer .dp_hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
}
/* = HEADER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_header td {
color: #FFF
}
.Zebra_DatePicker .dp_header .dp_previous, .Zebra_DatePicker .dp_header .dp_next {
width: 30px
}
.Zebra_DatePicker .dp_header .dp_caption {
font-weight: bold
}
.Zebra_DatePicker .dp_header .dp_hover {
background: #222;
color: #FFF
}
.Zebra_DatePicker .dp_header .dp_blocked {
color: #888;
cursor: default
}
/* = DATEPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_daypicker th {
background: #FFCC33
}
.Zebra_DatePicker td.dp_not_in_month {
background: #F3F3F3;
color: #CDCDCD;
cursor: default
}
.Zebra_DatePicker td.dp_not_in_month_selectable {
background: #F3F3F3;
color: #CDCDCD;
cursor: pointer
}
.Zebra_DatePicker td.dp_weekend {
background: #D8D8D8
}
.Zebra_DatePicker td.dp_weekend_disabled {
color: #CCC;
cursor: default
}
.Zebra_DatePicker td.dp_selected {
background: #5A4B4B;
color: #FFF !important
}
.Zebra_DatePicker td.dp_week_number {
background: #FFCC33;
color: #555;
cursor: text;
font-style: italic
}
/* = MONTHPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_monthpicker td {
width: 33%
}
/* = YEARPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_yearpicker td {
width: 33%
}
/* = FOOTER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_footer {
margin-top: 3px
}
.Zebra_DatePicker .dp_footer td {
color: #FFF;
padding: 2px;
font-weight: bold
}
.Zebra_DatePicker .dp_footer .dp_hover {
background: #222;
color: #FFF
}
/* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PREVIOUS PROPERTIES)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker td.dp_current {
color: #C40000
}
.Zebra_DatePicker td.dp_disabled_current {
color: #E38585
}
.Zebra_DatePicker td.dp_disabled {
background: #F3F3F3;
color: #CDCDCD;
cursor: default
}
.Zebra_DatePicker td.dp_hover {
background: #482424;
color: #FFF
}
/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
button.Zebra_DatePicker_Icon {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
background: url('calendar.png') no-repeat left top;
text-indent: -9000px;
border: none;
cursor: pointer;
padding: 0;
line-height: 0;
vertical-align: top;
*display: inline;
zoom: 1
}
button.Zebra_DatePicker_Icon_Disabled {
background-image: url('calendar-disabled.png')
}
/* don't set vertical margins! */
button.Zebra_DatePicker_Icon {
margin: 0 0 0 3px
}
button.Zebra_DatePicker_Icon_Inside {
margin: 0 3px 0 0
}

4. Call the plugin

$('#datepicker-example1').Zebra_DatePicker();

5. Default plugin options.

//  setting this property to a jQuery element, will result in the date picker being always visible, the indicated
//  element being the date picker's container;
always_visible: false,

//  by default, the date picker is injected into the <body>; use this property to tell the library to inject
//  the date picker into a custom element - useful when you want the date picker to open at a specific position
//
//  must be a jQuery element
//
//  default is $('body')
container: $('body'),

//  days of the week; Sunday to Saturday
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

//  by default, the abbreviated name of a day consists of the first 2 letters from the day's full name;
//  while this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar,
//  etc. where this is not correct; for these cases, specify an array with the abbreviations to be used for
//  the 7 days of the week; leave it FALSE to use the first 2 letters of a day's name as the abbreviation.
//
//  default is FALSE
days_abbr: false,

//  the position of the date picker relative to the element it is attached to. note that, regardless of this
//  setting, the date picker's position will be automatically adjusted to fit in the viewport, if needed.
//
//  possible values are "above" and "below"
//
//  default is "above"
default_position: 'above',

//  direction of the calendar
//
//  a positive or negative integer: n (a positive integer) creates a future-only calendar beginning at n days
//  after today; -n (a negative integer); if n is 0, the calendar has no restrictions. use boolean true for
//  a future-only calendar starting with today and use boolean false for a past-only calendar ending today.
//
//  you may also set this property to an array with two elements in the following combinations:
//
//  -   first item is boolean TRUE (calendar starts today), an integer > 0 (calendar starts n days after
//      today), or a valid date given in the format defined by the "format" attribute, using English for
//      month names (calendar starts at the specified date), and the second item is boolean FALSE (the calendar
//      has no ending date), an integer > 0 (calendar ends n days after the starting date), or a valid date
//      given in the format defined by the "format" attribute, using English for month names, and which occurs
//      after the starting date (calendar ends at the specified date)
//
//  -   first item is boolean FALSE (calendar ends today), an integer < 0 (calendar ends n days before today),
//      or a valid date given in the format defined by the "format" attribute, using English for month names
//      (calendar ends at the specified date), and the second item is an integer > 0 (calendar ends n days
//      before the ending date), or a valid date given in the format defined by the "format" attribute, using
//      English for month names  and which occurs before the starting date (calendar starts at the specified
//      date)
//
//  [1, 7] - calendar starts tomorrow and ends seven days after that
//  [true, 7] - calendar starts today and ends seven days after that
//  ['2013-01-01', false] - calendar starts on January 1st 2013 and has no ending date ("format" is YYYY-MM-DD)
//  [false, '2012-01-01'] - calendar ends today and starts on January 1st 2012 ("format" is YYYY-MM-DD)
//
//  note that "disabled_dates" property will still apply!
//
//  default is 0 (no restrictions)
direction: 0,

//  an array of disabled dates in the following format: 'day month year weekday' where "weekday" is optional
//  and can be 0-6 (Saturday to Sunday); the syntax is similar to cron's syntax: the values are separated by
//  spaces and may contain * (asterisk) - (dash) and , (comma) delimiters:
//
//  ['1 1 2012'] would disable January 1, 2012;
//  ['* 1 2012'] would disable all days in January 2012;
//  ['1-10 1 2012'] would disable January 1 through 10 in 2012;
//  ['1,10 1 2012'] would disable January 1 and 10 in 2012;
//  ['1-10,20,22,24 1-3 *'] would disable 1 through 10, plus the 22nd and 24th of January through March for every year;
//  ['* * * 0,6'] would disable all Saturdays and Sundays;
//  ['01 07 2012', '02 07 2012', '* 08 2012'] would disable 1st and 2nd of July 2012, and all of August of 2012
//
//  default is FALSE, no disabled dates
//
//  DISABLING ALL DATES AND NOT SPECIFYING AT LEAST ONE ENABLED DATE WILL SEND THE SCRIPT INTO AN INFINITE
//  LOOP SEARCHING FOR AN ENABLED DATE TO DISPLAY!
disabled_dates: false,

//  an array of enabled dates in the same format as required for "disabled_dates" property.
//  to be used together with the "disabled_dates" property by first setting the "disabled_dates" property to
//  something like "[* * * *]" (which will disable everything) and the setting the "enabled_dates" property to,
//  say, "[* * * 0,6]" to enable just weekends.
enabled_dates: false,

//  week's starting day
//
//  valid values are 0 to 6, Sunday to Saturday
//
//  default is 1, Monday
first_day_of_week: 1,

//  format of the returned date
//
//  accepts the following characters for date formatting: d, D, j, l, N, w, S, F, m, M, n, Y, y borrowing
//  syntax from PHP's "date" function.
//
//  note that when setting a date format without days ('d', 'j'), the users will be able to select only years
//  and months, and when setting a format without months and days ('F', 'm', 'M', 'n', 'd', 'j'), the
//  users will be able to select only years; likewise, when setting a date format with just months ('F', 'm',
//  'M', 'n') or just years ('Y', 'y'), users will be able to select only months and years, respectively.
//
//  also note that the value of the "view" property (see below) may be overridden if it is the case: a value of
//  "days" for the "view" property makes no sense if the date format doesn't allow the selection of days.
//
//  default is Y-m-d
format: 'Y-m-d',

//  captions in the datepicker's header, for the 3 possible views: days, months, years
//
//  for each of the 3 views the following special characters may be used borrowing from PHP's "date" function's
//  syntax: m, n, F, M, y and Y; any of these will be replaced at runtime with the appropriate date fragment,
//  depending on the currently viewed date. two more special characters are also available Y1 and Y2 (upper
//  case representing years with 4 digits, lowercase representing years with 2 digits) which represent
//  "currently selected year - 7" and "currently selected year + 4" and which only make sense used in the
//  "years" view.
//
//  even though any of these special characters may be used in any of the 3 views, you should use m, n, F, M
//  for the "days" view and y, Y, Y1, Y2, y1, y2 for the "months" and "years" view or you may get unexpected
//  results!
//
//  Text and HTML can also be used, and will be rendered as it is, as in the example below (the library is
//  smart enough to not replace special characters when used in words or HTML tags):
//
//  header_captions: {
//      'days':     'Departure:<br>F, Y',
//      'months':   'Departure:<br>Y',
//      'years':    'Departure:<br>Y1 - Y2'
//  }
//
//  Default is
//
//  header_captions: {
//      'days':     'F, Y',
//      'months':   'Y',
//      'years':    'Y1 - Y2'
//  }
header_captions: {
    'days':     'F, Y',
    'months':   'Y',
    'years':    'Y1 - Y2'
},

//  HTML to be used for the previous month/next month buttons
//
//  default is ['&#171;','&#187;']
header_navigation: ['&#171;', '&#187;'],

//  should the icon for opening the datepicker be inside the element?
//  if set to FALSE, the icon will be placed to the right of the parent element, while if set to TRUE it will
//  be placed to the right of the parent element, but *inside* the element itself
//
//  default is TRUE
inside: true,

//  the caption for the "Clear" button
lang_clear_date: 'Clear date',

//  months names
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

//  by default, the abbreviated name of a month consists of the first 3 letters from the month's full name;
//  while this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar,
//  etc. where this is not correct; for these cases, specify an array with the abbreviations to be used for
//  the months of the year; leave it FALSE to use the first 3 letters of a month's name as the abbreviation.
//
//  default is FALSE
months_abbr: false,

//  the offset, in pixels (x, y), to shift the date picker's position relative to the top-right of the icon
//  that toggles the date picker or, if the icon is disabled, relative to the top-right corner of the element
//  the plugin is attached to.
//
//  note that this only applies if the position of element relative to the browser's viewport doesn't require
//  the date picker to be placed automatically so that it is visible!
//
//  default is [5, -5]
offset: [5, -5],

//  if set as a jQuery element with a Zebra_DatePicker attached, that particular date picker will use the
//  current date picker's value as starting date
//  note that the rules set in the "direction" property will still apply, only that the reference date will
//  not be the current system date but the value selected in the current date picker
//  default is FALSE (not paired with another date picker)
pair: false,

//  should the element the calendar is attached to, be read-only?
//  if set to TRUE, a date can be set only through the date picker and cannot be entered manually
//
//  default is TRUE
readonly_element: true,

//  should days from previous and/or next month be selectable when visible?
//  note that if the value of this property is set to TRUE, the value of "show_other_months" will be considered
//  TRUE regardless of the actual value!
//
//  default is FALSE
select_other_months: false,

//  should the "Clear date" button be visible?
//
//  accepted values are:
//
//  - 0 (zero) - the button for clearing a previously selected date is shown only if a previously selected date
//  already exists; this means that if the input the date picker is attached to is empty, and the user selects
//  a date for the first time, this button will not be visible; once the user picked a date and opens the date
//  picker again, this time the button will be visible.
//
//  - TRUE will make the button visible all the time
//
//  - FALSE will disable the button
//
//  default is "0" (without quotes)
show_clear_date: 0,

//  should a calendar icon be added to the elements the plugin is attached to?
//
//  default is TRUE
show_icon: true,

//  should days from previous and/or next month be visible?
//
//  default is TRUE
show_other_months: true,

//  should the "Today" button be visible?
//  setting it to anything but boolean FALSE will enable the button and will use the property's value as
//  caption for the button; setting it to FALSE will disable the button
//
//  default is "Today"
show_select_today: 'Today',

//  should an extra column be shown, showing the number of each week?
//  anything other than FALSE will enable this feature, and use the given value as column title
//  i.e. show_week_number: 'Wk' would enable this feature and have "Wk" as the column's title
//
//  default is FALSE
show_week_number: false,

//  a default date to start the date picker with
//  must be specified in the format defined by the "format" property, or it will be ignored!
//  note that this value is used only if there is no value in the field the date picker is attached to!
start_date: false,

//  should default values, in the input field the date picker is attached to, be deleted if they are not valid
//  according to "direction" and/or "disabled_dates"?
//
//  default is FALSE
strict: false,

//  how should the date picker start; valid values are "days", "months" and "years"
//  note that the date picker is always cycling days-months-years when clicking in the date picker's header,
//  and years-months-days when selecting dates (unless one or more of the views are missing due to the date's
//  format)
//
//  also note that the value of the "view" property may be overridden if the date's format requires so! (i.e.
//  "days" for the "view" property makes no sense if the date format doesn't allow the selection of days)
//
//  default is "days"
view: 'days',

//  days of the week that are considered "weekend days"
//  valid values are 0 to 6, Sunday to Saturday
//
//  default values are 0 and 6 (Saturday and Sunday)
weekend_days: [0, 6],

//  when set to TRUE, day numbers < 10 will be prefixed with 0; set to FALSE if you don't want that
//
//  default is TRUE
zero_pad: false,

//  callback function to be executed whenever the user changes the view (days/months/years), as well as when
//  the user navigates by clicking on the "next"/"previous" icons in any of the views;
//
//  the callback function called by this event takes 3 arguments - the first argument represents the current
//  view (can be "days", "months" or "years"), the second argument represents an array containing the "active"
//  elements (not disabled) from the view, as jQuery elements, allowing for easy customization and interaction
//  with particular cells in the date picker's view, while the third argument is a reference to the element
//  the date picker is attached to, as a jQuery object (deprecated - use the "this" keyword inside the callback
//  function to refer to the element the date picker is attached to)
//
//  for simplifying searching for particular dates, each element in the second argument will also have a
//  "date" data attribute whose format depends on the value of the "view" argument:
//  - YYYY-MM-DD for elements in the "days" view
//  - YYYY-MM for elements in the "months" view
//  - YYYY for elements in the "years" view
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to!
onChange: null,

//  callback function to be executed when the user clicks the "Clear" button
//  the callback function takes a single argument:
//  -   a reference to the element the date picker is attached to, as a jQuery object (deprecated - use the
//      "this" keyword inside the callback function to refer to the element the date picker is attached to)
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to!
onClear: null,

//  callback function to be executed when the date picker is shown
//  the callback function takes a single argument:
//  -   a reference to the element the date picker is attached to, as a jQuery object (deprecated - use the
//      "this" keyword inside the callback function to refer to the element the date picker is attached to)
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to!
onOpen: null,

//  callback function to be executed when the date picker is closed, but only when the "always_visible"
//  property is set to FALSE
//  the callback function takes a single argument:
//  -   a reference to the element the date picker is attached to, as a jQuery object (deprecated - use the
//      "this" keyword inside the callback function to refer to the element the date picker is attached to)
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to!
onClose: null,

//  callback function to be executed when a date is selected
//  the callback function takes 5 arguments:
//  -   the date in the format specified by the "format" attribute;
//  -   the date in YYYY-MM-DD format
//  -   the date as a JavaScript Date object
//  -   a reference to the element the date picker is attached to, as a jQuery object (deprecated - use the
//      "this" keyword inside the callback function to refer to the element the date picker is attached to)
//  -   the ISO 8601 week number of the selected date
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to!
onSelect: null

6. API methods.

var datepicker = $('element').data('Zebra_DatePicker');

// Updates configuration options at run-time, and recalculates date picker’s icon position relative to the parent element. 
// You should call this method whenever you show/hide/reposition the parent element, or alter the parent element’s dimensions;
datepicker.update();

// destroy the date picker
datepicker.destroy();

// show the date picker
datepicker.show();

// hide the date picker
datepicker.hide();

Change Logs:

v1.9.6 (2017-11-12)

  • Replaced instances of old "delegate" with "on" and minor optimizations
  • Fixed: Value of "today" is cached
  • Fixed bug where clearing a date would not return focus to the parent element
  • Fixed a bug where "00" was not considered a valid time
  • Custom valid hours, minutes and seconds can now be specified
  • Removed unused argument
  • Fixed bug where, when the timepicker was the only available view, clicking on the confirmation button was not selecting the current time
  • Fixed minor bug where the width and height of the month/year picker was sometimes one pixel less than the daypicker's

v1.9.5 (2017-06-14)

  • fixed a bug when parent elements were having the "display" property set to "block
  • fixed a bug with updating a dependent picker; 
  • added verification if custom class is defined or not, and added extra checks before traversing it; also if mootools is also present, it modifies arrays prototypes so they are not handled well with normal jquery methods if null;
  • fixed some memory leaks when destroying the plugin;
  • fixed a bug with custom classes not working anymore; 
  • optimized images size

v1.9.4 (2016-01-25)

  • Icon position can now be also set to the left of the element
  • Added possibility to easily apply custom classes to date ranges

v1.9.3 (2016-01-11)

  • Fixed a bug where "header_navigation", "lang_clear_date" and "show_select_today" properties could not be updated via the "update" method;

v1.9.2 (2015-05-01)

  • update and bug fixes

v1.9.1 (2015-04-15)

  • update

2015-04-11

  • Fixed issue with NaN instead of values for date pickers that were never shown;

2015-03-25

  • Increased zIndex value to 1200
  • Added a warning about disabling all dates

v1.8.9 (2014-11-14)

  • update

v1.8.9 (2013-11-29)

  • update

v1.8.7 (2013-11-29)

  • added a new “header_navigation” property allowing custom HTML for the next/previous months buttons; 
  • fixed a minor bug with paired date pickers;
  • minor performance tweaks;

v1.8.5 (2013-09-22)

  • Properties can now be set via data attributes
  • Added example on using data attributes

v1.8.4 (2013-08-12)

  • added a “destroy” method; thanks TeckniX;
  • date picker now disappears upon window resize; previously it would remain in the same position upon window resize, even though the parent element could be repositioned in the process; thanks hanneslinder;
  • fixed a position bug that appearing in newer versions of Firefox where Firefox sets the “display” property of <input> elements to “inline” instead of “inline-block” as do the other browsers; thanks to discotizer;

This awesome jQuery plugin is developed by stefangabos. For more Advanced Usages, please check the demo page or visit the official website.