在动态生成的输入上显示 jquery 日期选择器

Question

我有一个 HTML 页面使用来自 github 的 Bootstrap3-dialog :

该页面有一个按钮，当您单击它时会显示一个带有输入的表单，我想向该输入添加一个日期选择器，但它是动态生成的，点击输入不显示日期选择器.

从下面的代码中，您可以看到当输入具有焦点时会显示 "console.log()" 消息，因此日期选择器应该正常显示。

你能帮我找出我的代码有什么问题吗？

谢谢。

 $(function() {
   $("body").on("focus", "#date", function() {
     console.log("Supposed to show the datepicker"); //This is working so the datepicker should work too.
     $('#date').datepicker();
     $('#date').datepicker('show');
   });
   $("body").on("click", "#modal", function() {
     BootstrapDialog.show({
       message: '<div class="input-group"><span class="input-group-addon"><strong>Schedule date</strong></span><input value="" type="text" id="date" class="form-control">',
       buttons: [{
         icon: 'glyphicon glyphicon-send',
         label: 'Save changes',
         cssClass: 'btn-primary',
         autospin: true,
         action: function(dialogRef) {
           dialogRef.enableButtons(false);
           dialogRef.setClosable(false);
           dialogRef.getModalBody().html('Dialog closes in 5 seconds.');
           setTimeout(function() {
             dialogRef.close();
           }, 5000);
         }
       }, {
         label: 'Close',
         action: function(dialogRef) {
           dialogRef.close();
         }
       }]
     });
   });
 });

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/nakupanda/bootstrap3-dialog/master/src/css/bootstrap-dialog.css">
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/nakupanda/bootstrap3-dialog/master/src/js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
</script>

<body>
  <button type="button" id="modal" class="btn btn-primary">Show Modal</button>
</body>

Answer 1

你厌倦了这个：

  $("#date").on("click", function(){
        console.log("Supposed to show the datepicker");//This is working so the datepicker should work too.
        $('#date').datepicker();
        $('#date').datepicker('show');
    });

Answer 2

日期选择器隐藏在模态叠加层后面。您需要设置更高的 z-index 才能显示。

.ui-datepicker {
  z-index: 2000; 
}

Answer 3

动态显示任何模态时初始化日期选择器：

$(document).on('shown.bs.modal', function() {
    $('.datetimepicker').datetimepicker();
});

在动态生成的输入上显示 jquery 日期选择器

Show jquery datepicker on dynamically generated input

html

javascript

jquery

jquery-ui

datepicker