问题:datetimepicker 选中时间后,input框没有值

问题描述:bootstrap模态框中用到datetimepicker,点击确定时间后,input框中没有值

原因:首先,模态框在关闭前我把form表单中的数据重置了

 //模态框 关闭事件
    $('#roadSectionAddOrUpdateModel').on('hide.bs.modal', function () {
        $('#roadSectionAUForm')[0].reset();
    });

然后是datetimepicker初始化,其中autoclose为true,在选中时间后自动关闭选择器。

$('.form_datetime_year').datetimepicker({
        format: "yyyy",
        startView: 4,  //首先显示的视图, 0当前时的分钟区间 1该天的每时 2该月的每天 3该年的每月 4年视图
        minView: 4,
        maxView: 4,
        todayBtn: true,  //是否显示今日按钮
        autoclose: true,  //当选择一个日期之后是否立即关闭此日期时间选择器。
        language: 'zh-CN'
    });

在网上查找资料后才明白,在自动关闭选择器后,会触发'show.bs.modal' 与 'hide.bs.modal' 事件;此处问题是在调用了 autoclose时,进而调用了bootstrap-datetimepicker.js中的hide方法,然后里面内容会被重置。

解决方法:在bootstrap-datetimepicker.js中,将

this.element.trigger({
        type: 'hide',
        date: this.date
      });

替换为  this.hide();

如下

 hide: function () {
      if (!this.isVisible) return;
      if (this.isInline) return;
      this.picker.hide();
      $(window).off('resize', this.place);
      this.viewMode = this.startViewMode;
      this.showMode();
      if (!this.isInput) {
        $(document).off('mousedown', this.hide);
      }

      if (
        this.forceParse &&
          (
            this.isInput && this.element.val() ||
              this.hasInput && this.element.find('input').val()
            )
        )
        this.setValue();
      this.isVisible = false;
      /*this.element.trigger({
        type: 'hide',
        date: this.date
      });*/
      this.hide();
    },

 

你可能感兴趣的:(bootstrap)