0

在搜索了互联网和 StackOverflow，以及阅读了这个特定日期时间选择器的 3 或 4 个不同版本和迭代之后，我遇到了一些问题，这些问题阻碍了我完成这一套功能。

首先，我必须确认我正在使用的版本，这似乎不是 StackOverflow 上流行的版本。

https://tempusdominus.github.io/bootstrap-4/

我还实施了一些在未缩小的代码中建议的修复以更正清除按钮，这些修复在此处记录：

https://github.com/tempusdominus/bootstrap-4/issues/275 https://github.com/tempusdominus/bootstrap-4/issues/34

这些代码修复允许小部件按预期工作，除了两个主要功能。这是我需要做的事情：

  1. 从单击侦听器或 Bootstrap 模式关闭事件中，清除 datetimepicker。记录的 clear 方法不起作用。
  2. 查询 datetimepicker 的状态，确认是否为空或未设置。

这是HTML标记

<div class="input-group date" id="professional_availability_selector" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#professional_availability_selector">
    <div class="input-group-append" data-target="#professional_availability_selector" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>                   
    </div>
</div>

这是实例。

$('#professional_availability_selector').datetimepicker({
format: 'L',
buttons: {showClear: true},
useCurrent: false,
showClear: true,
icons: {
   time: 'fas fa-clock',
   date: 'fas fa-calendar',
   up: 'fas fa-arrow-up',
   down: 'fas fa-arrow-down',
   previous: 'fas fa-chevron-left',
   next: 'fas fa-chevron-right',
   today: 'fas fa-calendar-check-o',
   clear: 'fas fa-window-close',
   close: 'far fa-times'
}

});

这是我根据 BS 手风琴的关闭触发清除的地方：

$(".collapse").on('hidden.bs.collapse', function(){
   console.log('The collapsible content is now hidden.');
   $(this).find("input[type=text], select").val("");
   $('#professional_availability_selector').datetimepicker("clear");
   table.ajax.reload();
});

我还检查实际值并将其转换为 ISO 日期，如果它检查为 NOT EMPTY，它永远不会显示为 NOT EMPTY。

这是我的空虚检查器（或实际上是几个）：

    var availability_date = jQuery('#professional_availability_selector').datetimepicker('viewDate');
          console.log("availability: " + availability_date);
          var availability_date_val = jQuery('#professional_availability_selector').val();
          console.log("availability val: " + availability_date_val);

          if ($("#professional_availability_selector").datetimepicker('viewDate') == "") {
            console.log("they aint no date");
          } else console.log("we got a date thurr");

          if (jQuery('#professional_availability_selector').datetimepicker('viewDate') !== "") {
            var availability_date = jQuery('#professional_availability_selector').datetimepicker('viewDate');
            var isodate = new Date(availability_date);
            date = isodate.toISOString();
          } else var date = "";

          if (!$("#professional_availability_selector").val()) {
              console.log("is an empty string");
          } else {
              console.log("is not an empty string");
          }

并且这里是上面代码的控制台输出，其中日期从不为空。viewDate 总是返回一个值。

availability: 1570005206244 
availability val: 
we got a date thurr 
is an empty string
4

0 回答 0