See the examples with the date pickers having the default or the bootstrap theme.
Zebra Datepicker is a user-friendly and highly configurable date and time picker jQuery plugin. Its lightweight design makes it easy to implement on any website, and it's compatible with all major browsers. With a range of customization options, you can easily tailor the plugin to suit your needs and enhance the functionality of your forms. Whether you're looking for a simple date time picker or a more advanced one, Zebra Datepicker has you covered.
This jQuery date time picker plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached date time picker.
Users can easily jump between months and years due to the date pickers intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the date picker's options.
All dates are selectable, no restrictions.
There are a lot of things that can be configured!
$('#datepicker').Zebra_DatePicker();
All past dates, including today, are disabled.
Read more about using the direction property.
$('#datepicker').Zebra_DatePicker({
direction: 1
});
The selectable dates are in the interval starting tomorrow and ending 10 days after that.
Read more about using the direction property.
$('#datepicker').Zebra_DatePicker({
direction: [1, 10]
});
Dates in the direction property have to be written in the date picker's date format.
Read more about using the direction property.
$('#datepicker').Zebra_DatePicker({
direction: ['2012-08-01', '2012-08-12']
});
Dates in the direction property have to be written in the date picker's date format.
Read more about using the direction property.
$('#datepicker').Zebra_DatePicker({
direction: ['2012-08-01', false]
});
Allow future dates only including the current day.
All past dates are disabled.
Saturday and Sundays are disabled.
Read more about using the direction property and about disabling dates.
$('#datepicker').Zebra_DatePicker({
direction: true,
disabled_dates: ['* * * 0,6'] // all days, all months, all years as long
// as the weekday is 0 or 6 (Sunday or Saturday)
});
The second date picker's starting date is the value of the first date picker + 1
$('#datepicker-range-start').Zebra_DatePicker({
direction: true,
pair: $('#datepicker-range-end')
});
$('#datepicker-range-end').Zebra_DatePicker({
direction: 1
});
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.
If format property contains time-related characters (g, G,
h, H, i, s, a, A),
the time picker will be automatically enabled.
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, t, d,
j), the users will be able to select only years. Similarly, setting a format that
contains only time-related characters, will result in users being able to only select time.
$('#datepicker').Zebra_DatePicker({
format: 'M d, Y'
});
If format property contains time-related characters (g, G,
h, H, i, s, a, A),
the time picker will be automatically enabled.
$('#datepicker').Zebra_DatePicker({
format: 'Y-m-d H:i'
});
The date picker will not show views that are not present in format.
In the example below, the date picker will never get to the day view as there is no
day-related character in the date's format.
$('#datepicker').Zebra_DatePicker({
format: 'm Y',
});
Show the ISO 8601 week number.
$('#datepicker').Zebra_DatePicker({
show_week_number: 'Wk'
});
Start with the years view, recommended for when users need to select their birth
date.
You can always switch between views by clicking on caption in the date picker's header, between
the previous and next buttons!
Note that the date picker is always cycling days -> months -> years when clicking
on the date picker's header, and years -> months -> days when selecting dates (skipping
the views that are missing because of 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)
$('#datepicker').Zebra_DatePicker({
view: 'years'
});
Disable weekends and apply a custom class to Saturdays and Sundays.
$('#datepicker').Zebra_DatePicker({
disabled_dates: ['* * * 0,6'],
custom_classes: {
'myclass': ['* * * 0,6']
}
});
If a callback function is attached to the onChange event, it will be called 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 takes two arguments:
days, months or years)
$('#datepicker').Zebra_DatePicker({
// execute a function 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
onChange: function(view, elements) {
// on the "days" view...
if (view == 'days') {
// iterate through the active elements in the view
elements.each(function() {
// to simplify searching for particular dates, each element gets a
// "date" data attribute which is the form of:
// - YYYY-MM-DD for elements in the "days" view
// - YYYY-MM for elements in the "months" view
// - YYYY for elements in the "years" view
// so, because we're on a "days" view,
// let's find the 24th day using a regular expression
// (notice that this will apply to every 24th day
// of every month of every year)
if ($(this).data('date').match(/\-24$/))
// and highlight it!
$(this).css({
background: '#C40000',
color: '#FFF'
});
});
}
}
});
Set the always_visible property's value to a jQuery element which will act as a
container for the date picker.
Notice that in this case the element the date picker is attached
to has no icon.
$('#datepicker').Zebra_DatePicker({
always_visible: $('#container')
});
Set the rtl property to true to have the current language drawn from
right to left.
$('#datepicker').Zebra_DatePicker({
rtl: true
});
All the properties of the date picker can also be set via data-attributes.
All you have to do is take any property described in the configuration section and
prefix it with data-zdp_.
Remember that if the value of the property is an array, you will have to use double
quotes inside the square brackets and single quotes around the attribute, like in
the example below:
<input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
$('#datepicker').Zebra_DatePicker();
copyright © 2011 - stefan gabos