如何关闭日期选择器 window?
How to close date picker window?
我们使用 Bootstrap 制作了一个自定义日期框组件。但是当我们在 select 日期然后日历未关闭时,我们无法关闭日历日期选择器。
这里有人告诉我如何解决这个问题。其实我们对JS没有很好的掌握。
这里是bootstrap-datetimepicker.js。
初始化代码:
init = function() {
var icon = false, i, dDate;
picker.options = $.extend({}, defaults, options);
if (!(picker.options.pickTime || picker.options.pickDate))
throw new Error('Must choose at least one picker');
picker.id = dpgId++;
moment.lang(picker.options.language);
picker.date = moment();
picker.element = $(element);
picker.unset = false;
picker.isInput = picker.element.is('input');
picker.component = false;
if (picker.element.hasClass('input-group'))
picker.component = picker.element.find('.input-group-addon');
picker.format = picker.options.format;
if (!picker.format) {
if (picker.isInput)
picker.format = picker.element.data('format');
else
picker.format = picker.element.find('input').data('format');
if (!picker.format)
picker.format = (picker.options.pickDate ? 'L' : '');
picker.format += (picker.options.pickTime ? ' LT' : '');
}
if (picker.component)
icon = picker.component.find('span');
if (picker.options.pickTime) {
if (icon && icon.length) {
picker.timeIcon = icon.data('time-icon');
picker.upIcon = icon.data('up-icon');
picker.downIcon = icon.data('down-icon');
}
/* if (!picker.timeIcon)
picker.timeIcon = 'glyphicon glyphicon-time';*/
if (!picker.upIcon)
picker.upIcon = 'glyphicon glyphicon-chevron-up';
if (!picker.downIcon)
picker.downIcon = 'glyphicon glyphicon-chevron-down';
if (icon)
icon.addClass(picker.timeIcon);
}
if (picker.options.pickDate) {
if (icon && icon.length)
picker.dateIcon = icon.data('date-icon');
if (!picker.dateIcon)
picker.dateIcon = 'glyphicon glyphicon-calendar';
if (icon) {
icon.removeClass(picker.timeIcon);
icon.addClass(picker.dateIcon);
}
}
picker.widget = $(
getTemplate(picker.timeIcon, picker.upIcon,
picker.downIcon, picker.options.pickDate,
picker.options.pickTime, picker.options.collapse))
.appendTo('body');
picker.minViewMode = picker.options.minViewMode
|| picker.element.data('date-minviewmode') || 0;
if (typeof picker.minViewMode === 'string') {
switch (picker.minViewMode) {
case 'months':
picker.minViewMode = 1;
break;
case 'years':
picker.minViewMode = 2;
break;
default:
picker.minViewMode = 0;
break;
}
}
picker.viewMode = picker.options.viewMode
|| picker.element.data('date-viewmode') || 0;
if (typeof picker.viewMode === 'string') {
switch (picker.viewMode) {
case 'months':
picker.viewMode = 1;
break;
case 'years':
picker.viewMode = 2;
break;
default:
picker.viewMode = 0;
break;
}
}
for (i in picker.options.disabledDates) {
dDate = picker.options.disabledDates[i];
dDate = moment(dDate);
// if this is not a valid date then set it to the startdate -1
// day so it's disabled.
if (!dDate.isValid)
dDate = moment(startDate).subtract(1, "day").format("L");
picker.options.disabledDates[i] = dDate.format("L");
}
picker.startViewMode = picker.viewMode;
picker.setStartDate(picker.options.startDate
|| picker.element.data('date-startdate'));
picker.setEndDate(picker.options.endDate
|| picker.element.data('date-enddate'));
fillDow();
fillMonths();
fillHours();
fillMinutes();
update();
showMode();
attachDatePickerEvents();
if (picker.options.defaultDate !== "")
picker.setValue(picker.options.defaultDate);
}
当你打开 website 并 阅读它时 ,它清楚地写着:
Hide the datepicker.
.datepicker('hide')
给你一个截图,如果你错过了:
我不明白你怎么会错过它,即使你没有 JavaScript 的命令。
如果这不是正确的问题,请创建一个片段然后演示问题以便我们解决它。
我们使用 Bootstrap 制作了一个自定义日期框组件。但是当我们在 select 日期然后日历未关闭时,我们无法关闭日历日期选择器。
这里有人告诉我如何解决这个问题。其实我们对JS没有很好的掌握。
这里是bootstrap-datetimepicker.js。
初始化代码:
init = function() {
var icon = false, i, dDate;
picker.options = $.extend({}, defaults, options);
if (!(picker.options.pickTime || picker.options.pickDate))
throw new Error('Must choose at least one picker');
picker.id = dpgId++;
moment.lang(picker.options.language);
picker.date = moment();
picker.element = $(element);
picker.unset = false;
picker.isInput = picker.element.is('input');
picker.component = false;
if (picker.element.hasClass('input-group'))
picker.component = picker.element.find('.input-group-addon');
picker.format = picker.options.format;
if (!picker.format) {
if (picker.isInput)
picker.format = picker.element.data('format');
else
picker.format = picker.element.find('input').data('format');
if (!picker.format)
picker.format = (picker.options.pickDate ? 'L' : '');
picker.format += (picker.options.pickTime ? ' LT' : '');
}
if (picker.component)
icon = picker.component.find('span');
if (picker.options.pickTime) {
if (icon && icon.length) {
picker.timeIcon = icon.data('time-icon');
picker.upIcon = icon.data('up-icon');
picker.downIcon = icon.data('down-icon');
}
/* if (!picker.timeIcon)
picker.timeIcon = 'glyphicon glyphicon-time';*/
if (!picker.upIcon)
picker.upIcon = 'glyphicon glyphicon-chevron-up';
if (!picker.downIcon)
picker.downIcon = 'glyphicon glyphicon-chevron-down';
if (icon)
icon.addClass(picker.timeIcon);
}
if (picker.options.pickDate) {
if (icon && icon.length)
picker.dateIcon = icon.data('date-icon');
if (!picker.dateIcon)
picker.dateIcon = 'glyphicon glyphicon-calendar';
if (icon) {
icon.removeClass(picker.timeIcon);
icon.addClass(picker.dateIcon);
}
}
picker.widget = $(
getTemplate(picker.timeIcon, picker.upIcon,
picker.downIcon, picker.options.pickDate,
picker.options.pickTime, picker.options.collapse))
.appendTo('body');
picker.minViewMode = picker.options.minViewMode
|| picker.element.data('date-minviewmode') || 0;
if (typeof picker.minViewMode === 'string') {
switch (picker.minViewMode) {
case 'months':
picker.minViewMode = 1;
break;
case 'years':
picker.minViewMode = 2;
break;
default:
picker.minViewMode = 0;
break;
}
}
picker.viewMode = picker.options.viewMode
|| picker.element.data('date-viewmode') || 0;
if (typeof picker.viewMode === 'string') {
switch (picker.viewMode) {
case 'months':
picker.viewMode = 1;
break;
case 'years':
picker.viewMode = 2;
break;
default:
picker.viewMode = 0;
break;
}
}
for (i in picker.options.disabledDates) {
dDate = picker.options.disabledDates[i];
dDate = moment(dDate);
// if this is not a valid date then set it to the startdate -1
// day so it's disabled.
if (!dDate.isValid)
dDate = moment(startDate).subtract(1, "day").format("L");
picker.options.disabledDates[i] = dDate.format("L");
}
picker.startViewMode = picker.viewMode;
picker.setStartDate(picker.options.startDate
|| picker.element.data('date-startdate'));
picker.setEndDate(picker.options.endDate
|| picker.element.data('date-enddate'));
fillDow();
fillMonths();
fillHours();
fillMinutes();
update();
showMode();
attachDatePickerEvents();
if (picker.options.defaultDate !== "")
picker.setValue(picker.options.defaultDate);
}
当你打开 website 并 阅读它时 ,它清楚地写着:
Hide the datepicker.
.datepicker('hide')
给你一个截图,如果你错过了:
我不明白你怎么会错过它,即使你没有 JavaScript 的命令。
如果这不是正确的问题,请创建一个片段然后演示问题以便我们解决它。