library-mirrors/datetimepicker
1
0
Fork 0
mirror of https://github.com/xdan/datetimepicker.git synced 2024-11-18 06:24:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

The picker is positioned correctly when the date input resides within a fixed container: the picker is displayed above the date input when there is insufficient room beneath the input. Also: added a couple test pages; normalized indentation in the JavaScript; fixed a couple warnings raised by the build script.

Browse Source
This commit is contained in:
Dan Bettles 2016-03-11 12:20:15 +00:00
parent 3c53077dfe
commit 1b4fad11b3
6 changed files with 540 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
build/jquery.datetimepicker.full.js
View File

@ -1180,7 +1180,7 @@ var DateFormatter;
beforeShowDay: null,
enterLikeTab: true,
showApplyButton: false
showApplyButton: false
};
var dateHelper = null,
@ -1276,7 +1276,6 @@ var DateFormatter;
}
return out;
},
move = 0,
timebox,
parentHeight,
height,
@ -1346,7 +1345,7 @@ var DateFormatter;
calcOffset(event);
}
})
.on('touchend touchcancel', function (event) {
.on('touchend touchcancel', function () {
touchStart = false;
startTopScroll = 0;
});
@ -1408,7 +1407,7 @@ var DateFormatter;
}
});
timeboxparent.on('touchend touchcancel', function (event) {
timeboxparent.on('touchend touchcancel', function () {
start = false;
startTop = 0;
});
@ -1419,7 +1418,7 @@ var DateFormatter;
$.fn.datetimepicker = function (opt, opt2) {
var result = this,
KEY0 = 48,
KEY0 = 48,
KEY9 = 57,
_KEY0 = 96,
_KEY9 = 105,
@ -1448,7 +1447,7 @@ var DateFormatter;
lazyInit = function (input) {
input
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function initOnActionCallback(event) {
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function initOnActionCallback() {
if (input.is(':disabled') || input.data('xdsoft_datetimepicker')) {
return;
}
@ -1477,7 +1476,7 @@ var DateFormatter;
timepicker = $('<div class="xdsoft_timepicker active"><button type="button" class="xdsoft_prev"></button><div class="xdsoft_time_box"></div><button type="button" class="xdsoft_next"></button></div>'),
timeboxparent = timepicker.find('.xdsoft_time_box').eq(0),
timebox = $('<div class="xdsoft_time_variant"></div>'),
applyButton = $('<button type="button" class="xdsoft_save_selected blue-gradient-button">Save Selected</button>'),
applyButton = $('<button type="button" class="xdsoft_save_selected blue-gradient-button">Save Selected</button>'),
monthselect = $('<div class="xdsoft_select xdsoft_monthselect"><div></div></div>'),
yearselect = $('<div class="xdsoft_select xdsoft_yearselect"><div></div></div>'),
@ -1489,8 +1488,8 @@ var DateFormatter;
current_time_index,
setPos,
timer = 0,
timer1 = 0,
_xdsoft_datetime;
_xdsoft_datetime,
forEachAncestorOf;
if (options.id) {
datetimepicker.attr('id', options.id);
@ -1553,7 +1552,7 @@ var DateFormatter;
event.stopPropagation();
event.preventDefault();
})
.on('touchstart mousedown.xdsoft', '.xdsoft_option', function (event) {
.on('touchstart mousedown.xdsoft', '.xdsoft_option', function () {
if (_xdsoft_datetime.currentTime === undefined || _xdsoft_datetime.currentTime === null) {
_xdsoft_datetime.currentTime = _xdsoft_datetime.now();
}
@ -1576,13 +1575,12 @@ var DateFormatter;
});
datetimepicker.getValue = function () {
return _xdsoft_datetime.getCurrentTime();
};
return _xdsoft_datetime.getCurrentTime();
};
datetimepicker.setOptions = function (_options) {
var highlightedDates = {};
options = $.extend(true, {}, options, _options);
if (_options.allowTimes && $.isArray(_options.allowTimes) && _options.allowTimes.length) {
@ -1667,7 +1665,7 @@ var DateFormatter;
}
if (_options.disabledWeekDays && $.isArray(_options.disabledWeekDays) && _options.disabledWeekDays.length) {
options.disabledWeekDays = $.extend(true, [], _options.disabledWeekDays);
options.disabledWeekDays = $.extend(true, [], _options.disabledWeekDays);
}
if ((options.open || options.opened) && (!options.inline)) {
@ -1986,12 +1984,12 @@ var DateFormatter;
_xdsoft_datetime = new XDSoft_datetime();
applyButton.on('touchend click', function (e) {//pathbrite
e.preventDefault();
datetimepicker.data('changed', true);
_xdsoft_datetime.setCurrentTime(getCurrentValue());
input.val(_xdsoft_datetime.str());
datetimepicker.trigger('close.xdsoft');
});
e.preventDefault();
datetimepicker.data('changed', true);
_xdsoft_datetime.setCurrentTime(getCurrentValue());
input.val(_xdsoft_datetime.str());
datetimepicker.trigger('close.xdsoft');
});
mounth_picker
.find('.xdsoft_today_button')
.on('touchend mousedown.xdsoft', function () {
@ -2163,7 +2161,9 @@ var DateFormatter;
} else if (options.disabledDates.indexOf(dateHelper.formatDate(start, options.formatDate)) !== -1) {
classes.push('xdsoft_disabled');
} else if (options.disabledWeekDays.indexOf(day) !== -1) {
classes.push('xdsoft_disabled');
classes.push('xdsoft_disabled');
}else if (input.is('[readonly]')) {
classes.push('xdsoft_disabled');
}
if (customDateSettings && customDateSettings[1] !== "") {
@ -2237,11 +2237,12 @@ var DateFormatter;
optionDateTime = new Date(_xdsoft_datetime.currentTime);
optionDateTime.setHours(h);
optionDateTime.setMinutes(m);
classes = [];
classes = [];
if ((options.minDateTime !== false && options.minDateTime > optionDateTime) || (options.maxTime !== false && _xdsoft_datetime.strtotime(options.maxTime).getTime() < now.getTime()) || (options.minTime !== false && _xdsoft_datetime.strtotime(options.minTime).getTime() > now.getTime())) {
classes.push('xdsoft_disabled');
}
if ((options.minDateTime !== false && options.minDateTime > optionDateTime) || ((options.disabledMinTime !== false && now.getTime() > _xdsoft_datetime.strtotime(options.disabledMinTime).getTime()) && (options.disabledMaxTime !== false && now.getTime() < _xdsoft_datetime.strtotime(options.disabledMaxTime).getTime()))) {
} else if ((options.minDateTime !== false && options.minDateTime > optionDateTime) || ((options.disabledMinTime !== false && now.getTime() > _xdsoft_datetime.strtotime(options.disabledMinTime).getTime()) && (options.disabledMaxTime !== false && now.getTime() < _xdsoft_datetime.strtotime(options.disabledMaxTime).getTime()))) {
classes.push('xdsoft_disabled');
} else if (input.is('[readonly]')) {
classes.push('xdsoft_disabled');
}
@ -2395,7 +2396,6 @@ var DateFormatter;
}
});
datepicker
.on('mousewheel.xdsoft', function (event) {
if (!options.scrollMonth) {
@ -2458,59 +2458,129 @@ var DateFormatter;
current_time_index = 0;
setPos = function () {
/**
* 修复输入框在window最右边，且输入框的宽度小于日期控件宽度情况下，日期控件显示不全的bug。
* Bug fixed - The datetimepicker will overflow-y when the width of the date input less than its, which
* could causes part of the datetimepicker being hidden.
* by Soon start
*/
var offset = datetimepicker.data('input').offset(),
datetimepickerelement = datetimepicker.data('input')[0],
top = offset.top + datetimepickerelement.offsetHeight - 1,
left = offset.left,
position = "absolute",
node;
if ((document.documentElement.clientWidth - offset.left) < datepicker.parent().outerWidth(true)) {
var diff = datepicker.parent().outerWidth(true) - datetimepickerelement.offsetWidth;
left = left - diff;
}
/**
* by Soon end
*/
if (datetimepicker.data('input').parent().css('direction') == 'rtl')
left -= (datetimepicker.outerWidth() - datetimepicker.data('input').outerWidth());
if (options.fixed) {
top -= $(window).scrollTop();
left -= $(window).scrollLeft();
position = "fixed";
} else {
if (top + datetimepickerelement.offsetHeight > $(window).height() + $(window).scrollTop()) {
top = offset.top - datetimepickerelement.offsetHeight + 1;
}
if (top < 0) {
top = 0;
}
if (left + datetimepickerelement.offsetWidth > $(window).width()) {
left = $(window).width() - datetimepickerelement.offsetWidth;
}
}
node = datetimepicker[0];
/**
* Runs the callback for each of the specified node's ancestors.
*
* Return FALSE from the callback to stop ascending.
*
* @param {DOMNode} node
* @param {Function} callback
* @returns {undefined}
*/
forEachAncestorOf = function (node, callback) {
do {
node = node.parentNode;
if (window.getComputedStyle(node).getPropertyValue('position') === 'relative' && $(window).width() >= node.offsetWidth) {
left = left - (($(window).width() - node.offsetWidth) / 2);
if (callback(node) === false) {
break;
}
} while (node.nodeName !== 'HTML');
datetimepicker.css({
left: left,
top: top,
position: position
});
};
/**
* Sets the position of the picker.
*
* @returns {undefined}
*/
setPos = function () {
var dateInputOffset,
dateInputElem,
verticalPosition,
left,
position,
datetimepickerElem,
dateInputHasFixedAncestor,
$dateInput,
windowWidth,
verticalAnchorEdge,
datetimepickerCss,
windowHeight,
windowScrollTop;
$dateInput = datetimepicker.data('input');
dateInputOffset = $dateInput.offset();
dateInputElem = $dateInput[0];
verticalAnchorEdge = 'top';
verticalPosition = (dateInputOffset.top + dateInputElem.offsetHeight) - 1;
left = dateInputOffset.left;
position = "absolute";
windowWidth = $(window).width();
windowHeight = $(window).height();
windowScrollTop = $(window).scrollTop();
if ((document.documentElement.clientWidth - dateInputOffset.left) < datepicker.parent().outerWidth(true)) {
var diff = datepicker.parent().outerWidth(true) - dateInputElem.offsetWidth;
left = left - diff;
}
if ($dateInput.parent().css('direction') === 'rtl') {
left -= (datetimepicker.outerWidth() - $dateInput.outerWidth());
}
if (options.fixed) {
verticalPosition -= windowScrollTop;
left -= $(window).scrollLeft();
position = "fixed";
} else {
dateInputHasFixedAncestor = false;
forEachAncestorOf(dateInputElem, function (ancestorNode) {
if (window.getComputedStyle(ancestorNode).getPropertyValue('position') === 'fixed') {
dateInputHasFixedAncestor = true;
return false;
}
});
if (dateInputHasFixedAncestor) {
position = 'fixed';
//If the picker won't fit entirely within the viewport then display it above the date input.
if (verticalPosition + datetimepicker.outerHeight() > windowHeight + windowScrollTop) {
verticalAnchorEdge = 'bottom';
verticalPosition = (windowHeight + windowScrollTop) - dateInputOffset.top;
} else {
verticalPosition -= windowScrollTop;
}
} else {
if (verticalPosition + dateInputElem.offsetHeight > windowHeight + windowScrollTop) {
verticalPosition = dateInputOffset.top - dateInputElem.offsetHeight + 1;
}
}
if (verticalPosition < 0) {
verticalPosition = 0;
}
if (left + dateInputElem.offsetWidth > windowWidth) {
left = windowWidth - dateInputElem.offsetWidth;
}
}
datetimepickerElem = datetimepicker[0];
forEachAncestorOf(datetimepickerElem, function (ancestorNode) {
var ancestorNodePosition;
ancestorNodePosition = window.getComputedStyle(ancestorNode).getPropertyValue('position');
if (ancestorNodePosition === 'relative' && windowWidth >= ancestorNode.offsetWidth) {
left = left - ((windowWidth - ancestorNode.offsetWidth) / 2);
return false;
}
});
datetimepickerCss = {
left: left,
position: position
};
datetimepickerCss[verticalAnchorEdge] = verticalPosition;
datetimepicker.css(datetimepickerCss);
};
datetimepicker
.on('open.xdsoft', function (event) {
var onShow = true;
@ -2546,7 +2616,7 @@ var DateFormatter;
}
event.stopPropagation();
})
.on('toggle.xdsoft', function (event) {
.on('toggle.xdsoft', function () {
if (datetimepicker.is(':visible')) {
datetimepicker.trigger('close.xdsoft');
} else {
@ -2556,7 +2626,6 @@ var DateFormatter;
.data('input', input);
timer = 0;
timer1 = 0;
datetimepicker.data('xdsoft_datetime', _xdsoft_datetime);
datetimepicker.setOptions(options);
@ -2721,7 +2790,7 @@ var DateFormatter;
input
.data('xdsoft_datetimepicker', datetimepicker)
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function (event) {
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function () {
if (input.is(':disabled') || (input.data('xdsoft_datetimepicker').is(':visible') && options.closeOnInputClick)) {
return;
}
@ -2740,7 +2809,7 @@ var DateFormatter;
}, 100);
})
.on('keydown.xdsoft', function (event) {
var val = this.value, elementSelector,
var elementSelector,
key = event.which;
if ([ENTER].indexOf(key) !== -1 && options.enterLikeTab) {
elementSelector = $("input:visible,textarea:visible,button:visible,a:visible");
@ -2785,7 +2854,7 @@ var DateFormatter;
}
});
this.each(function () {
this.each(function () {
var datetimepicker = $(this).data('xdsoft_datetimepicker'), $input;
if (datetimepicker) {
if ($.type(opt) === 'string') {
@ -2814,10 +2883,10 @@ var DateFormatter;
$input = datetimepicker.data('input');
$input.trigger('blur.xdsoft');
break;
default:
if (datetimepicker[opt] && $.isFunction(datetimepicker[opt])) {
result = datetimepicker[opt](opt2);
}
default:
if (datetimepicker[opt] && $.isFunction(datetimepicker[opt])) {
result = datetimepicker[opt](opt2);
}
}
} else {
datetimepicker
@ -2834,8 +2903,9 @@ var DateFormatter;
}
});
return result;
return result;
};
$.fn.datetimepicker.defaults = default_options;
function HighlightedDate(date, desc, style) {
@ -2844,7 +2914,6 @@ var DateFormatter;
this.desc = desc;
this.style = style;
}
}));
/*!
* jQuery Mousewheel 3.1.13

4
build/jquery.datetimepicker.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
build/jquery.datetimepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

242
jquery.datetimepicker.js Normal file → Executable file
View File

@ -604,7 +604,7 @@
beforeShowDay: null,
enterLikeTab: true,
showApplyButton: false
showApplyButton: false
};
var dateHelper = null,
@ -700,7 +700,6 @@
}
return out;
},
move = 0,
timebox,
parentHeight,
height,
@ -770,7 +769,7 @@
calcOffset(event);
}
})
.on('touchend touchcancel', function (event) {
.on('touchend touchcancel', function () {
touchStart = false;
startTopScroll = 0;
});
@ -832,7 +831,7 @@
}
});
timeboxparent.on('touchend touchcancel', function (event) {
timeboxparent.on('touchend touchcancel', function () {
start = false;
startTop = 0;
});
@ -843,7 +842,7 @@
$.fn.datetimepicker = function (opt, opt2) {
var result = this,
KEY0 = 48,
KEY0 = 48,
KEY9 = 57,
_KEY0 = 96,
_KEY9 = 105,
@ -872,7 +871,7 @@
lazyInit = function (input) {
input
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function initOnActionCallback(event) {
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function initOnActionCallback() {
if (input.is(':disabled') || input.data('xdsoft_datetimepicker')) {
return;
}
@ -901,7 +900,7 @@
timepicker = $('<div class="xdsoft_timepicker active"><button type="button" class="xdsoft_prev"></button><div class="xdsoft_time_box"></div><button type="button" class="xdsoft_next"></button></div>'),
timeboxparent = timepicker.find('.xdsoft_time_box').eq(0),
timebox = $('<div class="xdsoft_time_variant"></div>'),
applyButton = $('<button type="button" class="xdsoft_save_selected blue-gradient-button">Save Selected</button>'),
applyButton = $('<button type="button" class="xdsoft_save_selected blue-gradient-button">Save Selected</button>'),
monthselect = $('<div class="xdsoft_select xdsoft_monthselect"><div></div></div>'),
yearselect = $('<div class="xdsoft_select xdsoft_yearselect"><div></div></div>'),
@ -913,8 +912,8 @@
current_time_index,
setPos,
timer = 0,
timer1 = 0,
_xdsoft_datetime;
_xdsoft_datetime,
forEachAncestorOf;
if (options.id) {
datetimepicker.attr('id', options.id);
@ -977,7 +976,7 @@
event.stopPropagation();
event.preventDefault();
})
.on('touchstart mousedown.xdsoft', '.xdsoft_option', function (event) {
.on('touchstart mousedown.xdsoft', '.xdsoft_option', function () {
if (_xdsoft_datetime.currentTime === undefined || _xdsoft_datetime.currentTime === null) {
_xdsoft_datetime.currentTime = _xdsoft_datetime.now();
}
@ -1000,13 +999,12 @@
});
datetimepicker.getValue = function () {
return _xdsoft_datetime.getCurrentTime();
};
return _xdsoft_datetime.getCurrentTime();
};
datetimepicker.setOptions = function (_options) {
var highlightedDates = {};
options = $.extend(true, {}, options, _options);
if (_options.allowTimes && $.isArray(_options.allowTimes) && _options.allowTimes.length) {
@ -1091,7 +1089,7 @@
}
if (_options.disabledWeekDays && $.isArray(_options.disabledWeekDays) && _options.disabledWeekDays.length) {
options.disabledWeekDays = $.extend(true, [], _options.disabledWeekDays);
options.disabledWeekDays = $.extend(true, [], _options.disabledWeekDays);
}
if ((options.open || options.opened) && (!options.inline)) {
@ -1410,12 +1408,12 @@
_xdsoft_datetime = new XDSoft_datetime();
applyButton.on('touchend click', function (e) {//pathbrite
e.preventDefault();
datetimepicker.data('changed', true);
_xdsoft_datetime.setCurrentTime(getCurrentValue());
input.val(_xdsoft_datetime.str());
datetimepicker.trigger('close.xdsoft');
});
e.preventDefault();
datetimepicker.data('changed', true);
_xdsoft_datetime.setCurrentTime(getCurrentValue());
input.val(_xdsoft_datetime.str());
datetimepicker.trigger('close.xdsoft');
});
mounth_picker
.find('.xdsoft_today_button')
.on('touchend mousedown.xdsoft', function () {
@ -1587,10 +1585,10 @@
} else if (options.disabledDates.indexOf(dateHelper.formatDate(start, options.formatDate)) !== -1) {
classes.push('xdsoft_disabled');
} else if (options.disabledWeekDays.indexOf(day) !== -1) {
classes.push('xdsoft_disabled');
classes.push('xdsoft_disabled');
}else if (input.is('[readonly]')) {
classes.push('xdsoft_disabled');
}
classes.push('xdsoft_disabled');
}
if (customDateSettings && customDateSettings[1] !== "") {
classes.push(customDateSettings[1]);
@ -1665,12 +1663,12 @@
optionDateTime.setMinutes(m);
classes = [];
if ((options.minDateTime !== false && options.minDateTime > optionDateTime) || (options.maxTime !== false && _xdsoft_datetime.strtotime(options.maxTime).getTime() < now.getTime()) || (options.minTime !== false && _xdsoft_datetime.strtotime(options.minTime).getTime() > now.getTime())) {
classes.push('xdsoft_disabled');
} else if ((options.minDateTime !== false && options.minDateTime > optionDateTime) || ((options.disabledMinTime !== false && now.getTime() > _xdsoft_datetime.strtotime(options.disabledMinTime).getTime()) && (options.disabledMaxTime !== false && now.getTime() < _xdsoft_datetime.strtotime(options.disabledMaxTime).getTime()))) {
classes.push('xdsoft_disabled');
} else if (input.is('[readonly]')) {
classes.push('xdsoft_disabled');
}
classes.push('xdsoft_disabled');
} else if ((options.minDateTime !== false && options.minDateTime > optionDateTime) || ((options.disabledMinTime !== false && now.getTime() > _xdsoft_datetime.strtotime(options.disabledMinTime).getTime()) && (options.disabledMaxTime !== false && now.getTime() < _xdsoft_datetime.strtotime(options.disabledMaxTime).getTime()))) {
classes.push('xdsoft_disabled');
} else if (input.is('[readonly]')) {
classes.push('xdsoft_disabled');
}
current_time = new Date(_xdsoft_datetime.currentTime);
current_time.setHours(parseInt(_xdsoft_datetime.currentTime.getHours(), 10));
@ -1822,7 +1820,6 @@
}
});
datepicker
.on('mousewheel.xdsoft', function (event) {
if (!options.scrollMonth) {
@ -1885,59 +1882,129 @@
current_time_index = 0;
setPos = function () {
/**
* 修复输入框在window最右边，且输入框的宽度小于日期控件宽度情况下，日期控件显示不全的bug。
* Bug fixed - The datetimepicker will overflow-y when the width of the date input less than its, which
* could causes part of the datetimepicker being hidden.
* by Soon start
*/
var offset = datetimepicker.data('input').offset(),
datetimepickerelement = datetimepicker.data('input')[0],
top = offset.top + datetimepickerelement.offsetHeight - 1,
left = offset.left,
position = "absolute",
node;
if ((document.documentElement.clientWidth - offset.left) < datepicker.parent().outerWidth(true)) {
var diff = datepicker.parent().outerWidth(true) - datetimepickerelement.offsetWidth;
left = left - diff;
}
/**
* by Soon end
*/
if (datetimepicker.data('input').parent().css('direction') == 'rtl')
left -= (datetimepicker.outerWidth() - datetimepicker.data('input').outerWidth());
if (options.fixed) {
top -= $(window).scrollTop();
left -= $(window).scrollLeft();
position = "fixed";
} else {
if (top + datetimepickerelement.offsetHeight > $(window).height() + $(window).scrollTop()) {
top = offset.top - datetimepickerelement.offsetHeight + 1;
}
if (top < 0) {
top = 0;
}
if (left + datetimepickerelement.offsetWidth > $(window).width()) {
left = $(window).width() - datetimepickerelement.offsetWidth;
}
}
node = datetimepicker[0];
/**
* Runs the callback for each of the specified node's ancestors.
*
* Return FALSE from the callback to stop ascending.
*
* @param {DOMNode} node
* @param {Function} callback
* @returns {undefined}
*/
forEachAncestorOf = function (node, callback) {
do {
node = node.parentNode;
if (window.getComputedStyle(node).getPropertyValue('position') === 'relative' && $(window).width() >= node.offsetWidth) {
left = left - (($(window).width() - node.offsetWidth) / 2);
if (callback(node) === false) {
break;
}
} while (node.nodeName !== 'HTML');
datetimepicker.css({
left: left,
top: top,
position: position
});
};
/**
* Sets the position of the picker.
*
* @returns {undefined}
*/
setPos = function () {
var dateInputOffset,
dateInputElem,
verticalPosition,
left,
position,
datetimepickerElem,
dateInputHasFixedAncestor,
$dateInput,
windowWidth,
verticalAnchorEdge,
datetimepickerCss,
windowHeight,
windowScrollTop;
$dateInput = datetimepicker.data('input');
dateInputOffset = $dateInput.offset();
dateInputElem = $dateInput[0];
verticalAnchorEdge = 'top';
verticalPosition = (dateInputOffset.top + dateInputElem.offsetHeight) - 1;
left = dateInputOffset.left;
position = "absolute";
windowWidth = $(window).width();
windowHeight = $(window).height();
windowScrollTop = $(window).scrollTop();
if ((document.documentElement.clientWidth - dateInputOffset.left) < datepicker.parent().outerWidth(true)) {
var diff = datepicker.parent().outerWidth(true) - dateInputElem.offsetWidth;
left = left - diff;
}
if ($dateInput.parent().css('direction') === 'rtl') {
left -= (datetimepicker.outerWidth() - $dateInput.outerWidth());
}
if (options.fixed) {
verticalPosition -= windowScrollTop;
left -= $(window).scrollLeft();
position = "fixed";
} else {
dateInputHasFixedAncestor = false;
forEachAncestorOf(dateInputElem, function (ancestorNode) {
if (window.getComputedStyle(ancestorNode).getPropertyValue('position') === 'fixed') {
dateInputHasFixedAncestor = true;
return false;
}
});
if (dateInputHasFixedAncestor) {
position = 'fixed';
//If the picker won't fit entirely within the viewport then display it above the date input.
if (verticalPosition + datetimepicker.outerHeight() > windowHeight + windowScrollTop) {
verticalAnchorEdge = 'bottom';
verticalPosition = (windowHeight + windowScrollTop) - dateInputOffset.top;
} else {
verticalPosition -= windowScrollTop;
}
} else {
if (verticalPosition + dateInputElem.offsetHeight > windowHeight + windowScrollTop) {
verticalPosition = dateInputOffset.top - dateInputElem.offsetHeight + 1;
}
}
if (verticalPosition < 0) {
verticalPosition = 0;
}
if (left + dateInputElem.offsetWidth > windowWidth) {
left = windowWidth - dateInputElem.offsetWidth;
}
}
datetimepickerElem = datetimepicker[0];
forEachAncestorOf(datetimepickerElem, function (ancestorNode) {
var ancestorNodePosition;
ancestorNodePosition = window.getComputedStyle(ancestorNode).getPropertyValue('position');
if (ancestorNodePosition === 'relative' && windowWidth >= ancestorNode.offsetWidth) {
left = left - ((windowWidth - ancestorNode.offsetWidth) / 2);
return false;
}
});
datetimepickerCss = {
left: left,
position: position
};
datetimepickerCss[verticalAnchorEdge] = verticalPosition;
datetimepicker.css(datetimepickerCss);
};
datetimepicker
.on('open.xdsoft', function (event) {
var onShow = true;
@ -1973,7 +2040,7 @@
}
event.stopPropagation();
})
.on('toggle.xdsoft', function (event) {
.on('toggle.xdsoft', function () {
if (datetimepicker.is(':visible')) {
datetimepicker.trigger('close.xdsoft');
} else {
@ -1983,7 +2050,6 @@
.data('input', input);
timer = 0;
timer1 = 0;
datetimepicker.data('xdsoft_datetime', _xdsoft_datetime);
datetimepicker.setOptions(options);
@ -2148,7 +2214,7 @@
input
.data('xdsoft_datetimepicker', datetimepicker)
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function (event) {
.on('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart', function () {
if (input.is(':disabled') || (input.data('xdsoft_datetimepicker').is(':visible') && options.closeOnInputClick)) {
return;
}
@ -2167,7 +2233,7 @@
}, 100);
})
.on('keydown.xdsoft', function (event) {
var val = this.value, elementSelector,
var elementSelector,
key = event.which;
if ([ENTER].indexOf(key) !== -1 && options.enterLikeTab) {
elementSelector = $("input:visible,textarea:visible,button:visible,a:visible");
@ -2212,7 +2278,7 @@
}
});
this.each(function () {
this.each(function () {
var datetimepicker = $(this).data('xdsoft_datetimepicker'), $input;
if (datetimepicker) {
if ($.type(opt) === 'string') {
@ -2241,10 +2307,10 @@
$input = datetimepicker.data('input');
$input.trigger('blur.xdsoft');
break;
default:
if (datetimepicker[opt] && $.isFunction(datetimepicker[opt])) {
result = datetimepicker[opt](opt2);
}
default:
if (datetimepicker[opt] && $.isFunction(datetimepicker[opt])) {
result = datetimepicker[opt](opt2);
}
}
} else {
datetimepicker
@ -2261,8 +2327,9 @@
}
});
return result;
return result;
};
$.fn.datetimepicker.defaults = default_options;
function HighlightedDate(date, desc, style) {
@ -2271,5 +2338,4 @@
this.desc = desc;
this.style = style;
}
}));

115
tests/input_in_container_fixed_to_bottom_of_viewport.html Executable file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<title>Input In Container Fixed To Bottom Of Viewport | datetimepicker Tests</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../jquery.datetimepicker.css"/>
<style>
body {
margin: 0;
padding: 0;
}
main {
width: 960px;
margin: 0 auto;
}
#search {
position: fixed;
bottom: 0;
z-index: 3;
width: 100%;
color: #f0f0f0;
background-color: #333;
opacity: 0.9;
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
}
#search form {
width: 960px;
margin: 0 auto;
padding: 0.5em;
}
#search form > div,
#filters form > div {
display: inline;
}
</style>
</head>
<body>
<main>
<h1>Input In Container Fixed To Bottom Of Viewport</h1>
<div id="filters">
<form method="post" action="?">
<div>
<label for="filter-date">Date</label>
<input type="text" name="filter-date" id="filter-date"/>
</div>
<div>
<input type="submit" value="Filter"/>
</div>
</form>
</div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
</ul>
</main>
<footer>
<div id="search">
<form method="post" action="?">
<div>
<label for="search-from-date">Date from</label>
<input type="text" name="search-from-date" id="search-from-date"/>
</div>
<div>
<label for="search-to-date">Date to</label>
<input type="text" name="search-to-date" id="search-to-date"/>
</div>
<div>
<input type="submit" value="Search"/>
</div>
</form>
</div>
</footer>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../build/jquery.datetimepicker.full.js"></script>
<script>
/*jslint browser:true*/
/*global jQuery, document*/
jQuery(document).ready(function () {
'use strict';
jQuery('#filter-date, #search-from-date, #search-to-date').datetimepicker();
});
</script>
</body>
</html>

115
tests/input_in_container_fixed_to_top_of_viewport.html Executable file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<title>Input In Container Fixed To Top Of Viewport | datetimepicker Tests</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../jquery.datetimepicker.css"/>
<style>
body {
margin: 0;
padding: 0;
}
main {
width: 960px;
margin: 0 auto;
}
#search {
position: fixed;
top: 0;
z-index: 3;
width: 100%;
color: #f0f0f0;
background-color: #333;
opacity: 0.9;
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
}
#search form {
width: 960px;
margin: 0 auto;
padding: 0.5em;
}
#search form > div,
#filters form > div {
display: inline;
}
</style>
</head>
<body>
<main>
<h1>Input In Container Fixed To Top Of Viewport</h1>
<div id="filters">
<form method="post" action="?">
<div>
<label for="filter-date">Date</label>
<input type="text" name="filter-date" id="filter-date"/>
</div>
<div>
<input type="submit" value="Filter"/>
</div>
</form>
</div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
</ul>
</main>
<footer>
<div id="search">
<form method="post" action="?">
<div>
<label for="search-from-date">Date from</label>
<input type="text" name="search-from-date" id="search-from-date"/>
</div>
<div>
<label for="search-to-date">Date to</label>
<input type="text" name="search-to-date" id="search-to-date"/>
</div>
<div>
<input type="submit" value="Search"/>
</div>
</form>
</div>
</footer>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../build/jquery.datetimepicker.full.js"></script>
<script>
/*jslint browser:true*/
/*global jQuery, document*/
jQuery(document).ready(function () {
'use strict';
jQuery('#filter-date, #search-from-date, #search-to-date').datetimepicker();
});
</script>
</body>
</html>