Fancybox wiht ui-datepicker not showing

Question

i want to include datepicker-ui in fancybox but the datepicker not showing in modal. I change z-index to be bigger on datepicker-ui.

 <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/>

This is html in modal he is whit 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'
                });
                             }

        });

    });

Datepickers are there in DOM tree, but they not showing. What can i do? Please, any ideas.

Thanks in advance.

Answer 1

I made a quick demo and it works fine without readonly attribute -

  <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

Forked the CodePen from @Janis as it did not work exactly.

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

Since input has readonly attribute, if a user selects a date, it canot be written into the field. I would advise not using readonly . If you want to prevent the user from entering content except via the datepicker, there is a way to do that too.

Answer 3

I was find something and want to show you.

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

           }
           });


    });

Simply and good. Simply and good. I hope so this will help for someone.