问题: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();
    },

 

<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <!-- <th:block th:include="include :: datetimepicker-css"/>--> <th:block th:include="include :: bootstrap-fileinput-css"/> </head> <style> </style> <body> <div> <div> <input type="text" name="filex" id="inputfile"> <div class='file-loading'> <input class='form-control file-upload' name='file' type='file' id="filex"> </div> </div> <div> <button onclick="chuli()">确定</button> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: echarts-js"/> <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: bootstrap-fileinput-js"/> <script th:inline="javascript"> $(".file-upload").fileinput({ uploadUrl: ctx + 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, previewId, index) { $("input[name='" + event.currentTarget.id + "']").val(data.response.url) }).on('fileremoved', function (event, id, index) { $("input[name='" + event.currentTarget.id + "']").val('') }) function chuli() { const x = document.getElementById("inputfile"); alert(x.value); } </script> </body> </html> 我使用的ruoyi架,是bootstrap版本的,这是我的代码,我现在是通过组件打开的,我现在希望我点击确定能把我拿到的传回上一个页面
最新发布
09-09
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值