没有显示 ui-datepicker 的 Fancybox答案

【问题标题】：Fancybox wiht ui-datepicker not showing没有显示 ui-datepicker 的 Fancybox
【发布时间】：2017-05-11 14:47:52
【问题描述】：

我想在 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，他显示：无；

 $('#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 树中，但它们没有显示。我能做些什么？请有任何想法。

提前致谢。

【问题讨论】：

欢迎来到 Stack Overflow。请检查您的控制台是否有任何警报或错误。请检查 jQuery UI 是否正确加载。
还有，为什么他们都是readonly？

标签： javascript jquery jquery-ui datepicker fancybox

【解决方案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。如果你想阻止用户输入内容，除了通过日期选择器，也有办法做到这一点。

【讨论】：

嗨，我评论了我的所有代码并做出了你的决定，但仍然无法正常工作。日期选择器在那里，但仍未显示。仅显示它的图标。我在控制台中没有任何错误
有趣，你看到了什么图标？ Datepicker UI 默认情况下不显示图标，我在您的代码中没有看到您将添加图标。也许您的页面上有多个日期选择器脚本？
是的，我的项目中还有两个日期选择器。他们完美地工作。当有类 hasdatepicker 时显示图标。当 datepicker 在页面中初始化时。也许是问题所在。当我想在 fancybox 中加载 datepicker 时。我会检查它是否有多个日期选择器。
我真的有 multiDatesPicker: version: "1.6.3" 。在那里进行什么搜索。

【解决方案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

【讨论】：

是的，我明白了，但在我的项目中可能不起作用。有什么阻碍。可能是一些 API 或样式，我不知道。谢谢您的帮助。

【解决方案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(),
               });

           }
           });


    });

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

【讨论】：