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

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.