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.

build/jquery.datetimepicker.full.js

@@ -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');
-							}
+							} 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()))) {
-							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。
+			 * Runs the callback for each of the specified node's ancestors.
-                 * 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.
+			 * Return FALSE from the callback to stop ascending.
-                 * by Soon start
+			 *
+			 * @param {DOMNode} node
+			 * @param {Function} callback
+			 * @returns {undefined}
 			 */
-                var offset = datetimepicker.data('input').offset(),
+			forEachAncestorOf = function (node, callback) {
-                    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];
 				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

jquery.datetimepicker.js

@@ -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。
+			 * Runs the callback for each of the specified node's ancestors.
-                 * 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.
+			 * Return FALSE from the callback to stop ascending.
-                 * by Soon start
+			 *
+			 * @param {DOMNode} node
+			 * @param {Function} callback
+			 * @returns {undefined}
 			 */
-                var offset = datetimepicker.data('input').offset(),
+			forEachAncestorOf = function (node, callback) {
-                    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];
 				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;
 	}
-
 }));

tests/input_in_container_fixed_to_bottom_of_viewport.html

@@ -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>

tests/input_in_container_fixed_to_top_of_viewport.html

@@ -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>