javascriptjquerydatetimepickerjquerydatetimepicker

datetimepicker.js error when loaded in div which is not in the DOM initially

I am creating a form and using datetimepicker.js in that. My form elements are initially hidden and when I load them in DOM for first time, Datetimepicker is working properly but from second time on-wards it starts giving error:

Uncaught TypeError: Cannot read property 'allowTimes' of undefined

Demo

$(document).on("click", ".popup-checkbox", function() {

  if ($(this).hasClass("schedule-fullday-full")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-fullday").show("drop", {
      direction: "down"
    }, 200);
    $(".schedule-start-date").datetimepicker();
  } else if ($(this).hasClass("schedule-fullday-time")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-time").show("drop", {
      direction: "down"
    }, 200);
  } else if ($(this).hasClass("schedule-fullday-repeat")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-repeat").show("drop", {
      direction: "down"
    }, 200);
  }

});
.popup-schedule-type {
  display: none;
}

.popup-checkbox {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid #222;
  cursor: pointer;
}

.popup-checkbox-boxes {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.full.min.js"></script>

<div class="popup-checkbox-boxes">
  <div class="popup-checkbox schedule-fullday-full">
    Full Day
  </div>
  <div class="popup-checkbox schedule-fullday-time">
    Time Bound
  </div>
  <div class="popup-checkbox schedule-fullday-repeat">
    Repeating
  </div>
</div>

<div class="popup-schedule-type popup-schedule-fullday">
  <div class="popup-input-holder">
    <div class="popup-input-wrap rq-input-fifty rq-with-label">
      <label class="rq-label">Order Date</label>
      <input type="text" class="rq-input schedule-start-date">
    </div>
  </div>
</div>
<div class="popup-schedule-type popup-schedule-time">
  Add Time Bound Event
</div>
<div class="popup-schedule-type popup-schedule-repeat">
  Add Repeat Event
</div>

Here popup-schedule-type is hidden by default and shows after the jQuery call. First time datetimepicker element is loading correctly but from second time on-wards it starts giving error.

Solution

  • You need to use the complete parameter function of the show to populate the input field so that the field is completely shown before applying the datetimepicker see below demo and a few things that if you are using the options for the animation like direction or anyother then it is better to use the duration inside along with the options rather than sending as a parameter to show.

    $(".popup-schedule-fullday").show('drop', {
      direction: 'down',
      duration: 200,
    }, function() {
      $(".schedule-start-date").datetimepicker({dateFormat: "yy-mm-dd HH:ii:ss"});
    });


    $(document).on("click", ".popup-checkbox", function() {

  if ($(this).hasClass("schedule-fullday-full")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-fullday").show('drop', {
      direction: 'down',
      duration: 200,
    }, function() {
      $(".schedule-start-date").datetimepicker({
        dateFormat: "yy-mm-dd HH:ii:ss"
      });
    });

  } else if ($(this).hasClass("schedule-fullday-time")) {

    $(".popup-schedule-type").hide();

    $(".popup-schedule-time").show("drop", {
      direction: "down"
    }, 200);
  } else if ($(this).hasClass("schedule-fullday-repeat")) {
    $(".popup-schedule-type").hide();
    $(".popup-schedule-repeat").show("drop", {
      direction: "down"
    }, 200);
  }

});
    .popup-schedule-type {
  display: none;
}

.popup-checkbox {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid #222;
  cursor: pointer;
}

.popup-checkbox-boxes {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.17/jquery.datetimepicker.full.js"></script>

<div class="popup-checkbox-boxes">
  <div class="popup-checkbox schedule-fullday-full">
    Full Day
  </div>
  <div class="popup-checkbox schedule-fullday-time">
    Time Bound
  </div>
  <div class="popup-checkbox schedule-fullday-repeat">
    Repeating
  </div>
</div>

<div class="popup-schedule-type popup-schedule-fullday">
  <div class="popup-input-holder">
    <div class="popup-input-wrap rq-input-fifty rq-with-label">
      <label class="rq-label">Order Date</label>
      <input type="text" class="rq-input schedule-start-date">
    </div>
  </div>
</div>
<div class="popup-schedule-type popup-schedule-time">
  Add Time Bound Event
</div>
<div class="popup-schedule-type popup-schedule-repeat">
  Add Repeat Event
</div>