Press "Enter" to skip to content

A Lightweight and Cross-Browser Date/Time Picker jQuery Plugin | Zebra Datepicker

Zebra_Datepicker is a small but highly configurable jQuery extension/time picker extension that aims to enrich forms by adding date/time picker functionality to them.

This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached date picker. Users can easily switch between months and years due to the intuitive interface of the date picker.

The date selected will be entered into the input field using the chosen date format, configurable in the date picker options.

How to make use of it:

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

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/zebra_datepicker.js"></script> 

2. Create a standard input field for the date picker.

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

3. Include the jQuery Zebra Datepicker plugin’s stylesheet within the header of the webpage.

<link rel="stylesheet" href="/path/to/bootstrap/zebra_datepicker.css">

<!-- Default theme -->
<link rel="stylesheet" href="/path/to/default/zebra_datepicker.css">

<!-- Metallic theme -->
<link rel="stylesheet" href="/path/to/metallic/zebra_datepicker.css">

4. Attach a default date picker to the input field.

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

5. All 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;
//
//  setting this to boolean TRUE will keep will result in the date picker not closing when selecting a
//  date but only when the user clicks outside the date picker.
//
//  note that when a date format is used that also involves time, this property will be automatically
//  set to TRUE!
//
//  default is FALSE
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'),

//  dates that should have custom classes applied to them
//  an object in the form of
//  {
//      'myclass1': [dates_to_apply_the_custom_class_to],
//      'myclass2': [dates_to_apply_the_custom_class_to]
//  }
//  where "dates_to_apply_the_custom_class_to" is an array of dates in the same format as required for
//  "disabled_dates" property.
//
//  custom classes will be applied *only* in the day picker view and not on month/year views!
//  also note that the class name will have the "_disabled" suffix added if the day the class is applied to
//  is disabled
//
//  in order for the styles in your custom classes to be applied, make sure you are using the following syntax:
//
//  .Zebra_DatePicker .dp_daypicker td.myclass1 { .. }
//  .Zebra_DatePicker .dp_daypicker td.myclass1_disabled { .. }
//
//  default is FALSE, no custom classes
custom_classes: false,

//  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,

//  an array of selectable hours.
//  default is FALSE, all hours are selectable.
enabled_hours: false,

//  an array of selectable minutes.
//  default is FALSE, all minutes are selectable.
enabled_minutes: false,

//  an array of selectable seconds.
//  default is FALSE, all seconds are selectable.
enabled_seconds: 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, h, H,
//  g, G, i, s, a, A borrowing the 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.
//
//  setting a format that also involves time (h, H, g, G, i, s, a, A) will automatically enable the time
//  picker.
//
//  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'
},

//  the left and right white-space around the icon
//  if the "inside" property is set to TRUE then the target element's padding will be altered so that
//  the element's left or right padding (depending on the value of "icon_position") will be 2 x icon_margin
//  plus the icon's width
//  if the "inside" property is set to FALSE, then this will be the distance between the element and the icon.
//  leave it to FALSE to use the element's existing padding
//
//  default is FALSE
icon_margin: false,

//  icon's position
//  accepted values are "left" and "right"
//  if the "inside" property is set to TRUE, this will always be "right"
//
//  default is "right"
icon_position: 'right',

//  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,

//  HTML to be used for previous/next and up/down buttons, in that order
//
//  default is ['&#9664;', '&#9654;', '&#9650;', '&#9660;']
navigation: ['&#9664;', '&#9654;', '&#9650;', '&#9660;'],

//  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],

//  set whether the date picker should be shown *only* when interacting with the icon
//  note that if you also set the "show_icon" property to FALSE, you will not be able to show the date picker anymore!
//
//  default is FALSE
open_icon_only: false,

//  set this property to TRUE if you want the date picker to be shown when the parent element (if
//  "open_icon_only" is not set to FALSE) or the associated calendar icon (if "show_icon" is set to TRUE)
//  receive focus.
//
//  default is FALSE
open_on_focus: false,

//  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!
//
//  default is FALSE
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 2 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
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to,
//  as a jQuery object
//
//  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 no arguments; the "this" keyword inside the callback function refers to
//  the element the date picker is attached to, as a jQuery object
onClear: null,

//  callback function to be executed when the date picker is shown
//
//  the callback function takes no arguments; the "this" keyword inside the callback function refers to
//  the element the date picker is attached to, as a jQuery object
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 no arguments; the "this" keyword inside the callback function refers to
//  the element the date picker is attached to, as a jQuery object
onClose: null,

//  callback function to be executed when a date is selected
//  the callback function takes 3 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
//
//  the "this" keyword inside the callback function refers to the element the date picker is attached to,
//  as a jQuery object
onSelect: null

6. API strategies.

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();

// clear the selected date
datepicker.clear_date();

// set the value of the element the date picker is attached to, to the specified date
datepicker.set_date(date)

Compact and Highly Configurable jQuery Datepicker, Zebra Datepicker Plugin/Github

Zebra-Datepicker-Demo


See Demo And Download

Official Website(stefangabos): Click Here

This superior jQuery/javascript plugin is developed by stefangabos. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *