Question

我正在创建一个表单并使用datetimepicker.js。我的表单元素最初是隐藏的，当我第一次在DOM中加载它们时，Datetimepicker工作正常，但从第二次开始，它开始给出错误：

未捕获的TypeError：无法读取未定义的属性'allowTimes'

演示

$(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>

此处popup-schedule-type默认隐藏，并在jQuery调用后显示。第一次datetimepicker元素正确加载，但从第二次开始，它开始给出错误。

Answer 1

您需要使用show的complete参数函数来填充输入字段，以便在应用datetimepicker之前完全显示该字段，请参阅下面的演示以及如果您使用的一些内容像direction或其他任何其他动画的选项，最好在内部使用duration和选项，而不是作为参数发送到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>

在div中加载时，datetimepicker.js出错，最初不在DOM中

1 个答案: