`;
});
$(tableid + ' tbody').append(trHTML);
// $(tableid).append('');
//console.log(trHTML);
// loader_stop2($(loaderid));
},
error: function (xhr, ajaxOptions, thrownError) {
// loader_stop2($(loaderid));
alert(thrownError);
}
});
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function PageDownUpEvent() {
/* $(function () {
$('#currentPage').unbind();
$('#currentPage').keydown(function (e) {
if (e.keyCode == 34) {//pageDown
currentPage = parseInt(currentPage) + 1;
} else if (e.keyCode == 33) {//page up
if (currentPage > 1)
currentPage = parseInt(currentPage) - 1;
}
});
});*/
}
function scrollbottom() {
$('.mainpanel-body').scrollTop($('.mainpanel-body')[0].scrollHeight);
}
/*combobox*/
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-widget-header)");
},
_renderMenu: function (ul, items) {
let columnname = $(this.element).attr("columnname");
var self = this,
thead;
if (this.options.showHeader) {
table = $(``);
$.each(this.options.columns, function (index, item) {
table.append('' + item.name + '');
});
table.append('');
ul.append(table);
}
$.each(items, function (index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function (ul, item) {
let columnname = $(this.element).attr("columnname");
var t = '',
result = '';
$.each(this.options.columns, function (index, column) {
t += '' + item[column.valueField ? column.valueField : index] + ''
});
result = $('')
.data('ui-autocomplete-item', item)
.append('' + t + '')
.appendTo(ul);
return result;
}
});
// Scroll
; (function ($, undefined) {
'use strict';
$.widget('ui.autocomplete', $.ui.autocomplete, {
_resizeMenu: function () {
var ul, lis, ulW, barW;
if (isNaN(this.options.maxShowItems)) { return; }
ul = this.menu.element
.scrollLeft(0).scrollTop(0) // Resetovanje pozicije scroll-a
.css({ overflowX: '', overflowY: '', width: '', maxHeight: '' }); // Restore
lis = ul.children('li').css('whiteSpace', 'nowrap');
if (lis.length > this.options.maxShowItems) {
ulW = ul.prop('clientWidth');
ul.css({
overflowX: 'hidden', overflowY: 'auto',
maxHeight: lis.eq(0).outerHeight() * this.options.maxShowItems + 1
}); // 1px za Firefox
barW = ulW - ul.prop('clientWidth');
ul.width('+=' + barW);
}
// Originalni kod iz jquery.ui.autocomplete.js _resizeMenu()
ul.outerWidth(Math.max(
ul.outerWidth() + 1,
this.element.outerWidth()
));
}
});
})(jQuery);
/*primjer sa artiklima
@section scripts {
}
*/
/**
_ _____ _ _ _
| | __ \ (_) | | | |
___ ___ | | |__) |___ ___ _ ______ _| |__ | | ___
/ __/ _ \| | _ // _ \/ __| |_ / _` | '_ \| |/ _ \
| (_| (_) | | | \ \ __/\__ \ |/ / (_| | |_) | | __/
\___\___/|_|_| \_\___||___/_/___\__,_|_.__/|_|\___|
v1.6 - jQuery plugin created by Alvaro Prieto Lauroba
Licences: MIT & GPL
Feel free to use or modify this plugin as far as my full name is kept
If you are going to use this plug-in in production environments it is
strongly recommended to use its minified version: colResizable.min.js
*/
(function ($) {
var d = $(document); //window object
var h = $("head"); //head object
var drag = null; //reference to the current grip that is being dragged
var tables = {}; //object of the already processed tables (table.id as key)
var count = 0; //internal count to create unique IDs when needed.
//common strings for packing
var ID = "id";
var PX = "px";
var SIGNATURE = "JColResizer";
var FLEX = "JCLRFlex";
//short-cuts
var I = parseInt;
var M = Math;
var ie = navigator.userAgent.indexOf('Trident/4.0') > 0;
var S;
try { S = sessionStorage; } catch (e) { } //Firefox crashes when executed as local file system
//append required CSS rules
h.append("");
/**
* Function to allow column resizing for table objects. It is the starting point to apply the plugin.
* @param {DOM node} tb - reference to the DOM table object to be enhanced
* @param {Object} options - some customization values
*/
var init = function (tb, options) {
var t = $(tb); //the table object is wrapped
t.opt = options; //each table has its own options available at anytime
t.mode = options.resizeMode; //shortcuts
t.dc = t.opt.disabledColumns;
if (t.opt.disable) return destroy(t); //the user is asking to destroy a previously colResized table
var id = t.id = t.attr(ID) || SIGNATURE + count++; //its id is obtained, if null new one is generated
t.p = t.opt.postbackSafe; //short-cut to detect postback safe
if (!t.is("table") || tables[id] && !t.opt.partialRefresh) return; //if the object is not a table or if it was already processed then it is ignored.
if (t.opt.hoverCursor !== 'e-resize') h.append(""); //if hoverCursor has been set, append the style
t.addClass(SIGNATURE).attr(ID, id).before(''); //the grips container object is added. Signature class forces table rendering in fixed-layout mode to prevent column's min-width
t.g = []; t.c = []; t.w = t.width(); t.gc = t.prev(); t.f = t.opt.fixed; //t.c and t.g are arrays of columns and grips respectively
if (options.marginLeft) t.gc.css("marginLeft", options.marginLeft); //if the table contains margins, it must be specified
if (options.marginRight) t.gc.css("marginRight", options.marginRight); //since there is no (direct) way to obtain margin values in its original units (%, em, ...)
t.cs = I(ie ? tb.cellSpacing || tb.currentStyle.borderSpacing : t.css('border-spacing')) || 2; //table cellspacing (not even jQuery is fully cross-browser)
t.b = I(ie ? tb.border || tb.currentStyle.borderLeftWidth : t.css('border-left-width')) || 1; //outer border width (again cross-browser issues)
// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
tables[id] = t; //the table object is stored using its id as key
createGrips(t); //grips are created
};
/**
* This function allows to remove any enhancements performed by this plugin on a previously processed table.
* @param {jQuery ref} t - table object
*/
var destroy = function (t) {
var id = t.attr(ID), t = tables[id]; //its table object is found
if (!t || !t.is("table")) return; //if none, then it wasn't processed
t.removeClass(SIGNATURE + " " + FLEX).gc.remove(); //class and grips are removed
delete tables[id]; //clean up data
};
/**
* Function to create all the grips associated with the table given by parameters
* @param {jQuery ref} t - table object
*/
var createGrips = function (t) {
var th = t.find(">thead>tr:first>th,>thead>tr:first>td"); //table headers are obtained
if (!th.length) th = t.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td"); //but headers can also be included in different ways
th = th.filter(":visible"); //filter invisible columns
t.cg = t.find("col"); //a table can also contain a colgroup with col elements
t.ln = th.length; //table length is stored
if (t.p && S && S[t.id]) memento(t, th); //if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
th.each(function (i) { //iterate through the table column headers
var c = $(this); //jquery wrap for the current column
var dc = t.dc.indexOf(i) != -1; //is this a disabled column?
var g = $(t.gc.append('')[0].lastChild); //add the visual node to be used as grip
g.append(dc ? "" : t.opt.gripInnerHtml).append('');
if (i == t.ln - 1) { //if the current grip is the las one
g.addClass("JCLRLastGrip"); //add a different css class to stlye it in a different way if needed
if (t.f) g.html(""); //if the table resizing mode is set to fixed, the last grip is removed since table with can not change
}
g.bind('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging
if (!dc) {
//if normal column bind the mousedown event to start dragging, if disabled then apply its css class
g.removeClass('JCLRdisabledGrip').bind('touchstart mousedown', onGripMouseDown);
} else {
g.addClass('JCLRdisabledGrip');
}
g.t = t; g.i = i; g.c = c; c.w = c.width(); //some values are stored in the grip's node data as shortcut
t.g.push(g); t.c.push(c); //the current grip and column are added to its table object
c.width(c.w).removeAttr("width"); //the width of the column is converted into pixel-based measurements
g.data(SIGNATURE, { i: i, t: t.attr(ID), last: i == t.ln - 1 }); //grip index and its table name are stored in the HTML
});
t.cg.removeAttr("width"); //remove the width attribute from elements in the colgroup
t.find('td, th').not(th).not('table th, table td').each(function () {
$(this).removeAttr('width'); //the width attribute is removed from all table cells which are not nested in other tables and dont belong to the header
});
if (!t.f) {
t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
}
syncGrips(t); //the grips are positioned according to the current table layout
//there is a small problem, some cells in the table could contain dimension values interfering with the
//width value set by this plugin. Those values are removed
};
/**
* Function to allow the persistence of columns dimensions after a browser postback. It is based in
* the HTML5 sessionStorage object, which can be emulated for older browsers using sessionstorage.js
* @param {jQuery ref} t - table object
* @param {jQuery ref} th - reference to the first row elements (only set in deserialization)
*/
var memento = function (t, th) {
var w, m = 0, i = 0, aux = [], tw;
if (th) { //in deserialization mode (after a postback)
t.cg.removeAttr("width");
if (t.opt.flush) { S[t.id] = ""; return; } //if flush is activated, stored data is removed
w = S[t.id].split(";"); //column widths is obtained
tw = w[t.ln + 1];
if (!t.f && tw) { //if not fixed and table width data available its size is restored
t.width(tw *= 1);
if (t.opt.overflow) { //if overfolw flag is set, restore table width also as table min-width
t.css('min-width', tw + PX);
t.w = tw;
}
}
for (; i < t.ln; i++) { //for each column
aux.push(100 * w[i] / w[t.ln] + "%"); //width is stored in an array since it will be required again a couple of lines ahead
th.eq(i).css("width", aux[i]); //each column width in % is restored
}
for (i = 0; i < t.ln; i++)
t.cg.eq(i).css("width", aux[i]); //this code is required in order to create an inline CSS rule with higher precedence than an existing CSS class in the "col" elements
} else { //in serialization mode (after resizing a column)
S[t.id] = ""; //clean up previous data
for (; i < t.c.length; i++) { //iterate through columns
w = t.c[i].width(); //width is obtained
S[t.id] += w + ";"; //width is appended to the sessionStorage object using ID as key
m += w; //carriage is updated to obtain the full size used by columns
}
S[t.id] += m; //the last item of the serialized string is the table's active area (width),
//to be able to obtain % width value of each columns while deserializing
if (!t.f) S[t.id] += ";" + t.width(); //if not fixed, table width is stored
}
};
/**
* Function that places each grip in the correct position according to the current table layout
* @param {jQuery ref} t - table object
*/
var syncGrips = function (t) {
t.gc.width(t.w); //the grip's container width is updated
for (var i = 0; i < t.ln; i++) { //for each column
var c = t.c[i];
t.g[i].css({ //height and position of the grip is updated according to the table layout
left: c.offset().left - t.offset().left + c.outerWidth(false) + t.cs / 2 + PX,
height: t.opt.headerOnly ? t.c[0].outerHeight(false) : t.outerHeight(false)
});
}
};
/**
* This function updates column's width according to the horizontal position increment of the grip being
* dragged. The function can be called while dragging if liveDragging is enabled and also from the onGripDragOver
* event handler to synchronize grip's position with their related columns.
* @param {jQuery ref} t - table object
* @param {number} i - index of the grip being dragged
* @param {bool} isOver - to identify when the function is being called from the onGripDragOver event
*/
var syncCols = function (t, i, isOver) {
var inc = drag.x - drag.l, c = t.c[i], c2 = t.c[i + 1];
var w = c.w + inc; var w2 = c2.w - inc; //their new width is obtained
c.width(w + PX);
t.cg.eq(i).width(w + PX);
if (t.f) { //if fixed mode
c2.width(w2 + PX);
t.cg.eq(i + 1).width(w2 + PX);
} else if (t.opt.overflow) { //if overflow is set, incriment min-width to force overflow
t.css('min-width', t.w + inc);
}
if (isOver) {
c.w = w;
c2.w = t.f ? w2 : c2.w;
}
};
/**
* This function updates all columns width according to its real width. It must be taken into account that the
* sum of all columns can exceed the table width in some cases (if fixed is set to false and table has some kind
* of max-width).
* @param {jQuery ref} t - table object
*/
var applyBounds = function (t) {
var w = $.map(t.c, function (c) { //obtain real widths
return c.width();
});
t.width(t.w = t.width()).removeClass(FLEX); //prevent table width changes
$.each(t.c, function (i, c) {
c.width(w[i]).w = w[i]; //set column widths applying bounds (table's max-width)
});
t.addClass(FLEX); //allow table width changes
};
/**
* Event handler used while dragging a grip. It checks if the next grip's position is valid and updates it.
* @param {event} e - mousemove event binded to the window object
*/
var onGripDrag = function (e) {
if (!drag) return;
var t = drag.t; //table object reference
var oe = e.originalEvent.touches;
var ox = oe ? oe[0].pageX : e.pageX; //original position (touch or mouse)
var x = ox - drag.ox + drag.l; //next position according to horizontal mouse position increment
var mw = t.opt.minWidth, i = drag.i; //cell's min width
var l = t.cs * 1.5 + mw + t.b;
var last = i == t.ln - 1; //check if it is the last column's grip (usually hidden)
var min = i ? t.g[i - 1].position().left + t.cs + mw : l; //min position according to the contiguous cells
var max = t.f ? //fixed mode?
i == t.ln - 1 ?
t.w - l :
t.g[i + 1].position().left - t.cs - mw :
Infinity; //max position according to the contiguous cells
x = M.max(min, M.min(max, x)); //apply bounding
drag.x = x; drag.css("left", x + PX); //apply position increment
if (last) { //if it is the last grip
var c = t.c[drag.i]; //width of the last column is obtained
drag.w = c.w + x - drag.l;
}
if (t.opt.liveDrag) { //if liveDrag is enabled
if (last) {
c.width(drag.w);
if (!t.f && t.opt.overflow) { //if overflow is set, incriment min-width to force overflow
t.css('min-width', t.w + x - drag.l);
} else {
t.w = t.width();
}
} else {
syncCols(t, i); //columns are synchronized
}
syncGrips(t);
var cb = t.opt.onDrag; //check if there is an onDrag callback
if (cb) { e.currentTarget = t[0]; cb(e); } //if any, it is fired
}
return false; //prevent text selection while dragging
};
/**
* Event handler fired when the dragging is over, updating table layout
* @param {event} e - grip's drag over event
*/
var onGripDragOver = function (e) {
d.unbind('touchend.' + SIGNATURE + ' mouseup.' + SIGNATURE).unbind('touchmove.' + SIGNATURE + ' mousemove.' + SIGNATURE);
$("head :last-child").remove(); //remove the dragging cursor style
if (!drag) return;
drag.removeClass(drag.t.opt.draggingClass); //remove the grip's dragging css-class
if (!(drag.x - drag.l == 0)) {
var t = drag.t;
var cb = t.opt.onResize; //get some values
var i = drag.i; //column index
var last = i == t.ln - 1; //check if it is the last column's grip (usually hidden)
var c = t.g[i].c; //the column being dragged
if (last) {
c.width(drag.w);
c.w = drag.w;
} else {
syncCols(t, i, true); //the columns are updated
}
if (!t.f) applyBounds(t); //if not fixed mode, then apply bounds to obtain real width values
syncGrips(t); //the grips are updated
if (cb) { e.currentTarget = t[0]; cb(e); } //if there is a callback function, it is fired
if (t.p && S) memento(t); //if postbackSafe is enabled and there is sessionStorage support, the new layout is serialized and stored
}
drag = null; //since the grip's dragging is over
};
/**
* Event handler fired when the grip's dragging is about to start. Its main goal is to set up events
* and store some values used while dragging.
* @param {event} e - grip's mousedown event
*/
var onGripMouseDown = function (e) {
var o = $(this).data(SIGNATURE); //retrieve grip's data
var t = tables[o.t], g = t.g[o.i]; //shortcuts for the table and grip objects
var oe = e.originalEvent.touches; //touch or mouse event?
g.ox = oe ? oe[0].pageX : e.pageX; //the initial position is kept
g.l = g.position().left;
g.x = g.l;
d.bind('touchmove.' + SIGNATURE + ' mousemove.' + SIGNATURE, onGripDrag).bind('touchend.' + SIGNATURE + ' mouseup.' + SIGNATURE, onGripDragOver); //mousemove and mouseup events are bound
h.append(""); //change the mouse cursor
g.addClass(t.opt.draggingClass); //add the dragging class (to allow some visual feedback)
drag = g; //the current grip is stored as the current dragging object
if (t.c[o.i].l) for (var i = 0, c; i < t.ln; i++) { c = t.c[i]; c.l = false; c.w = c.width(); } //if the colum is locked (after browser resize), then c.w must be updated
return false; //prevent text selection
};
/**
* Event handler fired when the browser is resized. The main purpose of this function is to update
* table layout according to the browser's size synchronizing related grips
*/
var onResize = function () {
for (var t in tables) {
if (tables.hasOwnProperty(t)) {
t = tables[t];
var i, mw = 0;
t.removeClass(SIGNATURE); //firefox doesn't like layout-fixed in some cases
if (t.f) { //in fixed mode
t.w = t.width(); //its new width is kept
for (i = 0; i < t.ln; i++) mw += t.c[i].w;
//cell rendering is not as trivial as it might seem, and it is slightly different for
//each browser. In the beginning i had a big switch for each browser, but since the code
//was extremely ugly now I use a different approach with several re-flows. This works
//pretty well but it's a bit slower. For now, lets keep things simple...
for (i = 0; i < t.ln; i++) t.c[i].css("width", M.round(1000 * t.c[i].w / mw) / 10 + "%").l = true;
//c.l locks the column, telling us that its c.w is outdated
} else { //in non fixed-sized tables
applyBounds(t); //apply the new bounds
if (t.mode == 'flex' && t.p && S) { //if postbackSafe is enabled and there is sessionStorage support,
memento(t); //the new layout is serialized and stored for 'flex' tables
}
}
syncGrips(t.addClass(SIGNATURE));
}
}
};
//bind resize event, to update grips position
$(window).bind('resize.' + SIGNATURE, onResize);
/**
* The plugin is added to the jQuery library
* @param {Object} options - an object that holds some basic customization values
*/
$.fn.extend({
colResizable: function (options) {
var defaults = {
//attributes:
resizeMode: 'fit', //mode can be 'fit', 'flex' or 'overflow'
draggingClass: 'JCLRgripDrag', //css-class used when a grip is being dragged (for visual feedback purposes)
gripInnerHtml: '', //if it is required to use a custom grip it can be done using some custom HTML
liveDrag: false, //enables table-layout updating while dragging
minWidth: 15, //minimum width value in pixels allowed for a column
headerOnly: false, //specifies that the size of the the column resizing anchors will be bounded to the size of the first row
hoverCursor: "e-resize", //cursor to be used on grip hover
dragCursor: "e-resize", //cursor to be used while dragging
postbackSafe: false, //when it is enabled, table layout can persist after postback or page refresh. It requires browsers with sessionStorage support (it can be emulated with sessionStorage.js).
flush: false, //when postbakSafe is enabled, and it is required to prevent layout restoration after postback, 'flush' will remove its associated layout data
marginLeft: null, //in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
marginRight: null, //in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
disable: false, //disables all the enhancements performed in a previously colResized table
partialRefresh: false, //can be used in combination with postbackSafe when the table is inside of an updatePanel,
disabledColumns: [], //column indexes to be excluded
//events:
onDrag: null, //callback function to be fired during the column resizing process if liveDrag is enabled
onResize: null //callback function fired when the dragging process is over
}
var options = $.extend(defaults, options);
//since now there are 3 different ways of resizing columns, I changed the external interface to make it clear
//calling it 'resizeMode' but also to remove the "fixed" attribute which was confusing for many people
options.fixed = true;
options.overflow = false;
switch (options.resizeMode) {
case 'flex': options.fixed = false; break;
case 'overflow': options.fixed = false; options.overflow = true; break;
}
return this.each(function () {
init(this, options);
});
}
});
})(jQuery);
!(function () {
"use strict";
function e(e) {
function t(t, n) {
var s,
h,
k = t == window,
y = n && void 0 !== n.message ? n.message : void 0;
if (((n = e.extend({}, e.blockUI.defaults, n || {})), !n.ignoreIfBlocked || !e(t).data("blockUI.isBlocked"))) {
if (
((n.overlayCSS = e.extend({}, e.blockUI.defaults.overlayCSS, n.overlayCSS || {})),
(s = e.extend({}, e.blockUI.defaults.css, n.css || {})),
n.onOverlayClick && (n.overlayCSS.cursor = "pointer"),
(h = e.extend({}, e.blockUI.defaults.themedCSS, n.themedCSS || {})),
(y = void 0 === y ? n.message : y),
k && p && o(window, { fadeOut: 0 }),
y && "string" != typeof y && (y.parentNode || y.jquery))
) {
var m = y.jquery ? y[0] : y,
v = {};
e(t).data("blockUI.history", v), (v.el = m), (v.parent = m.parentNode), (v.display = m.style.display), (v.position = m.style.position), v.parent && v.parent.removeChild(m);
}
e(t).data("blockUI.onUnblock", n.onUnblock);
var g,
I,
w,
U,
x = n.baseZ;
(g = e(
r || n.forceIframe
? ''
: ''
)),
(I = e(
n.theme
? ''
: ''
)),
n.theme && k
? ((U = '
'),
n.title && (U += '
' + (n.title || " ") + "
"),
(U += ''),
(U += "
"))
: n.theme
? ((U = '
'),
n.title && (U += '
' + (n.title || " ") + "
"),
(U += ''),
(U += "
"))
: (U = k
? ''
: ''),
(w = e(U)),
y && (n.theme ? (w.css(h), w.addClass("ui-widget-content")) : w.css(s)),
n.theme || I.css(n.overlayCSS),
I.css("position", k ? "fixed" : "absolute"),
(r || n.forceIframe) && g.css("opacity", 0);
var C = [g, I, w],
S = e(k ? "body" : t);
e.each(C, function () {
this.appendTo(S);
}),
n.theme && n.draggable && e.fn.draggable && w.draggable({ handle: ".ui-dialog-titlebar", cancel: "li" });
var O = f && (!e.support.boxModel || e("object,embed", k ? null : t).length > 0);
if (u || O) {
if ((k && n.allowBodyStretch && e.support.boxModel && e("html,body").css("height", "100%"), (u || !e.support.boxModel) && !k))
var E = d(t, "borderTopWidth"),
T = d(t, "borderLeftWidth"),
M = E ? "(0 - " + E + ")" : 0,
B = T ? "(0 - " + T + ")" : 0;
e.each(C, function (e, t) {
var o = t[0].style;
if (((o.position = "absolute"), 2 > e))
k
? o.setExpression("height", "Math.max(document.body.scrollHeight, document.body.offsetHeight) - (jQuery.support.boxModel?0:" + n.quirksmodeOffsetHack + ') + "px"')
: o.setExpression("height", 'this.parentNode.offsetHeight + "px"'),
k ? o.setExpression("width", 'jQuery.support.boxModel && document.documentElement.clientWidth || document.body.clientWidth + "px"') : o.setExpression("width", 'this.parentNode.offsetWidth + "px"'),
B && o.setExpression("left", B),
M && o.setExpression("top", M);
else if (n.centerY)
k &&
o.setExpression(
"top",
'(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"'
),
(o.marginTop = 0);
else if (!n.centerY && k) {
var i = n.css && n.css.top ? parseInt(n.css.top, 10) : 0,
s = "((document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + " + i + ') + "px"';
o.setExpression("top", s);
}
});
}
if ((y && (n.theme ? w.find(".ui-widget-content").append(y) : w.append(y), (y.jquery || y.nodeType) && e(y).show()), (r || n.forceIframe) && n.showOverlay && g.show(), n.fadeIn)) {
var j = n.onBlock ? n.onBlock : c,
H = n.showOverlay && !y ? j : c,
z = y ? j : c;
n.showOverlay && I._fadeIn(n.fadeIn, H), y && w._fadeIn(n.fadeIn, z);
} else n.showOverlay && I.show(), y && w.show(), n.onBlock && n.onBlock.bind(w)();
if ((i(1, t, n), k ? ((p = w[0]), (b = e(n.focusableElements, p)), n.focusInput && setTimeout(l, 20)) : a(w[0], n.centerX, n.centerY), n.timeout)) {
var W = setTimeout(function () {
k ? e.unblockUI(n) : e(t).unblock(n);
}, n.timeout);
e(t).data("blockUI.timeout", W);
}
}
}
function o(t, o) {
var s,
l = t == window,
a = e(t),
d = a.data("blockUI.history"),
c = a.data("blockUI.timeout");
c && (clearTimeout(c), a.removeData("blockUI.timeout")), (o = e.extend({}, e.blockUI.defaults, o || {})), i(0, t, o), null === o.onUnblock && ((o.onUnblock = a.data("blockUI.onUnblock")), a.removeData("blockUI.onUnblock"));
var r;
(r = l ? e("body").children().filter(".blockUI").add("body > .blockUI") : a.find(">.blockUI")),
o.cursorReset && (r.length > 1 && (r[1].style.cursor = o.cursorReset), r.length > 2 && (r[2].style.cursor = o.cursorReset)),
l && (p = b = null),
o.fadeOut
? ((s = r.length),
r.stop().fadeOut(o.fadeOut, function () {
0 === --s && n(r, d, o, t);
}))
: n(r, d, o, t);
}
function n(t, o, n, i) {
var s = e(i);
if (!s.data("blockUI.isBlocked")) {
t.each(function (e, t) {
this.parentNode && this.parentNode.removeChild(this);
}),
o && o.el && ((o.el.style.display = o.display), (o.el.style.position = o.position), (o.el.style.cursor = "default"), o.parent && o.parent.appendChild(o.el), s.removeData("blockUI.history")),
s.data("blockUI.static") && s.css("position", "static"),
"function" == typeof n.onUnblock && n.onUnblock(i, n);
var l = e(document.body),
a = l.width(),
d = l[0].style.width;
l.width(a - 1).width(a), (l[0].style.width = d);
}
}
function i(t, o, n) {
var i = o == window,
l = e(o);
if ((t || ((!i || p) && (i || l.data("blockUI.isBlocked")))) && (l.data("blockUI.isBlocked", t), i && n.bindEvents && (!t || n.showOverlay))) {
var a = "mousedown mouseup keydown keypress keyup touchstart touchend touchmove";
t ? e(document).bind(a, n, s) : e(document).unbind(a, s);
}
}
function s(t) {
if ("keydown" === t.type && t.keyCode && 9 == t.keyCode && p && t.data.constrainTabKey) {
var o = b,
n = !t.shiftKey && t.target === o[o.length - 1],
i = t.shiftKey && t.target === o[0];
if (n || i)
return (
setTimeout(function () {
l(i);
}, 10),
!1
);
}
var s = t.data,
a = e(t.target);
return a.hasClass("blockOverlay") && s.onOverlayClick && s.onOverlayClick(t), a.parents("div." + s.blockMsgClass).length > 0 ? !0 : 0 === a.parents().children().filter("div.blockUI").length;
}
function l(e) {
if (b) {
var t = b[e === !0 ? b.length - 1 : 0];
t && t.focus();
}
}
function a(e, t, o) {
var n = e.parentNode,
i = e.style,
s = (n.offsetWidth - e.offsetWidth) / 2 - d(n, "borderLeftWidth"),
l = (n.offsetHeight - e.offsetHeight) / 2 - d(n, "borderTopWidth");
t && (i.left = s > 0 ? s + "px" : "0"), o && (i.top = l > 0 ? l + "px" : "0");
}
function d(t, o) {
return parseInt(e.css(t, o), 10) || 0;
}
e.fn._fadeIn = e.fn.fadeIn;
var c = e.noop || function () { },
r = /MSIE/.test(navigator.userAgent),
u = /MSIE 6.0/.test(navigator.userAgent) && !/MSIE 8.0/.test(navigator.userAgent),
f = (document.documentMode || 0, e.isFunction(document.createElement("div").style.setExpression));
(e.blockUI = function (e) {
t(window, e);
}),
(e.unblockUI = function (e) {
o(window, e);
}),
(e.growlUI = function (t, o, n, i) {
var s = e('');
t && s.append("
" + t + "
"), o && s.append("
" + o + "
"), void 0 === n && (n = 3e3);
var l = function (t) {
(t = t || {}),
e.blockUI({
message: s,
fadeIn: "undefined" != typeof t.fadeIn ? t.fadeIn : 700,
fadeOut: "undefined" != typeof t.fadeOut ? t.fadeOut : 1e3,
timeout: "undefined" != typeof t.timeout ? t.timeout : n,
centerY: !1,
showOverlay: !1,
onUnblock: i,
css: e.blockUI.defaults.growlCSS,
});
};
l();
s.css("opacity");
s.mouseover(function () {
l({ fadeIn: 0, timeout: 3e4 });
var t = e(".blockMsg");
t.stop(), t.fadeTo(300, 1);
}).mouseout(function () {
e(".blockMsg").fadeOut(1e3);
});
}),
(e.fn.block = function (o) {
if (this[0] === window) return e.blockUI(o), this;
var n = e.extend({}, e.blockUI.defaults, o || {});
return (
this.each(function () {
var t = e(this);
(n.ignoreIfBlocked && t.data("blockUI.isBlocked")) || t.unblock({ fadeOut: 0 });
}),
this.each(function () {
"static" == e.css(this, "position") && ((this.style.position = "relative"), e(this).data("blockUI.static", !0)), (this.style.zoom = 1), t(this, o);
})
);
}),
(e.fn.unblock = function (t) {
return this[0] === window
? (e.unblockUI(t), this)
: this.each(function () {
o(this, t);
});
}),
(e.blockUI.version = 2.7),
(e.blockUI.defaults = {
message: "Učitavanje...",
title: null,
draggable: !0,
theme: !1,
css: { padding: 0, margin: 0, width: "30%", top: "40%", left: "35%", textAlign: "center", color: "#000", border: "0px solid #aaa", backgroundColor: "#fff", cursor: "wait" },
themedCSS: { width: "30%", top: "40%", left: "35%" },
overlayCSS: { backgroundColor: "#000", opacity: 0.6, cursor: "wait" },
cursorReset: "default",
growlCSS: {
width: "350px",
top: "10px",
left: "",
right: "10px",
border: "none",
padding: "5px",
opacity: 0.6,
cursor: "default",
color: "white",
backgroundColor: "#000",
"-webkit-border-radius": "10px",
"-moz-border-radius": "10px",
"border-radius": "10px",
},
iframeSrc: /^https/i.test(window.location.href || "") ? "javascript:false" : "about:blank",
forceIframe: !1,
baseZ: 1e3,
centerX: !0,
centerY: !0,
allowBodyStretch: !0,
bindEvents: !0,
constrainTabKey: !0,
fadeIn: 200,
fadeOut: 400,
timeout: 0,
showOverlay: !0,
focusInput: !0,
focusableElements: ":input:enabled:visible",
onBlock: null,
onUnblock: null,
onOverlayClick: null,
quirksmodeOffsetHack: 4,
blockMsgClass: "blockMsg",
ignoreIfBlocked: !1,
});
var p = null,
b = [];
}
"function" == typeof define && define.amd && define.amd.jQuery ? define(["jquery"], e) : e(jQuery);
})();
/*
*
* Copyright (c) 2006-2014 Sam Collett (http://www.texotela.co.uk)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version 1.4.1
* Demo: http://www.texotela.co.uk/code/jquery/numeric/
*
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(window.jQuery);
}
}(function ($) {
/*
* Allows only valid characters to be entered into input boxes.
* Note: fixes value when pasting via Ctrl+V, but not when using the mouse to paste
* side-effect: Ctrl+A does not work, though you can still use the mouse to select (or double-click to select all)
*
* @name numeric
* @param config { decimal : "." , negative : true }
* @param callback A function that runs if the number is not valid (fires onblur)
* @author Sam Collett (http://www.texotela.co.uk)
* @example $(".numeric").numeric();
* @example $(".numeric").numeric(","); // use , as separator
* @example $(".numeric").numeric({ decimal : "," }); // use , as separator
* @example $(".numeric").numeric({ altDecimal : "," }); // accept , as alternative separator, but use . as separator in output
* @example $(".numeric").numeric({ negative : false }); // do not allow negative values
* @example $(".numeric").numeric({ decimalPlaces : 2 }); // only allow 2 decimal places
* @example $(".numeric").numeric(null, callback); // use default values, pass on the 'callback' function
*
*/
$.fn.numeric = function (config, callback) {
if (typeof config === 'boolean') {
config = { decimal: config, negative: true, decimalPlaces: -1 };
}
config = config || {};
// if config.negative undefined, set to true (default is to allow negative numbers)
if (typeof config.negative == "undefined") { config.negative = true; }
// set decimal point
var decimal = (config.decimal === false) ? "" : config.decimal || ".";
// set alternative key as decimal point
var altDecimal = (config.altDecimal === false) ? "" : config.altDecimal || decimal;
// allow negatives
var negative = (config.negative === true) ? true : false;
// set decimal places
var decimalPlaces = (typeof config.decimalPlaces == "undefined") ? -1 : config.decimalPlaces;
// callback function
callback = (typeof (callback) == "function" ? callback : function () { });
// set data and methods
return this.data("numeric.decimal", decimal).data("numeric.altDecimal", altDecimal).data("numeric.negative", negative).data("numeric.callback", callback).data("numeric.decimalPlaces", decimalPlaces).keypress($.fn.numeric.keypress).keyup($.fn.numeric.keyup).blur($.fn.numeric.blur);
};
$.fn.numeric.keypress = function (e) {
// get decimal character and determine if negatives are allowed
var decimal = $.data(this, "numeric.decimal");
var negative = $.data(this, "numeric.negative");
var decimalPlaces = $.data(this, "numeric.decimalPlaces");
// get an alternative decimal separator
var altDecimal = $.data(this, "numeric.altDecimal");
// get the key that was pressed
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
// allow enter/return key (only when in an input box)
if (key == 13 && this.nodeName.toLowerCase() == "input") {
return true;
}
else if (key == 13) {
return false;
}
//dont allow #, $, %
else if (key == 35 || key == 36 || key == 37) {
return false;
}
var allow = false;
// allow Ctrl+A
if ((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) /* opera */) { return true; }
// allow Ctrl+X (cut)
if ((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) /* opera */) { return true; }
// allow Ctrl+C (copy)
if ((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) /* opera */) { return true; }
// allow Ctrl+Z (undo)
if ((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) /* opera */) { return true; }
// allow or deny Ctrl+V (paste), Shift+Ins
if ((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) /* opera */ ||
(e.shiftKey && key == 45)) { return true; }
// if a number was not pressed
if (key < 48 || key > 57) {
var value = $(this).val();
/* '-' only allowed at start and if negative numbers allowed */
if ($.inArray('-', value.split('')) !== 0 && negative && key == 45 && (value.length === 0 || parseInt($.fn.getSelectionStart(this), 10) === 0)) { return true; }
/* only one decimal separator allowed */
if (decimal && key == decimal.charCodeAt(0) && $.inArray(decimal, value.split('')) != -1) {
allow = false;
}
// check for other keys that have special purposes
if (
key != 8 /* backspace */ &&
key != 9 /* tab */ &&
key != 13 /* enter */ &&
key != 35 /* end */ &&
key != 36 /* home */ &&
key != 37 /* left */ &&
key != 39 /* right */ &&
key != 46 /* del */
) {
allow = false;
}
else {
// for detecting special keys (listed above)
// IE does not support 'charCode' and ignores them in keypress anyway
if (typeof e.charCode != "undefined") {
// special keys have 'keyCode' and 'which' the same (e.g. backspace)
if (e.keyCode == e.which && e.which !== 0) {
allow = true;
// . and delete share the same code, don't allow . (will be set to true later if it is the decimal point)
if (e.which == 46) { allow = false; }
}
// or keyCode != 0 and 'charCode'/'which' = 0
else if (e.keyCode !== 0 && e.charCode === 0 && e.which === 0) {
allow = true;
}
}
}
// if key pressed is the decimal or altDecimal and decimal is not already in the field
if (decimal && key == decimal.charCodeAt(0) || altDecimal && key == altDecimal.charCodeAt(0)) {
if ($.inArray(decimal, value.split('')) == -1) {
allow = true;
}
else {
allow = false;
}
}
}
else {
allow = true;
// remove extra decimal places
if (decimal && decimalPlaces > 0) {
var selectionStart = $.fn.getSelectionStart(this);
var selectionEnd = $.fn.getSelectionEnd(this);
var dot = $.inArray(decimal, $(this).val().split(''));
if (selectionStart === selectionEnd && dot >= 0 && selectionStart > dot && $(this).val().length > dot + decimalPlaces) {
allow = false;
}
}
}
return allow;
};
$.fn.numeric.keyup = function (e) {
var val = $(this).val();
if (val && val.length > 0) {
// get carat (cursor) position
var carat = $.fn.getSelectionStart(this);
var selectionEnd = $.fn.getSelectionEnd(this);
// get decimal character and determine if negatives are allowed
var decimal = $.data(this, "numeric.decimal");
var negative = $.data(this, "numeric.negative");
var decimalPlaces = $.data(this, "numeric.decimalPlaces");
// get an alternative decimal separator
var altDecimal = $.data(this, "numeric.altDecimal");
// prepend a 0 if necessary
if (decimal !== "" && decimal !== null) {
// find decimal point
var dot = $.inArray(decimal, val.split(''));
// if dot at start, add 0 before
if (dot === 0) {
this.value = "0" + val;
carat++;
selectionEnd++;
}
// if dot at position 1, check if there is a - symbol before it
if (dot == 1 && val.charAt(0) == "-") {
this.value = "-0" + val.substring(1);
carat++;
selectionEnd++;
}
val = this.value;
}
// if pasted in, only allow the following characters
var validChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '-', decimal];
// get length of the value (to loop through)
var length = val.length;
// loop backwards (to prevent going out of bounds)
for (var i = length - 1; i >= 0; i--) {
var ch = val.charAt(i);
// remove '-' if it is in the wrong place
if (i !== 0 && ch == "-") {
val = val.substring(0, i) + val.substring(i + 1);
}
// remove character if it is at the start, a '-' and negatives aren't allowed
else if (i === 0 && !negative && ch == "-") {
val = val.substring(1);
}
var validChar = false;
// loop through validChars
for (var j = 0; j < validChars.length; j++) {
// if it is valid, break out the loop
if (ch == validChars[j]) {
validChar = true;
break;
}
}
// if not a valid character and character is altDecimal, replace
if (!validChar && ch == altDecimal) {
val = val.substring(0, i) + decimal + val.substring(i + 1);
validChar = true;
}
// if not a valid character, or a space, remove
if (!validChar || ch == " ") {
val = val.substring(0, i) + val.substring(i + 1);
}
}
// remove extra decimal characters
var firstDecimal = $.inArray(decimal, val.split(''));
if (firstDecimal > 0) {
for (var k = length - 1; k > firstDecimal; k--) {
var chch = val.charAt(k);
// remove decimal character
if (chch == decimal) {
val = val.substring(0, k) + val.substring(k + 1);
}
}
}
// remove extra decimal places
if (decimal && decimalPlaces > 0) {
var dot = $.inArray(decimal, val.split(''));
if (dot >= 0) {
val = val.substring(0, dot + decimalPlaces + 1);
selectionEnd = Math.min(val.length, selectionEnd);
}
}
// set the value and prevent the cursor moving to the end
this.value = val;
$.fn.setSelection(this, [carat, selectionEnd]);
}
};
$.fn.numeric.blur = function () {
var decimal = $.data(this, "numeric.decimal");
var callback = $.data(this, "numeric.callback");
var negative = $.data(this, "numeric.negative");
var val = this.value;
if (val !== "") {
var re = new RegExp("^" + (negative ? "-?" : "") + "\\d+$|^" + (negative ? "-?" : "") + "\\d*" + decimal + "\\d+$");
if (!re.exec(val)) {
callback.apply(this);
}
}
};
$.fn.removeNumeric = function () {
return this.data("numeric.decimal", null).data("numeric.altDecimal", null).data("numeric.negative", null).data("numeric.callback", null).data("numeric.decimalPlaces", null).unbind("keypress", $.fn.numeric.keypress).unbind("keyup", $.fn.numeric.keyup).unbind("blur", $.fn.numeric.blur);
};
// Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini )
$.fn.getSelectionStart = function (o) {
if (o.type === "number") {
return undefined;
}
else if (o.createTextRange && document.selection) {
var r = document.selection.createRange().duplicate();
r.moveEnd('character', o.value.length);
if (r.text == '') return o.value.length;
return Math.max(0, o.value.lastIndexOf(r.text));
} else {
try { return o.selectionStart; }
catch (e) { return 0; }
}
};
// Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini )
$.fn.getSelectionEnd = function (o) {
if (o.type === "number") {
return undefined;
}
else if (o.createTextRange && document.selection) {
var r = document.selection.createRange().duplicate()
r.moveStart('character', -o.value.length)
return r.text.length
} else return o.selectionEnd
}
// set the selection, o is the object (input), p is the position ([start, end] or just start)
$.fn.setSelection = function (o, p) {
// if p is number, start and end are the same
if (typeof p == "number") { p = [p, p]; }
// only set if p is an array of length 2
if (p && p.constructor == Array && p.length == 2) {
if (o.type === "number") {
o.focus();
}
else if (o.createTextRange) {
var r = o.createTextRange();
r.collapse(true);
r.moveStart('character', p[0]);
r.moveEnd('character', p[1] - p[0]);
r.select();
}
else {
o.focus();
try {
if (o.setSelectionRange) {
o.setSelectionRange(p[0], p[1]);
}
} catch (e) {
}
}
}
};
}));
/**
* Zebra_DatePicker
*
* Zebra_DatePicker is a small, compact and highly configurable date picker / time picker jQuery plugin
*
* Read more {@link https://github.com/stefangabos/Zebra_Datepicker/ here}
*
* @author Stefan Gabos
* @version 1.9.12 (last revision: November 24, 2018)
* @copyright (c) 2011 - 2018 Stefan Gabos
* @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LESSER GENERAL PUBLIC LICENSE
* @package Zebra_DatePicker
*/
(function(factory) {
'use strict';
// AMD
if (typeof define === 'function' && define.amd) define(['jquery'], factory); // jshint ignore:line
// CommonJS
else if (typeof exports === 'object') factory(require('jquery')); // jshint ignore:line
// browser globals
else factory(jQuery);
}(function($) {
'use strict';
$.Zebra_DatePicker = function(element, options) {
// so you can tell the version number even if all you have is the minified source
this.version = '1.9.12';
var defaults = {
// 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 ; 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'),
// by default, the current date (the value of *Today*) is taken from the system where the date picker is run on.
// set this to a date in the format of 'YYYY-MM-DD' to use a different date.
//
// default is FALSE which means "the current system's date"
current_date: false,
// 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: ['Nedjelja', 'Ponedjeljak', 'Utorak', 'Srijeda', 'Četvrtak', 'Petak', 'Subota'],
// 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,
// by default, setting a format that also involves time (h, H, g, G, i, s, a, A) will automatically enable
// the time picker. if you want to use a format that involves time but you don't want the time picker, set
// this property to TRUE.
//
// default is FALSE
disable_time_picker: false,
// 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,
// allows the users to quickly navigate through months and years by clicking on the date picker's top label.
// default is TRUE.
fast_navigation: true,
// 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. if you want to use a format that involves time but you don't want the time picker, set the
// "disable_time_picker" property to TRUE.
//
// setting a time format containing "a" or "A" (12-hour format) but using "H" or "G" as the hour's format
// will result in the hour's format being changed to "h" or "g", 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: F, Y',
// 'months': 'Departure: Y',
// 'years': 'Departure: 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: 'Poništi',
// months names
months: ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Jun', 'Jul', 'Avgust', 'Septembar', 'Oktobar', 'Novembar', 'Decembar'],
// 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 ['◀', '▶', '▲', '▼']
navigation: ['◀', '▶', '▲', '▼'],
// 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,
// enables rtl text.
//
// default is FALSE
rtl: false,
// 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: 'Danas',
// 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 as a JavaScript Date object
// 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
},
// private properties
cleardate, clickables, confirm_selection, current_system_day, current_system_month, current_system_year,
custom_class_names, custom_classes = {}, datepicker, daypicker, daypicker_cells, default_day,
default_month, default_year, disabled_dates, enabled_dates, end_date, first_selectable_day,
first_selectable_month, first_selectable_year, footer, header, icon, last_selectable_day, last_selectable_month,
last_selectable_year, monthpicker, monthpicker_cells, original_attributes = {}, selected_hour, selected_minute,
selected_second, selected_ampm, view_toggler, selected_month, selected_year, selecttoday, shim,
show_select_today, start_date, timeout, timepicker, timepicker_config, touchmove = false, uniqueid = '', yearpicker,
yearpicker_cells, view, views, is_touch = false,
// are we running on an iOS powered device?
is_iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform),
// to avoid confusions, we use "plugin" to reference the current instance of the object
plugin = this,
// the jQuery version of the element
// "element" (without the $) will point to the DOM element
$element = $(element),
/**
* Constructor method. Initializes the date picker.
*
* @return void
*/
init = function(update) {
var
// the characters that may be present in the date format and that represent days, months, years, hours,
// minutes and seconds
date_chars = {
days: ['d', 'j', 'D'],
months: ['F', 'm', 'M', 'n', 't'],
years: ['o', 'Y', 'y'],
hours: ['G', 'g', 'H', 'h'],
minutes: ['i'],
seconds: ['s'],
ampm: ['A', 'a']
},
// some defaults
type = null, data, dates, k, l, format_is_valid = false;
// generate a random ID for each date picker (we'll use this if later a certain date picker is destroyed to
// remove related events)
// the code is taken from http://stackoverflow.com/a/105074
for (k = 0; k < 3; k++) uniqueid += Math.floor((1 + Math.random()) * 0x10000).toString(16);
// start by assuming there are no enabled/disabled dates
disabled_dates = [];
enabled_dates = [];
// unless we're not just updating settings
if (!update) {
// merge default settings with user-settings (
plugin.settings = $.extend({}, defaults, $.fn.Zebra_DatePicker.defaults, options);
// preserve some of element's original attributes
original_attributes.readonly = $element.attr('readonly');
original_attributes.style = $element.attr('style');
original_attributes.padding_left = parseInt($element.css('paddingLeft'), 10) || 0;
original_attributes.padding_right = parseInt($element.css('paddingRight'), 10) || 0;
// iterate through the element's data attributes (if any)
for (data in $element.data())
// if data attribute's name starts with "zdp_"
if (data.indexOf('zdp_') === 0) {
// remove the "zdp_" prefix
data = data.replace(/^zdp\_/, '');
// if such a property exists
if (undefined !== defaults[data])
// update the property's value
// (note that for the "pair" property we need to convert the property to an element)
plugin.settings[data] = (data === 'pair' ? $($element.data('zdp_' + data)) : $element.data('zdp_' + data));
}
}
// if the element should be read-only, set the "readonly" attribute
if (plugin.settings.readonly_element) $element.attr('readonly', 'readonly');
// otherwise remove it (in case it is present)
else $element.removeAttr('readonly');
// assume there's no timepicker
timepicker_config = false;
// the views the user can cycle through
views = [];
// as long as the format is invalid
while (!format_is_valid) {
// determine the views the user can cycle through, depending on the format
// that is, if the format doesn't contain the day, the user will be able to cycle only through years and months,
// whereas if the format doesn't contain months nor days, the user will only be able to select years
// iterate through all the character blocks
for (type in date_chars)
// iterate through the characters of each block
$.each(date_chars[type], function(index, character) {
var i, max;
// if current character exists in the "format" property
if (plugin.settings.format.indexOf(character) > -1)
// if user can cycle through the "days" view
if (type === 'days') views.push('days');
// if user can cycle through the "months" view
else if (type === 'months') views.push('months');
// if user can cycle through the "years" view
else if (type === 'years') views.push('years');
// if time is available in the date's format and time picker is not explicitly disabled
else if ((type === 'hours' || type === 'minutes' || type === 'seconds' || type === 'ampm') && !plugin.settings.disable_time_picker) {
// if variable is not yet initialized
if (!timepicker_config) {
// initialize the variable now
timepicker_config = {is12hour: false};
// users may access the "time" view
views.push('time');
}
// if hours are available in the date's format
if (type === 'hours') {
// store the hour's format
timepicker_config.hour_format = character;
// selectable hours (12 or 24) depending on the format
if (character === 'g' || character === 'h') {
max = 12;
// set a flag telling that the hour is 12 hour format
timepicker_config.is12hour = true;
} else max = 24;
timepicker_config.hours = [];
// iterate through valid hours
for (i = (max === 12 ? 1 : 0); i < (max === 12 ? 13 : max); i++)
// and add them to the lookup array if a user-defined list of values doesn't exist, or if the value is in that list
if (!$.isArray(plugin.settings.enabled_hours) || $.inArray(i, plugin.settings.enabled_hours) > -1) timepicker_config.hours.push(i);
// if minutes are available in the date's format
} else if (type === 'minutes') {
timepicker_config.minutes = [];
// iterate through valid minutes
for (i = 0; i < 60; i++)
// and add them to the lookup array if a user-defined list of values doesn't exist, or if the value is in that list
if (!$.isArray(plugin.settings.enabled_minutes) || $.inArray(i, plugin.settings.enabled_minutes) > -1) timepicker_config.minutes.push(i);
// if seconds are available in the date's format
} else if (type === 'seconds') {
timepicker_config.seconds = [];
// iterate through valid minutes
for (i = 0; i < 60; i++)
// and add them to the lookup array if a user-defined list of values doesn't exist, or if the value is in that list
if (!$.isArray(plugin.settings.enabled_seconds) || $.inArray(i, plugin.settings.enabled_seconds) > -1) timepicker_config.seconds.push(i);
// if am/pm is available in the date's format
} else
// pre-fill the array of selectable seconds
timepicker_config.ampm = ['am', 'pm'];
}
});
// if time format contains hours, am/pm needs to be shown but the hours are in 24-hour format
if (timepicker_config.hour_format && timepicker_config.ampm && timepicker_config.is12hour === false)
// replace the hour's format from a 24-hour format to a 12-hour format
plugin.settings.format = plugin.settings.format.replace(timepicker_config.hour_format, timepicker_config.hour_format.toLowerCase());
// otherwise, consider the format as valid
else format_is_valid = true;
}
// if invalid format (no days, no months, no years) use the default where the user is able to cycle through
// all the views, except time
if (views.length === 0) views = ['years', 'months', 'days'];
// if the starting view is not amongst the views the user can cycle through, set the correct starting view
if ($.inArray(plugin.settings.view, views) === -1) plugin.settings.view = views[views.length - 1];
// parse the rules for disabling dates and turn them into arrays of arrays
custom_class_names = [];
for (k in plugin.settings.custom_classes) if (plugin.settings.custom_classes.hasOwnProperty(k) && custom_class_names.indexOf(k) === -1) custom_class_names.push(k);
// it's the same logic for preparing the enabled/disable dates, as well as dates that have custom classes
for (l = 0; l < 2 + custom_class_names.length; l++) {
// first time we're doing disabled dates,
if (l === 0) dates = plugin.settings.disabled_dates;
// second time we're doing enabled_dates
else if (l === 1) dates = plugin.settings.enabled_dates;
// otherwise, we're doing dates that will have custom classes
else dates = plugin.settings.custom_classes[custom_class_names[l - 2]];
// if we have a non-empty array
if ($.isArray(dates) && dates.length > 0)
// iterate through the rules
$.each(dates, function() {
// split the values in rule by white space
var rules = this.split(' '), i, j, k, limits;
// there can be a maximum of 4 rules (days, months, years and, optionally, day of the week)
for (i = 0; i < 4; i++) {
// if one of the values is not available
// replace it with a * (wildcard)
if (!rules[i]) rules[i] = '*';
// if rule contains a comma, create a new array by splitting the rule by commas
// if there are no commas create an array containing the rule's string
rules[i] = (rules[i].indexOf(',') > -1 ? rules[i].split(',') : new Array(rules[i]));
// iterate through the items in the rule
for (j = 0; j < rules[i].length; j++)
// if item contains a dash (defining a range)
if (rules[i][j].indexOf('-') > -1) {
// get the lower and upper limits of the range
limits = rules[i][j].match(/^([0-9]+)\-([0-9]+)/);
// if range is valid
if (null !== limits) {
// iterate through the range
for (k = to_int(limits[1]); k <= to_int(limits[2]); k++)
// if value is not already among the values of the rule
// add it to the rule
if ($.inArray(k, rules[i]) === -1) rules[i].push(k + '');
// remove the range indicator
rules[i].splice(j, 1);
}
}
// iterate through the items in the rule
// and make sure that numbers are numbers
for (j = 0; j < rules[i].length; j++) rules[i][j] = (isNaN(to_int(rules[i][j])) ? rules[i][j] : to_int(rules[i][j]));
}
// add to the correct list of processed rules
// first time we're doing disabled dates,
if (l === 0) disabled_dates.push(rules);
// second time we're doing enabled_dates
else if (l === 1) enabled_dates.push(rules);
// otherwise, we're doing the dates to which custom classes need to be applied
else {
if (undefined === custom_classes[custom_class_names[l - 2]]) custom_classes[custom_class_names[l - 2]] = [];
custom_classes[custom_class_names[l - 2]].push(rules);
}
});
}
var
// cache the current date (which is either the system's date or a custom one, if given)
date = plugin.settings.current_date !== false ? new Date(plugin.settings.current_date) : new Date(),
// when the date picker's starting date depends on the value of another date picker, this value will be
// set by the other date picker
// this value will be used as base for all calculations (if not set, will be the same as the current
// system date)
reference_date = (!plugin.settings.reference_date ? ($element.data('zdp_reference_date') && undefined !== $element.data('zdp_reference_date') ? $element.data('zdp_reference_date') : date) : plugin.settings.reference_date),
tmp_start_date, tmp_end_date;
// reset these values here as this method might be called more than once during a date picker's lifetime
// (when the selectable dates depend on the values from another date picker)
start_date = undefined; end_date = undefined;
// extract the date parts
// also, save the current system month/day/year - we'll use them to highlight the current system date
first_selectable_month = reference_date.getMonth();
current_system_month = date.getMonth();
first_selectable_year = reference_date.getFullYear();
current_system_year = date.getFullYear();
first_selectable_day = reference_date.getDate();
current_system_day = date.getDate();
// check if the calendar has any restrictions
// calendar is future-only, starting today
// it means we have a starting date (the current system date), but no ending date
if (plugin.settings.direction === true) start_date = reference_date;
// calendar is past only, ending today
else if (plugin.settings.direction === false) {
// it means we have an ending date (the reference date), but no starting date
end_date = reference_date;
// extract the date parts
last_selectable_month = end_date.getMonth();
last_selectable_year = end_date.getFullYear();
last_selectable_day = end_date.getDate();
} else if (
// if direction is not given as an array and the value is an integer > 0
(!$.isArray(plugin.settings.direction) && is_integer(plugin.settings.direction) && to_int(plugin.settings.direction) > 0) ||
// or direction is given as an array
($.isArray(plugin.settings.direction) && (
// and first entry is a valid date
(tmp_start_date = check_date(plugin.settings.direction[0])) ||
// or a boolean TRUE
plugin.settings.direction[0] === true ||
// or an integer > 0
(is_integer(plugin.settings.direction[0]) && plugin.settings.direction[0] > 0)
) && (
// and second entry is a valid date
(tmp_end_date = check_date(plugin.settings.direction[1])) ||
// or a boolean FALSE
plugin.settings.direction[1] === false ||
// or integer >= 0
(is_integer(plugin.settings.direction[1]) && plugin.settings.direction[1] >= 0)
))
) {
// if an exact starting date was given, use that as a starting date
if (tmp_start_date) start_date = tmp_start_date;
// otherwise
else
// figure out the starting date
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
start_date = new Date(
first_selectable_year,
first_selectable_month,
first_selectable_day + (!$.isArray(plugin.settings.direction) ? to_int(plugin.settings.direction) : to_int(plugin.settings.direction[0] === true ? 0 : plugin.settings.direction[0]))
);
// re-extract the date parts
first_selectable_month = start_date.getMonth();
first_selectable_year = start_date.getFullYear();
first_selectable_day = start_date.getDate();
// if an exact ending date was given and the date is after the starting date, use that as a ending date
if (tmp_end_date && +tmp_end_date >= +start_date) end_date = tmp_end_date;
// if have information about the ending date
else if (!tmp_end_date && plugin.settings.direction[1] !== false && $.isArray(plugin.settings.direction))
// figure out the ending date
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
end_date = new Date(
first_selectable_year,
first_selectable_month,
first_selectable_day + to_int(plugin.settings.direction[1])
);
// if a valid ending date exists
if (end_date) {
// extract the date parts
last_selectable_month = end_date.getMonth();
last_selectable_year = end_date.getFullYear();
last_selectable_day = end_date.getDate();
}
} else if (
// if direction is not given as an array and the value is an integer < 0
(!$.isArray(plugin.settings.direction) && is_integer(plugin.settings.direction) && to_int(plugin.settings.direction) < 0) ||
// or direction is given as an array
($.isArray(plugin.settings.direction) && (
// and first entry is boolean FALSE
plugin.settings.direction[0] === false ||
// or an integer < 0
(is_integer(plugin.settings.direction[0]) && plugin.settings.direction[0] < 0)
) && (
// and second entry is a valid date
(tmp_start_date = check_date(plugin.settings.direction[1])) ||
// or an integer >= 0
(is_integer(plugin.settings.direction[1]) && plugin.settings.direction[1] >= 0)
))
) {
// figure out the ending date
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
end_date = new Date(
first_selectable_year,
first_selectable_month,
first_selectable_day + (!$.isArray(plugin.settings.direction) ? to_int(plugin.settings.direction) : to_int(plugin.settings.direction[0] === false ? 0 : plugin.settings.direction[0]))
);
// re-extract the date parts
last_selectable_month = end_date.getMonth();
last_selectable_year = end_date.getFullYear();
last_selectable_day = end_date.getDate();
// if an exact starting date was given, and the date is before the ending date, use that as a starting date
if (tmp_start_date && +tmp_start_date < +end_date) start_date = tmp_start_date;
// if have information about the starting date
else if (!tmp_start_date && $.isArray(plugin.settings.direction))
// figure out the staring date
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
start_date = new Date(
last_selectable_year,
last_selectable_month,
last_selectable_day - to_int(plugin.settings.direction[1])
);
// if a valid starting date exists
if (start_date) {
// extract the date parts
first_selectable_month = start_date.getMonth();
first_selectable_year = start_date.getFullYear();
first_selectable_day = start_date.getDate();
}
// if there are disabled dates
} else if ($.isArray(plugin.settings.disabled_dates) && plugin.settings.disabled_dates.length > 0)
// iterate through the rules for disabling dates
for (var interval in disabled_dates)
// only if there is a rule that disables *everything*
if ($.inArray('*', disabled_dates[interval][0]) > -1 && $.inArray('*', disabled_dates[interval][1]) > -1 && $.inArray('*', disabled_dates[interval][2]) > -1 && $.inArray('*', disabled_dates[interval][3]) > -1) {
var tmpDates = [];
// iterate through the rules for enabling dates
// looking for the minimum/maximum selectable date (if it's the case)
$.each(enabled_dates, function() {
var rule = this;
// if the rule doesn't apply to all years
if (rule[2][0] !== '*')
// format date and store it in our stack
tmpDates.push(parseInt(
rule[2][0] +
(rule[1][0] === '*' ? '12' : str_pad(rule[1][0], 2)) +
(rule[0][0] === '*' ? (rule[1][0] === '*' ? '31' : new Date(rule[2][0], rule[1][0], 0).getDate()) : str_pad(rule[0][0], 2)), 10));
});
// sort dates ascending
tmpDates.sort();
// if we have any rules
if (tmpDates.length > 0) {
// get date parts
var matches = (tmpDates[0] + '').match(/([0-9]{4})([0-9]{2})([0-9]{2})/);
// assign the date parts to the appropriate variables
first_selectable_year = parseInt(matches[1], 10);
first_selectable_month = parseInt(matches[2], 10) - 1;
first_selectable_day = parseInt(matches[3], 10);
}
// don't look further
break;
}
// if first selectable date exists but is disabled, find the actual first selectable date
if (is_disabled(first_selectable_year, first_selectable_month, first_selectable_day)) {
// loop until we find the first selectable year
while (is_disabled(first_selectable_year))
// if calendar is past-only,
if (!start_date) {
// decrement the year
first_selectable_year--;
// because we've changed years, reset the month to December
first_selectable_month = 11;
// otherwise
} else {
// increment the year
first_selectable_year++;
// because we've changed years, reset the month to January
first_selectable_month = 0;
}
// loop until we find the first selectable month
while (is_disabled(first_selectable_year, first_selectable_month)) {
// if calendar is past-only
if (!start_date) {
// decrement the month
first_selectable_month--;
// because we've changed months, reset the day to the last day of the month
first_selectable_day = new Date(first_selectable_year, first_selectable_month + 1, 0).getDate();
// otherwise
} else {
// increment the month
first_selectable_month++;
// because we've changed months, reset the day to the first day of the month
first_selectable_day = 1;
}
// if we moved to a following year
if (first_selectable_month > 11) {
// increment the year
first_selectable_year++;
// reset the month to January
first_selectable_month = 0;
// because we've changed months, reset the day to the first day of the month
first_selectable_day = 1;
// if we moved to a previous year
} else if (first_selectable_month < 0) {
// decrement the year
first_selectable_year--;
// reset the month to December
first_selectable_month = 11;
// because we've changed months, reset the day to the last day of the month
first_selectable_day = new Date(first_selectable_year, first_selectable_month + 1, 0).getDate();
}
}
// loop until we find the first selectable day
while (is_disabled(first_selectable_year, first_selectable_month, first_selectable_day)) {
// if calendar is past-only, decrement the day
if (!start_date) first_selectable_day--;
// otherwise, increment the day
else first_selectable_day++;
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
date = new Date(first_selectable_year, first_selectable_month, first_selectable_day);
// re-extract date parts from the normalized date
// as we use them in the current loop
first_selectable_year = date.getFullYear();
first_selectable_month = date.getMonth();
first_selectable_day = date.getDate();
}
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
date = new Date(first_selectable_year, first_selectable_month, first_selectable_day);
// re-extract date parts from the normalized date
// as we use them in the current loop
first_selectable_year = date.getFullYear();
first_selectable_month = date.getMonth();
first_selectable_day = date.getDate();
}
// if "start_date" is given as JavaScript Date object...
if (plugin.settings.start_date && typeof plugin.settings.start_date === 'object' && plugin.settings.start_date instanceof Date)
// ...convert it the a properly formatted string
plugin.settings.start_date = format(plugin.settings.start_date)
// get the default date, from the element, and check if it represents a valid date, according to the required format
var default_date = check_date($element.val() || (plugin.settings.start_date ? plugin.settings.start_date : ''));
// if there is a default date, date picker is in "strict" mode, and the default date is disabled
if (default_date && plugin.settings.strict && is_disabled(default_date.getFullYear(), default_date.getMonth(), default_date.getDate()))
// clear the value of the parent element
$element.val('');
// updates value for the date picker whose starting date depends on the selected date (if any)
if (!update && (undefined !== start_date || undefined !== default_date))
update_dependent(undefined !== default_date ? default_date : start_date);
// if date picker is not always visible in a container
if (!(plugin.settings.always_visible instanceof jQuery)) {
// if we're just creating the date picker
if (!update) {
// if a calendar icon should be added to the element the plugin is attached to, create the icon now
if (plugin.settings.show_icon) {
// strangely, in Firefox 21+ (or maybe even earlier) input elements have their "display" property
// set to "inline" instead of "inline-block" as do all the other browsers.
// because this behavior brakes the positioning of the icon, we'll set the "display" property to
// "inline-block" before anything else;
if (browser.name === 'firefox' && $element.is('input[type="text"]') && $element.css('display') === 'inline') $element.css('display', 'inline-block');
// we create a wrapper for the parent element so that we can later position the icon
// also, make sure the wrapper inherits positioning properties of the target element
var marginTop = parseInt($element.css('marginTop'), 10) || 0,
marginRight = parseInt($element.css('marginRight'), 10) || 0,
marginBottom = parseInt($element.css('marginBottom'), 10) || 0,
marginLeft = parseInt($element.css('marginLeft'), 10) || 0,
icon_wrapper = $('').css({
display: $element.css('display'),
position: $element.css('position') === 'static' ? 'relative' : $element.css('position'),
float: $element.css('float'),
top: $element.css('top'),
right: $element.css('right'),
bottom: $element.css('bottom'),
left: $element.css('left'),
marginTop: marginTop < 0 ? marginTop : 0,
marginRight: marginRight < 0 ? marginRight : 0,
marginBottom: marginBottom < 0 ? marginBottom : 0,
marginLeft: marginLeft < 0 ? marginLeft : 0,
paddingTop: marginTop,
paddingRight: marginRight,
paddingBottom: marginBottom,
paddingLeft: marginLeft
});
// if parent element has its "display" property set to "block"
// the wrapper has to have its "width" set
if ($element.css('display') === 'block') icon_wrapper.css('width', $element.outerWidth(true));
// put wrapper around the element
// also, reset the target element's positioning properties
$element.wrap(icon_wrapper).css({
position: 'relative',
float: 'none',
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0
});
// create the actual calendar icon (show a disabled icon if the element is disabled)
icon = $('');
// a reference to the icon, as a global property
plugin.icon = icon;
// the date picker will open when clicking both the icon and the element the plugin is attached to
// (or the icon only, if set so)
clickables = plugin.settings.open_icon_only ? icon : icon.add($element);
// if calendar icon is not visible, the date picker will open when clicking the element
} else clickables = $element;
// attach the "click" and, if required, the "focus" event to the clickable elements (icon and/or element)
clickables.on('click.Zebra_DatePicker_' + uniqueid + (plugin.settings.open_on_focus ? ' focus.Zebra_DatePicker_' + uniqueid : ''), function() {
// if date picker is not visible and element is not disabled
if (datepicker.hasClass('dp_hidden') && !$element.attr('disabled'))
// if not a touch-enabled device or the element is read-only, show the date picker right away
if (!(is_touch && !plugin.settings.readonly_element)) plugin.show();
// if touch-enabled device and the element is not read-only
else {
// stop a previously started timeout, if any
clearTimeout(timeout);
// wait for 600 milliseconds for the virtual keyboard to appear and show the date picker afterwards
timeout = setTimeout(function() {
plugin.show()
}, 600);
}
});
// attach a keydown event to the clickable elements (icon and/or element)
clickables.on('keydown.Zebra_DatePicker_' + uniqueid, function(e) {
// if "Tab" key was pressed and the date picker is visible
if (e.keyCode === 9 && !datepicker.hasClass('dp_hidden'))
// hide the date picker
plugin.hide();
});
// if users can manually enter dates and a pair date element exists
if (!plugin.settings.readonly_element && plugin.settings.pair)
// whenever the element looses focus
$element.on('blur.Zebra_DatePicker_' + uniqueid, function() {
var date;
// if a valid date was entered, update the paired date picker
if ((date = check_date($(this).val())) && !is_disabled(date.getFullYear(), date.getMonth(), date.getDate())) update_dependent(date);
});
// if icon exists, inject it into the DOM, right after the parent element (and inside the wrapper)
if (undefined !== icon) icon.insertAfter($element);
}
// if calendar icon exists
if (undefined !== icon) {
// needed when updating: remove any inline style set previously by library,
// so we get the right values below
icon.attr('style', '');
var
// get element's width and height (including margins)
element_width = $element.outerWidth(),
element_height = $element.outerHeight(),
// get icon's width, height and margins
icon_width = icon.outerWidth(),
icon_height = icon.outerHeight();
// set icon's vertical position
icon.css('top', (element_height - icon_height) / 2);
// if icon is to be placed *inside* the element
// position the icon accordingly
if (plugin.settings.inside)
// if icon is to be placed on the right
if (plugin.settings.icon_position === 'right') {
// place the icon to the right, respecting the element's right padding
icon.css('right', plugin.settings.icon_margin !== false ? plugin.settings.icon_margin : original_attributes.padding_right);
// also, adjust the element's right padding
$element.css('paddingRight', ((plugin.settings.icon_margin !== false ? plugin.settings.icon_margin : original_attributes.padding_right) * 2) + icon_width);
// if icon is to be placed on the left
} else {
// place the icon to the left, respecting the element's left padding
icon.css('left', plugin.settings.icon_margin !== false ? plugin.settings.icon_margin : original_attributes.padding_left);
// also, adjust the element's left padding
$element.css('paddingLeft', ((plugin.settings.icon_margin !== false ? plugin.settings.icon_margin : original_attributes.padding_left) * 2) + icon_width);
}
// if icon is to be placed to the right of the element
// position the icon accordingly
else icon.css('left', element_width + (plugin.settings.icon_margin !== false ? plugin.settings.icon_margin : original_attributes.padding_left));
// assume the datepicker is not disabled
icon.removeClass('Zebra_DatePicker_Icon_Disabled');
// if element the datepicker is attached to became disabled, disable the calendar icon, too
if ($element.attr('disabled') === 'disabled') icon.addClass('Zebra_DatePicker_Icon_Disabled');
}
}
// if the "Today" button is to be shown and it makes sense to be shown
// (the "days" view is available and "today" is not a disabled date)
show_select_today = (plugin.settings.show_select_today !== false && $.inArray('days', views) > -1 && !is_disabled(current_system_year, current_system_month, current_system_day) ? plugin.settings.show_select_today : false);
// if we just needed to recompute the things above
if (update) {
// make sure we update these strings, in case they've changed
$('.dp_previous', datepicker).html(plugin.settings.navigation[0]);
$('.dp_next', datepicker).html(plugin.settings.navigation[1]);
$('.dp_time_controls_increase .dp_time_control', datepicker).html(plugin.settings.navigation[2]);
$('.dp_time_controls_decrease .dp_time_control', datepicker).html(plugin.settings.navigation[3]);
$('.dp_clear', datepicker).html(plugin.settings.lang_clear_date);
$('.dp_today', datepicker).html(plugin.settings.show_select_today);
// don't go further
return;
}
// update icon/date picker position on resize and/or changing orientation
$(window).on('resize.Zebra_DatePicker_' + uniqueid + ', orientationchange.Zebra_DatePicker_' + uniqueid, function() {
// hide the date picker
plugin.hide();
});
// generate the container that will hold everything
var html = '' +
'
';
// create a jQuery object out of the HTML above and create a reference to it
datepicker = $(html);
// create references to the different parts of the date picker
header = $('table.dp_header', datepicker);
daypicker = $('table.dp_daypicker', datepicker);
monthpicker = $('table.dp_monthpicker', datepicker);
yearpicker = $('table.dp_yearpicker', datepicker);
timepicker = $('table.dp_timepicker', datepicker);
footer = $('table.dp_footer', datepicker);
selecttoday = $('td.dp_today', footer);
cleardate = $('td.dp_clear', footer);
view_toggler = $('td.dp_view_toggler', footer);
confirm_selection = $('td.dp_confirm', footer);
// if date picker is not always visible in a container
if (!(plugin.settings.always_visible instanceof jQuery))
// inject the container into the DOM
plugin.settings.container.append(datepicker);
// otherwise, if element is not disabled
else if (!$element.attr('disabled')) {
// inject the date picker into the designated container element
plugin.settings.always_visible.append(datepicker);
// and make it visible right away
plugin.show();
}
// add the mouseover/mousevents to all to the date picker's cells
// except those that are not selectable
datepicker
.on('mouseover', 'td:not(.dp_disabled)', function() {
$(this).addClass('dp_hover');
})
.on('mouseout', 'td:not(.dp_disabled)', function() {
$(this).removeClass('dp_hover');
});
// prevent text selection (prevent accidental select when user clicks too fast)
disable_text_select(datepicker);
// event for when clicking the "previous" button
// (directions are inverted when in RTL mode)
$(plugin.settings.rtl ? '.dp_next' : '.dp_previous', header).on('click', function() {
// if view is "months"
// decrement year by one
if (view === 'months') selected_year--;
// if view is "years"
// decrement years by 12
else if (view === 'years') selected_year -= 12;
// if view is "days"
// decrement the month and
// if month is out of range
else if (--selected_month < 0) {
// go to the last month of the previous year
selected_month = 11;
selected_year--;
}
// generate the appropriate view
manage_views();
});
// if "fast_navigation" is enabled, allow clicking the upper label for quickly navigating through months and years
if (plugin.settings.fast_navigation)
// attach a click event to the caption in header
$('.dp_caption', header).on('click', function() {
// if current view is "days", take the user to the next view, depending on the format
if (view === 'days') view = ($.inArray('months', views) > -1 ? 'months' : ($.inArray('years', views) > -1 ? 'years' : 'days'));
// if current view is "months", take the user to the next view, depending on the format
else if (view === 'months') view = ($.inArray('years', views) > -1 ? 'years' : ($.inArray('days', views) > -1 ? 'days' : 'months'));
// if current view is "years", take the user to the next view, depending on the format
else view = ($.inArray('days', views) > -1 ? 'days' : ($.inArray('months', views) > -1 ? 'months' : 'years'));
// generate the appropriate view
manage_views();
});
// event for when clicking the "next" button
// (directions are inverted when in RTL mode)
$(plugin.settings.rtl ? '.dp_previous' : '.dp_next', header).on('click', function() {
// if view is "months"
// increment year by 1
if (view === 'months') selected_year++;
// if view is "years"
// increment years by 12
else if (view === 'years') selected_year += 12;
// if view is "days"
// increment the month and
// if month is out of range
else if (++selected_month === 12) {
// go to the first month of the next year
selected_month = 0;
selected_year++;
}
// generate the appropriate view
manage_views();
});
// attach a click event for the cells in the day picker
daypicker.on('click', 'td:not(.dp_disabled)', function() {
var matches;
// if other months are selectable and currently clicked cell contains a class with the cell's date
if (plugin.settings.select_other_months && $(this).attr('class') && null !== (matches = $(this).attr('class').match(/date\_([0-9]{4})(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])/)))
// use the stored date
select_date(matches[1], matches[2] - 1, matches[3], 'days', $(this));
// put selected date in the element the plugin is attached to, and hide the date picker
else select_date(selected_year, selected_month, to_int($(this).html()), 'days', $(this));
});
// attach a click event for the cells in the month picker
monthpicker.on('click', 'td:not(.dp_disabled)', function() {
// get the month we've clicked on
var matches = $(this).attr('class').match(/dp\_month\_([0-9]+)/);
// set the selected month
selected_month = to_int(matches[1]);
// if user can select only years and months
if ($.inArray('days', views) === -1)
// put selected date in the element the plugin is attached to, and hide the date picker
select_date(selected_year, selected_month, 1, 'months', $(this));
else {
// direct the user to the "days" view
view = 'days';
// if date picker is always visible
// empty the value in the text box the date picker is attached to
if (plugin.settings.always_visible) $element.val('');
// generate the appropriate view
manage_views();
}
});
// attach a click event for the cells in the year picker
yearpicker.on('click', 'td:not(.dp_disabled)', function() {
// set the selected year
selected_year = to_int($(this).html());
// if user can select only years
if ($.inArray('months', views) === -1)
// put selected date in the element the plugin is attached to, and hide the date picker
select_date(selected_year, 1, 1, 'years', $(this));
else {
// direct the user to the "months" view
view = 'months';
// if date picker is always visible
// empty the value in the text box the date picker is attached to
if (plugin.settings.always_visible) $element.val('');
// generate the appropriate view
manage_views();
}
});
// function to execute when the "Today" button is clicked
selecttoday.on('click', function(e) {
// date might have changed since we opened the date picker, so always use the current date
var date = plugin.settings.current_date !== false ? new Date(plugin.settings.current_date) : new Date();
e.preventDefault();
// select the current date
select_date(date.getFullYear(), date.getMonth(), date.getDate(), 'days', $('.dp_current', daypicker));
});
// function to execute when the "Clear" button is clicked
cleardate.on('click', function(e) {
e.preventDefault();
// clear the element's value
$element.val('');
// reset these values
default_day = null; default_month = null; default_year = null;
// if date picker is not always visible
if (!plugin.settings.always_visible) {
// reset these values
selected_month = null; selected_year = null;
// if date picker is always visible
} else
// remove the "selected" class from all cells that have it
$('td.dp_selected', datepicker).removeClass('dp_selected');
// give the focus back to the parent element
$element.focus();
// hide the date picker
plugin.hide();
// if a callback function exists for when clearing a date
if (plugin.settings.onClear && typeof plugin.settings.onClear === 'function')
// execute the callback function and pass as argument the element the plugin is attached to
plugin.settings.onClear.call($element);
});
// function to execute when the clock/calendar button is clicked in the footer
view_toggler.on('click', function() {
// if we're not in the time picker mode
if (view !== 'time') {
// switch to time picker mode
view = 'time';
manage_views();
// if we are already in the time picker mode,
// switch back to the standard view
// (let the click on the header's caption handle things)
} else $('.dp_caption', header).trigger('click');
});
// when the "confirm selection" button is clicked, hide the date picker
// (visible only when in the "time" view)
confirm_selection.on('click', function() {
// as users may click this before making any adjustments to time, simulate time adjustment so that
// a value is selected
$('.dp_time_controls_increase td', timepicker).trigger('click');
$('.dp_time_controls_decrease td', timepicker).trigger('click');
// if a callback function exists for when selecting a date
if (plugin.settings.onSelect && typeof plugin.settings.onSelect === 'function') {
var js_date = new Date(selected_year, selected_month, default_day,
(timepicker_config && timepicker_config.hours ? selected_hour + (timepicker_config.ampm && ((selected_ampm === 'pm' && selected_hour < 12) || (selected_ampm === 'am' && selected_hour === 12)) ? 12 : 0) : 0),
(timepicker_config && timepicker_config.minutes ? selected_minute : 0),
(timepicker_config && timepicker_config.seconds ? selected_second : 0)
);
// execute the callback function
// make "this" inside the callback function refer to the element the date picker is attached to, as a jQuery object
plugin.settings.onSelect.call($element, format(js_date), selected_year + '-' + str_pad(selected_month + 1, 2) + '-' + str_pad(default_day, 2) + (timepicker_config ? ' ' + str_pad(js_date.getHours(), 2) + ':' + str_pad(js_date.getMinutes(), 2) + ':' + str_pad(js_date.getSeconds(), 2) : ''), js_date);
}
plugin.hide();
});
// handle value increases on the time picker
datepicker.on('click', '.dp_time_controls_increase td, .dp_time_controls_decrease td', function() {
var
// are we increasing or decreasing values?
increase = $(this).parent('.dp_time_controls_increase').length > 0,
// figure out what we're increasing (hour, minutes, seconds, ampm)
matches = $(this).attr('class').match(/dp\_time\_([^\s]+)/i),
value_container = $('.dp_time_segments .dp_time_' + matches[1] + (matches[1] !== 'ampm' ? 's' : ''), timepicker),
// the current value (strip the zeros in front)
value = value_container.text().toLowerCase(),
// the array with allowed values
lookup = timepicker_config[matches[1] + (matches[1] !== 'ampm' ? 's' : '')],
// the current value's position in the array of allowed values
current_value_position = $.inArray(matches[1] !== 'ampm' ? parseInt(value, 10) : value, lookup),
// the next value's position in the lookup array
next_value_position = current_value_position === -1 ? 0 : (increase ? (current_value_position + 1 >= lookup.length ? 0 : current_value_position + 1) : (current_value_position - 1 < 0 ? lookup.length - 1 : current_value_position - 1)),
default_date;
// increase/decrease the required value according to the values in the lookup array
if (matches[1] === 'hour') selected_hour = lookup[next_value_position];
else if (matches[1] === 'minute') selected_minute = lookup[next_value_position];
else if (matches[1] === 'second') selected_second = lookup[next_value_position];
else selected_ampm = lookup[next_value_position];
// if a default day is not available and the "start_date" property is set
if (!default_day && plugin.settings.start_date) {
// check if "start_date" is valid according to the format
default_date = check_date(plugin.settings.start_date);
// ...and if it is, extract the day from there
if (default_date) default_day = default_date.getDate();
}
// if still no value, use the first selectable day
if (!default_day) default_day = first_selectable_day;
// set the new value
value_container.text(str_pad(lookup[next_value_position], 2).toUpperCase());
// update the value in the element
select_date(selected_year, selected_month, default_day);
});
// if date picker is not always visible in a container
if (!(plugin.settings.always_visible instanceof jQuery)) {
// if we dragged the screen
$(document).on('touchmove.Zebra_DatePicker_' + uniqueid, function() {
// set this flag to TRUE
touchmove = true;
});
// whenever anything is clicked on the page
$(document).on('mousedown.Zebra_DatePicker_' + uniqueid + ' touchend.Zebra_DatePicker_' + uniqueid, function(e) {
// if this happened on a touch-enabled device and it represents the end of finger movement instead of a tap
// set the "touchmove" flag to FALSE and don't go further
if (e.type === 'touchend' && touchmove) {
// we now know that this is a touch enabled device
is_touch = true;
return (touchmove = false);
}
// always set this to FALSE here
touchmove = false;
// if
if (
// date picker is visible
!datepicker.hasClass('dp_hidden') &&
(
// date picker opens only on interacting with the icon, icon exists, but it is not the clicked element
(plugin.settings.open_icon_only && plugin.icon && $(e.target).get(0) !== plugin.icon.get(0)) ||
// date picker doesn't open only on interacting with the icon but the clicked element it's not the icon nor the parent element
(!plugin.settings.open_icon_only && $(e.target).get(0) !== $element.get(0) && (!plugin.icon || $(e.target).get(0) !== plugin.icon.get(0)))
) &&
// and the click is not inside the calendar
$(e.target).parents().filter('.Zebra_DatePicker').length === 0
// hide the date picker
) plugin.hide(true);
});
// whenever a key is pressed on the page
$(document).on('keyup.Zebra_DatePicker_' + uniqueid, function(e) {
// if the date picker is visible
// and the pressed key is ESC
// hide the date picker
if (!datepicker.hasClass('dp_hidden') && e.which === 27) plugin.hide();
});
}
// last thing is to pre-render some of the date picker right away
manage_views();
},
/**
* Checks if a string represents a valid date according to the format defined by the "format" property.
*
* @param string str_date A string representing a date, formatted accordingly to the "format" property.
* For example, if "format" is "Y-m-d" the string should look like "2011-06-01"
*
* @return mixed Returns a JavaScript Date object if string represents a valid date according
* formatted according to the "format" property, or FALSE otherwise.
*
* @access private
*/
check_date = function(str_date) {
// treat argument as a string
str_date += '';
// if value is given
if ($.trim(str_date) !== '') {
var
// prepare the format by removing white space from it
// and also escape characters that could have special meaning in a regular expression
format = escape_regexp(plugin.settings.format),
// allowed characters in date's format
format_chars = ['d', 'D', 'j', 'l', 'N', 'S', 'w', 'F', 'm', 'M', 'n', 'Y', 'y', 'G', 'g', 'H', 'h', 'i', 's', 'a', 'A'],
// "matches" will contain the characters defining the date's format
matches = [],
// "regexp" will contain the regular expression built for each of the characters used in the date's format
regexp = [],
// "position" will contain the position of the character found in the date's format
position = null,
// "segments" will contain the matches of the regular expression
segments = null,
date, i;
// iterate through the allowed characters in date's format
for (i = 0; i < format_chars.length; i++)
// if character is found in the date's format
if ((position = format.indexOf(format_chars[i])) > -1)
// save it, alongside the character's position
matches.push({
character: format_chars[i],
position: position
});
// sort characters defining the date's format based on their position, ascending
matches.sort(function(a, b) { return a.position - b.position; });
// iterate through the characters defining the date's format
$.each(matches, function(index, match) {
// add to the array of regular expressions, based on the character
switch (match.character) {
case 'd': regexp.push('0[1-9]|[12][0-9]|3[01]'); break;
case 'D': regexp.push('[a-z]{3}'); break;
case 'j': regexp.push('[1-9]|[12][0-9]|3[01]'); break;
case 'l': regexp.push('[a-z\u00C0-\u024F]+'); break;
case 'N': regexp.push('[1-7]'); break;
case 'S': regexp.push('st|nd|rd|th'); break;
case 'w': regexp.push('[0-6]'); break;
case 'F': regexp.push('[a-z]+'); break;
case 'm': regexp.push('0[1-9]|1[012]'); break;
case 'M': regexp.push('[a-z]{3}'); break;
case 'n': regexp.push('[1-9]|1[012]'); break;
case 'Y': regexp.push('[0-9]{4}'); break;
case 'y': regexp.push('[0-9]{2}'); break;
case 'G': regexp.push('[1-9]|1[0-9]|2[0123]'); break;
case 'g': regexp.push('[0-9]|1[012]'); break;
case 'H': regexp.push('0[0-9]|1[0-9]|2[0123]'); break;
case 'h': regexp.push('0[0-9]|1[012]'); break;
case 'i': regexp.push('0[0-9]|[12345][0-9]'); break;
case 's': regexp.push('0[0-9]|[12345][0-9]'); break;
case 'a': regexp.push('am|pm'); break;
case 'A': regexp.push('AM|PM'); break;
}
});
// if we have an array of regular expressions
if (regexp.length) {
// we will replace characters in the date's format in reversed order
matches.reverse();
// iterate through the characters in date's format
$.each(matches, function(index, match) {
// replace each character with the appropriate regular expression
format = format.replace(match.character, '(' + regexp[regexp.length - index - 1] + ')');
});
// the final regular expression
regexp = new RegExp('^' + format + '$', 'ig');
// if regular expression was matched
if ((segments = regexp.exec(str_date))) {
// check if date is a valid date (i.e. there's no February 31)
var tmpdate = new Date(),
original_day = 1,
original_month = tmpdate.getMonth() + 1,
original_year = tmpdate.getFullYear(),
original_hours = tmpdate.getHours(),
original_minutes = tmpdate.getMinutes(),
original_seconds = tmpdate.getSeconds(),
original_ampm,
english_days = ['Nedjelja', 'Ponedjeljak', 'Utorak', 'Srijeda', 'četvrtak', 'Petak', 'Subota'],
english_months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
iterable,
// by default, we assume the date is valid
valid = true;
// reverse back the characters in the date's format
matches.reverse();
// iterate through the characters in the date's format
$.each(matches, function(index, match) {
// if the date is not valid, don't look further
if (!valid) return true;
// based on the character
switch (match.character) {
case 'm':
case 'n':
// extract the month from the value entered by the user
original_month = to_int(segments[index + 1]);
break;
case 'd':
case 'j':
// extract the day from the value entered by the user
original_day = to_int(segments[index + 1]);
break;
case 'D':
case 'l':
case 'F':
case 'M':
// if day is given as day name, we'll check against the names in the used language
if (match.character === 'D' || match.character === 'l') iterable = plugin.settings.days;
// if month is given as month name, we'll check against the names in the used language
else iterable = plugin.settings.months;
// by default, we assume the day or month was not entered correctly
valid = false;
// iterate through the month/days in the used language
$.each(iterable, function(key, value) {
// if month/day was entered correctly, don't look further
if (valid) return true;
// if month/day was entered correctly
if (segments[index + 1].toLowerCase() === value.substring(0, (match.character === 'D' || match.character === 'M' ? 3 : value.length)).toLowerCase()) {
// extract the day/month from the value entered by the user
switch (match.character) {
case 'D': segments[index + 1] = english_days[key].substring(0, 3); break;
case 'l': segments[index + 1] = english_days[key]; break;
case 'F': segments[index + 1] = english_months[key]; original_month = key + 1; break;
case 'M': segments[index + 1] = english_months[key].substring(0, 3); original_month = key + 1; break;
}
// day/month value is valid
valid = true;
}
});
break;
case 'Y':
// extract the year from the value entered by the user
original_year = to_int(segments[index + 1]);
break;
case 'y':
// extract the year from the value entered by the user
original_year = '19' + to_int(segments[index + 1]);
break;
case 'G':
case 'H':
case 'g':
case 'h':
// extract the hours from the value entered by the user
original_hours = to_int(segments[index + 1]);
break;
case 'i':
// extract the minutes from the value entered by the user
original_minutes = to_int(segments[index + 1]);
break;
case 's':
// extract the seconds from the value entered by the user
original_seconds = to_int(segments[index + 1]);
break;
case 'a':
case 'A':
// extract the seconds from the value entered by the user
original_ampm = segments[index + 1].toLowerCase();
break;
}
});
// if everything is ok so far
if (valid) {
// generate a Date object using the values entered by the user
// (handle also the case when original_month and/or original_day are undefined - i.e date format is "Y-m" or "Y")
date = new Date(original_year, (original_month || 1) - 1, original_day || 1, original_hours + (original_ampm === 'pm' && original_hours !== 12 ? 12 : (original_ampm === 'am' && original_hours === 12 ? -12 : 0)), original_minutes, original_seconds);
// if, after that, the date is the same as the date entered by the user
if (date.getFullYear() === original_year && date.getDate() === (original_day || 1) && date.getMonth() === ((original_month || 1) - 1))
// return the date as JavaScript date object
return date;
}
}
}
// if script gets this far, return false as something must've went wrong
return false;
}
},
/**
* Prevents the possibility of selecting text on a given element. Used on the "previous" and "next" buttons
* where text might get accidentally selected when user quickly clicks on the buttons.
*
* Code by http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/
*
* @param jQuery Element el A jQuery element on which to prevents text selection.
*
* @return void
*
* @access private
*/
disable_text_select = function(el) {
// if browser is Firefox
if (browser.name === 'firefox') el.css('MozUserSelect', 'none');
// if browser is Internet Explorer
else if (browser.name === 'explorer') $(document).on('selectstart', el, function() { return false; });
// for the other browsers
else el.mousedown(function() { return false; });
},
/**
* Escapes special characters in a string, preparing it for use in a regular expression.
*
* @param string str The string in which special characters should be escaped.
*
* @return string Returns the string with escaped special characters.
*
* @access private
*/
escape_regexp = function(str) {
// return string with special characters escaped
return str.replace(/([-.,*+?^${}()|[\]\/\\])/g, '\\$1');
},
/**
* Formats a JavaScript date object to the format specified by the "format" property.
* Code taken from http://electricprism.com/aeron/calendar/
*
* @param date date A valid JavaScript date object
*
* @return string Returns a string containing the formatted date
*
* @access private
*/
format = function(date) {
var result = '',
// extract parts of the date:
// day number, 1 - 31
j = date.getDate(),
// day of the week, 0 - 6, Sunday - Saturday
w = date.getDay(),
// the name of the day of the week Sunday - Saturday
l = plugin.settings.days[w],
// the month number, 1 - 12
n = date.getMonth() + 1,
// the month name, January - December
f = plugin.settings.months[n - 1],
// the year (as a string)
y = date.getFullYear() + '',
// the hour, 0-23
h = date.getHours(),
// the hour in 12 hours format
h12 = h % 12 === 0 ? 12 : h % 12,
// the minute, 0-59
m = date.getMinutes(),
// the second, 0-59
s = date.getSeconds(),
// am/pm
a = (h >= 12 ? 'pm' : 'am'),
i, chr;
// iterate through the characters in the format
for (i = 0; i < plugin.settings.format.length; i++) {
// extract the current character
chr = plugin.settings.format.charAt(i);
// see what character it is
switch (chr) {
// year as two digits
case 'y': y = y.substr(2); // jshint ignore:line
// year as four digits
// falls through
case 'Y': result += y; break;
// month number, prefixed with 0
case 'm': n = str_pad(n, 2); // jshint ignore:line
// month number, not prefixed with 0
// falls through
case 'n': result += n; break;
// month name, three letters
case 'M': f = ($.isArray(plugin.settings.months_abbr) && undefined !== plugin.settings.months_abbr[n - 1] ? plugin.settings.months_abbr[n - 1] : plugin.settings.months[n - 1].substr(0, 3)); // jshint ignore:line
// full month name
// falls through
case 'F': result += f; break;
// day number, prefixed with 0
case 'd': j = str_pad(j, 2); // jshint ignore:line
// day number not prefixed with 0
// falls through
case 'j': result += j; break;
// day name, three letters
case 'D': l = ($.isArray(plugin.settings.days_abbr) && undefined !== plugin.settings.days_abbr[w] ? plugin.settings.days_abbr[w] : plugin.settings.days[w].substr(0, 3)); // jshint ignore:line
// full day name
// falls through
case 'l': result += l; break;
// ISO-8601 numeric representation of the day of the week, 1 - 7
case 'N': w++; // jshint ignore:line
// day of the week, 0 - 6
// falls through
case 'w': result += w; break;
// English ordinal suffix for the day of the month, 2 characters
// (st, nd, rd or th (works well with j))
case 'S':
if (j % 10 === 1 && j !== 11) result += 'st';
else if (j % 10 === 2 && j !== 12) result += 'nd';
else if (j % 10 === 3 && j !== 13) result += 'rd';
else result += 'th';
break;
// hour in 12 hours format, without leading zeros
case 'g': result += h12; break;
// hour in 12 hours format, with leading zeros
case 'h': result += str_pad(h12, 2); break;
// hour in 24 hours format, without leading zeros
case 'G': result += h; break;
// hour in 24 hours format, with leading zeros
case 'H': result += str_pad(h, 2); break;
// minutes, with leading zeros
case 'i': result += str_pad(m, 2); break;
// seconds, with leading zeros
case 's': result += str_pad(s, 2); break;
// am/pm, lowercase
case 'a': result += a; break;
// am/pm, uppercase
case 'A': result += a.toUpperCase(); break;
// this is probably the separator
default: result += chr;
}
}
// return formated date
return result;
},
/**
* Generates the day picker view, and displays it
*
* @return void
*
* @access private
*/
generate_daypicker = function() {
var
// get the number of days in the selected month
days_in_month = new Date(selected_year, selected_month + 1, 0).getDate(),
// get the selected month's starting day (from 0 to 6)
first_day = new Date(selected_year, selected_month, 1).getDay(),
// how many days are there in the previous month
days_in_previous_month = new Date(selected_year, selected_month, 0).getDate(),
// how many days are there to be shown from the previous month
days_from_previous_month = first_day - plugin.settings.first_day_of_week,
i, html, day, real_date, real_year, real_month, real_day, weekday, class_name, custom_class_name, is_weekend, rtl_offset;
// the final value of how many days are there to be shown from the previous month
days_from_previous_month = days_from_previous_month < 0 ? 7 + days_from_previous_month : days_from_previous_month;
// manage header caption and enable/disable navigation buttons if necessary
manage_header(plugin.settings.header_captions.days);
// start generating the HTML
html = '
';
// if a column featuring the number of the week is to be shown
if (plugin.settings.show_week_number)
// column title
html += '
' + plugin.settings.show_week_number + '
';
// name of week days
// show the abbreviated day names (or only the first two letters of the full name if no abbreviations are specified)
// and also, take in account the value of the "first_day_of_week" property
for (i = 0; i < 7; i++) {
// the week day's number; account for RTL
day = (plugin.settings.first_day_of_week + (plugin.settings.rtl ? 6 - i : i)) % 7;
html += '
';
// the calendar shows a total of 42 days
for (i = 0; i < 42; i++) {
// we need some additional math when showing an RTL calendar
rtl_offset = (plugin.settings.rtl ? 6 - ((i % 7) * 2) : 0);
// seven days per row
if (i > 0 && i % 7 === 0) html += '
';
// if week number is to be shown
if (i % 7 === 0 && plugin.settings.show_week_number)
// show ISO 8601 week number
html += '
';
// the number of the day in month
day = rtl_offset + (i - days_from_previous_month + 1);
// if dates in previous/next month can be selected, and this is one of those days
if (plugin.settings.select_other_months && (i < days_from_previous_month || day > days_in_month)) {
// use the Date object to normalize the date
// for example, 2011 05 33 will be transformed to 2011 06 02
real_date = new Date(selected_year, selected_month, day);
real_year = real_date.getFullYear();
real_month = real_date.getMonth();
real_day = real_date.getDate();
// extract normalized date parts and merge them
real_date = real_year + str_pad(real_month + 1, 2) + str_pad(real_day, 2);
}
// get the week day (0 to 6, Sunday to Saturday)
weekday = (plugin.settings.first_day_of_week + i) % 7;
// is day on a weekend?
is_weekend = ($.inArray(weekday, plugin.settings.weekend_days) > -1);
// if this is a day from the previous month
if ((plugin.settings.rtl && day < 1) || (!plugin.settings.rtl && i < days_from_previous_month))
html += '
';
// if this is a day from the current month
else {
class_name = '';
// custom class, if any
custom_class_name = get_custom_class(selected_year, selected_month, day);
// if day is in weekend
if (is_weekend) class_name = ' dp_weekend';
// highlight the current system date
if (selected_month === current_system_month && selected_year === current_system_year && current_system_day === day) class_name += ' dp_current';
// apply custom class, if a custom class exists
if (custom_class_name !== '') class_name += ' ' + custom_class_name;
// highlight the currently selected date
if (selected_month === default_month && selected_year === default_year && default_day === day) class_name += ' dp_selected';
// if date needs to be disabled
if (is_disabled(selected_year, selected_month, day)) class_name += ' dp_disabled';
// print the day of the month (if "day" is NaN, use an empty string instead)
html += '' + ((plugin.settings.zero_pad ? str_pad(day, 2) : day) || ' ') + '';
}
}
// wrap up generating the day picker
html += '
';
// inject the day picker into the DOM
daypicker.html($(html));
// if date picker is always visible
if (plugin.settings.always_visible)
// cache all the cells
// (we need them so that we can easily remove the "dp_selected" class from all of them when user selects a date)
daypicker_cells = $('td:not(.dp_disabled)', daypicker);
// make the day picker visible
daypicker.show();
},
/**
* Generates the month picker view, and displays it
*
* @return void
*
* @access private
*/
generate_monthpicker = function() {
// manage header caption and enable/disable navigation buttons if necessary
manage_header(plugin.settings.header_captions.months);
// start generating the HTML
var html = '
', i, class_name, month;
// iterate through all the months
for (i = 0; i < 12; i++) {
// three month per row
if (i > 0 && i % 3 === 0) html += '
';
// the month, taking RTL into account
month = plugin.settings.rtl ? 2 + i - (2 * (i % 3)) : i;
class_name = 'dp_month_' + month;
// if month needs to be disabled
if (is_disabled(selected_year, month)) class_name += ' dp_disabled';
// else, if a date is already selected and this is that particular month, highlight it
else if (default_month !== false && default_month === month && selected_year === default_year) class_name += ' dp_selected';
// else, if this the current system month, highlight it
else if (current_system_month === month && current_system_year === selected_year) class_name += ' dp_current';
// first three letters of the month's name
html += '
';
// inject into the DOM
monthpicker.html($(html));
// if date picker is always visible
if (plugin.settings.always_visible)
// cache all the cells
// (we need them so that we can easily remove the "dp_selected" class from all of them when user selects a month)
monthpicker_cells = $('td:not(.dp_disabled)', monthpicker);
// make the month picker visible
monthpicker.show();
},
/**
* Generates the time picker view, and displays it
*
* @return void
*
* @access private
*/
generate_timepicker = function() {
var html, condensed = (timepicker_config.hours && timepicker_config.minutes && timepicker_config.seconds && timepicker_config.ampm);
// the HTML
html = '
';
// inject into the DOM
timepicker.html($(html));
// make the time picker visible
timepicker.show();
},
/**
* Generates the year picker view, and displays it
*
* @return void
*
* @access private
*/
generate_yearpicker = function() {
// manage header caption and enable/disable navigation buttons if necessary
manage_header(plugin.settings.header_captions.years);
// start generating the HTML
var html = '
', i, class_name, year;
// we're showing 12 years at a time, current year in the middle
for (i = 0; i < 12; i++) {
// three years per row
if (i > 0 && i % 3 === 0) html += '
';
// the year, taking RTL into account
year = plugin.settings.rtl ? 2 + i - (2 * (i % 3)) : i;
class_name = '';
// if year needs to be disabled
if (is_disabled(selected_year - 7 + year)) class_name += ' dp_disabled';
// else, if a date is already selected and this is that particular year, highlight it
else if (default_year && default_year === selected_year - 7 + year) class_name += ' dp_selected';
// else, if this is the current system year, highlight it
else if (current_system_year === (selected_year - 7 + year)) class_name += ' dp_current';
// first three letters of the month's name
html += '' + (selected_year - 7 + year) + '';
}
// wrap up
html += '
';
// inject into the DOM
yearpicker.html($(html));
// if date picker is always visible
if (plugin.settings.always_visible)
// cache all the cells
// (we need them so that we can easily remove the "dp_selected" class from all of them when user selects a year)
yearpicker_cells = $('td:not(.dp_disabled)', yearpicker);
// make the year picker visible
yearpicker.show();
},
/**
* Return the name of a custom class to be applied to the given date.
*
* @return string The name of a custom class to be applied to the given date, or an empty string if no custom
* class needs to be applied.
*
* @param integer year The year to check
* @param integer month The month to check
* @param integer day The day to check
*
* @access private
*/
get_custom_class = function(year, month, day) {
var class_name, i, found;
// if month is given as argument, increment it (as JavaScript uses 0 for January, 1 for February...)
if (typeof month !== 'undefined') month = month + 1;
// iterate through the custom classes
for (i in custom_class_names) {
// the class name we're currently checking
class_name = custom_class_names[i]; found = false;
// if there are any custom classes defined
if ($.isArray(custom_classes[class_name]))
// iterate through the rules for which the custom class to be applied
$.each(custom_classes[class_name], function() {
// if a custom class needs to be applied to the date we're checking, don't look further
if (found) return;
var rule = this, weekday;
// if the rules apply for the current year
if ($.inArray(year, rule[2]) > -1 || $.inArray('*', rule[2]) > -1)
// if the rules apply for the current month
if ((typeof month !== 'undefined' && $.inArray(month, rule[1]) > -1) || $.inArray('*', rule[1]) > -1)
// if the rules apply for the current day
if ((typeof day !== 'undefined' && $.inArray(day, rule[0]) > -1) || $.inArray('*', rule[0]) > -1) {
// if custom class is to be applied whatever the day
// don't look any further
if ($.inArray('*', rule[3]) > -1) return (found = class_name);
// get the weekday
weekday = new Date(year, month - 1, day).getDay();
// if custom class is to be applied to weekday
// don't look any further
if ($.inArray(weekday, rule[3]) > -1) return (found = class_name);
}
});
// if a custom class needs to be applied to the date we're checking, don't look further
if (found) return found;
}
// return what we've found
return found || '';
},
/**
* Calculate the ISO 8601 week number for a given date.
*
* Code is based on the algorithm at http://www.tondering.dk/claus/cal/week.php#calcweekno
*/
get_week_number = function(date) {
var y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
a, b, c, s, e, f, g, n, w;
/* jshint ignore:start */
// if month jan. or feb.
if (m < 3) {
a = y - 1;
b = (a / 4 | 0) - (a / 100 | 0) + (a / 400 | 0);
c = ((a - 1) / 4 | 0) - ((a - 1) / 100 | 0) + ((a - 1) / 400 | 0);
s = b - c;
e = 0;
f = d - 1 + 31 * (m - 1);
// if month mar. through dec.
} else {
a = y;
b = (a / 4 | 0) - (a / 100 | 0) + (a / 400 | 0);
c = ((a - 1) / 4 | 0) - ((a - 1) / 100 | 0) + ((a - 1) / 400 | 0);
s = b - c;
e = s + 1;
f = d + ((153 * (m - 3) + 2) / 5 | 0) + 58 + s;
}
g = (a + b) % 7;
// ISO Weekday (0 is monday, 1 is tuesday etc.)
d = (f + g - e) % 7;
n = f + 3 - d;
if (n < 0) w = 53 - ((g - s) / 5 | 0);
else if (n > 364 + s) w = 1;
else w = (n / 7 | 0) + 1;
/* jshint ignore:end */
return w;
},
/**
* Generates an iFrame shim in Internet Explorer 6 so that the date picker appears above select boxes.
*
* @return void
*
* @access private
*/
iframeShim = function(action) {
var zIndex, offset;
// this is necessary only if browser is Internet Explorer 6
if (browser.name === 'explorer' && browser.version === 6) {
// if the iFrame was not yet created
// "undefined" evaluates as FALSE
if (!shim) {
// the iFrame has to have the element's zIndex minus 1
zIndex = to_int(datepicker.css('zIndex')) - 1;
// create the iFrame
shim = $('