Fancybox用户界面日期选择器不显示

我想包括datecicker-ui在fancybox但datepicker不显示在模式。我更改z-index在datepicker-ui上更大。Fancybox用户界面日期选择器不显示

<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' 
       }); 
          } 

     }); 

    });

Datepickers在DOM树中，但他们没有显示。我能做些什么？请任何想法。

在此先感谢。

来源

2017-05-11 Darina Andreeva

欢迎来到Stack Overflow。请检查您的控制台是否有任何警报或错误。请检查jQuery UI是否正确加载。 – Twisty

另外，他们为什么都是“只读”？ – Twisty

叉形从@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属性，如果用户选择的日期，它canot被写入场。我建议不要使用readonly。如果你想阻止用户输入内容，除了通过日期选择器，还有一种方法可以做到这一点。

来源

2017-05-11 17:34:00 Twisty

嗨，我评论了我的所有代码，并把你的决定，但仍然无法正常工作。日期选择器在那里但仍未显示。只显示它的图标。我在控制台中没有任何错误 –

有趣的是，你看到了什么图标？ Datepicker UI默认不显示图标，我在代码中看不到您要添加图标。也许你的网页上有多个日期选择脚本？ – Janis

是的，我的项目中有两个日期选择器。他们完美地工作。当类有hasdatepicker时显示图标。当datepicker在页面中初始化时。也许这是问题。当我想在fancybox中加载日期选择器时。我会检查它的多个日期选择器。 –

我做了一个快速演示，不受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

来源

2017-05-11 15:45:25 Janis

是的，我看到，但在我的项目不工作，也许有些事。东西阻碍。一些API或风格可能，我不知道。感谢您的帮助。 –

我找到了一些东西，想告诉你。

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

      } 
      }); 


    });

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

来源

2017-05-18 07:29:04

Fancybox用户界面日期选择器不显示

回答

相关问题