javascript - Jquery Datepicker 在选择后保持可见

标签 javascript jquery jquery-ui

我正在使用 JQuery UI 的日期选择器来显示日期。

我有一个带有表格的网页,允许用户通过单击“编辑”按钮来编辑日期。通过 javascript,文本变成 input type="text"然后设置为datepicker当我专注于输入时。

这一切看起来都很完美,但是当我选择日期时,该值不会改变,并且日历保持可见并且不会消失。

这就是我点击“编辑”按钮之前的样子...

enter image description here

然后当我点击“编辑”按钮时......

enter image description here

最后,我单击日期字段,弹出日历,我选择不同的日期,并且日历不会消失!

enter image description here

这是用户单击编辑按钮时的代码...

        function editGeneralCheckIn(id)
        {
          var savedate = document.getElementById("adate_"+id);
          var t = savedate.innerHTML.split(/[- :]/);

          var datecol = document.getElementById("date_"+id);
          datecol.innerHTML = "";
          datecol.innerHTML = "<input type=\"text\" name=\"date_"+id+"\" value=\""+t[1]+"/"+t[2]+"/"+t[0]+"\" onfocus=\"loadUpDate("+id+")\">";
          datecol.innerHTML += "<input type=\"text\" name=\"time_"+id+"\" value=\""+t[3]+":"+t[4]+":"+t[5]+"\">";
          datecol.innerHTML += "<input type=\"hidden\" value=\""+id+"\">";

          var controll = document.getElementById("controlbuttons_"+id);
          controll.innerHTML = "<button type=\"button\" onclick=\"generalCancel("+id+")\">Cancel</button>";
          controll.innerHTML += "<button type=\"button\" onclick=\"generalOkay("+id+")\">Okay</button>";

        }

重点是看看新输入的焦点上会发生什么......

        function loadUpDate(id)
        {      
          $('#date_'+id).datepicker();
        }

这是我的 <head> 中的代码部分,虽然日历看起来很好,所以我不认为这是一个库问题...我认为这可能与框中已经存在的值有关?

<head>
    <link rel="stylesheet" href="style/customerhistory.css">

    <link rel="stylesheet" href="libraries/jquery-ui-1.12.1.custom/jquery-ui.css">
    <script src="libraries/jquery-3.3.1.min.js"></script>
    <script src="libraries/jquery-ui-1.12.1.custom/jquery-ui.js"></script>

  </head>

最佳答案

我在 Datepicker 文档中看到有选项 autoclose

你可以尝试一下:

$('#date_'+id).datepicker({
    autoclose: true
});

http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#autoclose

关于javascript - Jquery Datepicker 在选择后保持可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49226984/

相关文章:

javascript - 使用 Underscore.js、jQuery 和 jQueryUI 在 RequireJS 中无法正确加载 Gridstack.js

javascript - 实时网络库 - 用 socket.io 或什么替换 hookbox?

javascript - 使用多个依赖项加载仅进行一次 AJAX 调用

javascript - 使用下拉菜单时,JQuery TimePicker OnChange 不会触发

javascript - 日期的正则表达式?

JQuery 选项卡 - 更改输入条目选项卡的背景颜色

javascript - Yarn Install - 如何强制使用最新的次要版本和 Node 补丁 (10.x.x)

javascript - 一个盒子的最大体积

jquery - 尝试使用 JQuery 突出显示当前导航图标

jquery - css 图片库有问题..?