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.

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

View File

@ -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;
});
@ -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;
}
@ -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();
}
@ -1582,7 +1581,6 @@ var DateFormatter;
datetimepicker.setOptions = function (_options) {
var highlightedDates = {};
options = $.extend(true, {}, options, _options);
if (_options.allowTimes && $.isArray(_options.allowTimes) && _options.allowTimes.length) {
@ -2164,6 +2162,8 @@ var DateFormatter;
classes.push('xdsoft_disabled');
} else if (options.disabledWeekDays.indexOf(day) !== -1) {
classes.push('xdsoft_disabled');
}else if (input.is('[readonly]')) {
classes.push('xdsoft_disabled');
}
if (customDateSettings && customDateSettings[1] !== "") {
@ -2240,8 +2240,9 @@ var DateFormatter;
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
* 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}
*/
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];
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");
@ -2836,6 +2905,7 @@ var DateFormatter;
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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

@ -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;
});
@ -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;
}
@ -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();
}
@ -1006,7 +1005,6 @@
datetimepicker.setOptions = function (_options) {
var highlightedDates = {};
options = $.extend(true, {}, options, _options);
if (_options.allowTimes && $.isArray(_options.allowTimes) && _options.allowTimes.length) {
@ -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
* 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}
*/
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];
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");
@ -2263,6 +2329,7 @@
return result;
};
$.fn.datetimepicker.defaults = default_options;
function HighlightedDate(date, desc, style) {
@ -2271,5 +2338,4 @@
this.desc = desc;
this.style = style;
}
}));

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>

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>