如何关闭日期选择窗口?

时间:2016-03-03 09:14:55

标签: javascript jquery bootstrap-modal daterangepicker

我们使用Bootstrap创建了一个自定义日期框组件。但是,当我们选择日期时,我们无法关闭日历日期选择器,然后选择不关闭的日历。

此处有人告诉我如何解决此问题。实际上我们在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);
}

1 个答案:

答案 0 :(得分:1)

当您打开website阅读时,它会清楚地说:

  

隐藏日期选择器。

.datepicker('hide')

屏幕截图,如果您错过了它:

我不明白你是如何错过它的,即使你没有JavaScript的命令。

如果这不是正确的问题,请创建一个代码段,然后演示问题,以便我们解决问题。