ui-datepicker 未显示的 Fancybox

Question

我想在 fancybox 中包含 datepicker-ui 但 datepicker 没有显示在模态中。我将 datepicker-ui.

上的 z-index 变大了

 <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 模态他是白衣 display:none;

 $('#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

我做了一个快速演示，它在没有 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 2

从@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 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(),
               });

           }
           });


    });

简单又好。简单又好。我希望这会对某人有所帮助。

ui-datepicker 未显示的 Fancybox

Fancybox wiht ui-datepicker not showing

javascript

jquery

jquery-ui

datepicker

fancybox