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

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

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

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

115
tests/input_in_container_fixed_to_bottom_of_viewport.html Executable file
View File

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

115
tests/input_in_container_fixed_to_top_of_viewport.html Executable file
View File

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