1

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

未捕获的类型错误：无法读取未定义的属性“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元素加载正确，但从第二次开始，它开始出错。

4

1 回答 1

1

您需要使用completeshow 的参数功能来填充输入字段，以便在应用以下演示之前完全显示该字段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>

于 2018-02-06T13:50:33.117 回答