ファンシーボックスでui-datepickerが表示されない

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です。

$('#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属性を持っているので、ユーザーが日付を選択した場合、それがフィールドに書き込まれcanot。私は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(), 
       }); 

      } 
      }); 


    }); 

単純にいいです。シンプルで良い。私はこれが誰かのために役立つことを願っています。