Question

我正在使用JQuery UI的datepicker来显示日期。

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

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

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

https://www.mathworks.com/help/optim/ug/intlinprog.html#bts3gkc-2

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

最后我点击日期字段，弹出日历，选择不同的日期，日历不会消失！

以下是用户点击编辑按钮时的代码...

        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>

Answer 1

我在Datepicker的文档中看到了选项autoclose

你可以尝试一下：

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

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

Answer 2

看来我有一个DIV和一个具有相同ID的INPUT。谢谢。

选择后，Jquery Datepicker保持可见

2 个答案: