未显示带有 ui 日期选择器的花式框

Question

我想在Fancybox中包含datepicker-ui，但日期选择器没有显示在modal中。我在日期选择器-ui上将z索引更改为更大。

 <div class="col-md-6">
                <label style="color:#003580;">Дата на настаняване:</label>
                <input type="text" id="modal-datepicker1" readonly/>
            </div>
            <div class="col-md-6">
                <label style="color:#003580;">Дата на напускане:</label>
                <input type="text" id="modal-datepicker2" readonly/>

这是模态中的html，他是白色显示：无;

 $('#btnForm').click(function () {
        $.fancybox({
            autoScale: true,
            content: $("#divForm").html(),
            openEffect  : 'none',
            closeEffect : 'none',
            afterLoad: function () {
                $("#modal-datepicker1").datepicker({
                    dateFormat: 'yy-mm-dd'
                });
                $("#modal-datepicker2").datepicker({
                    dateFormat: 'yy-mm-dd'
                });
                             }
        });
    });

日期选择器存在于 DOM 树中，但它们没有显示。我能做什么？请，任何想法。

提前谢谢。

Answer 1

从@Janis分叉了 CodePen，因为它不完全工作。

http://codepen.io/anon/pen/vmRRGL

.HTML

<p>Date: <br />
  <input type="text" id="modal-datepicker1" />
</p>
<p>Date readonly: <br /> 
  <input type="text" id="modal-datepicker1" readonly />
</p>

JavaScript

$(function() {
  $("#btnForm").click(function() {
    $.fancybox.open({
      src: "#divForm",
      type: "inline",
      touch: false,
      autoFocus: false,
      afterLoad: function() {
        $("#divForm input").datepicker({
          dateFormat: "yy-mm-dd"
        });
      }
    });
  });
});

由于input具有readonly属性，因此如果用户选择日期，则不会将其写入字段。我建议不要使用readonly.如果要阻止用户输入内容，除非通过日期选择器，也有一种方法可以做到这一点。

Answer 2

我做了一个快速演示，没有readonly属性就可以正常工作 -

  <p>Date: <br />
    <input type="text" id="modal-datepicker1" />
  </p>
  <p>
    Date readonly: <br /> 
    <input type="text" id="modal-datepicker1" readonly />
  </p>

http://codepen.io/anon/pen/rmdYvg

Answer 3

我发现了一些东西，想给你看。

  <div class="col-md-6">
            <label style="color:#003580;">Дата на настаняване:</label><br>
            <input type="date" id="modal-datepicker-date-from" style="border: 1px solid #ddd;" />
        </div>
        <div class="col-md-6">
            <label style="color:#003580;">Дата на напускане:</label><br>
            <input type="date" id="modal-datepicker-date-to" style="border: 1px solid #ddd;" >
        </div>




  $("a.fancybox").click(function() {
        $.fancybox({
            autoScale: true,
            content: $("#divForm").html()
        });
           $('#modal-datepicker-date-from').on('click',function(){
               if (!Modernizr.inputtypes.date) {
               $('input[type=date]').datepicker({
                   dateFormat: 'yy-mm-dd',
                   setDate: new Date(),
               });
           }
           });

    });

简单而美好。简单而美好。我希望这对某人有所帮助。