如何重置或清除Bootstrap Datetimepicker组件？

实现步骤 #

1. 添加重置按钮触发操作
2. 编写逻辑同时清空输入值、清除日期高亮、恢复日历组件初始状态

完整代码示例 #

HTML（新增重置按钮）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<link rel='stylesheet' href='https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js'></script>

<div class="row">
  <div class="form-group">
    <label for="">Select Doctor</label>
    <span class="text-danger">*</span>
    <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
      <option selected="selected">Alabama</option>
      <option>Alaska</option>
      <option>California</option>
      <option>Delaware</option>
      <option>Tennessee</option>
      <option>Texas</option>
      <option>Washington</option>
    </select>
  </div>
  <div class="col-sm-6 mt-4 d-flex align-items-center">
    <div class="input-group date" id="apptDay" data-target-input="nearest" style="flex: 1;">
      <input name="day" type="text" class="form-control datetimepicker-input" data-target="#apptDay" placeholder="mm/dd/yyyy" value="" />
      <div class="input-group-append" data-target="#apptDay" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
      </div>
    </div>
    <!-- 新增重置按钮 -->
    <button type="button" class="btn btn-secondary ms-2" id="resetDatetimepicker">重置日历</button>
  </div>
</div>

JavaScript（新增重置逻辑）

$('.select2').select2({});

$('#apptDay').datetimepicker({
  format: 'L'
});

$("#apptDay").on("show.datetimepicker update.datetimepicker", function(e) {
  highlight()
});

// 日期高亮函数（新增样式重置逻辑，避免重复叠加）
function highlight() {
  var dateToHilight = ["11/21/2022", "11/25/2022", "12/30/2022"];
  var array = $("#apptDay").find(".day").toArray();

  for (var i = 0; i < array.length; i++) {
    var date = array[i].getAttribute("data-day");
    // 先重置默认样式
    array[i].style.color = "";
    array[i].style.fontWeight = "";
    if (dateToHilight.indexOf(date) > -1) {
      array[i].style.color = "orange";
      array[i].style.fontWeight = "bold";
    }
  }
}

// 自定义重置函数
$("#resetDatetimepicker").click(function() {
  // 1. 清空输入框内容
  $("#apptDay .datetimepicker-input").val("");
  // 2. 重置组件内部选中状态
  $("#apptDay").datetimepicker("date", null);
  // 3. 清除所有日期的高亮样式
  $("#apptDay").find(".day").each(function() {
    $(this).css({
      "color": "",
      "font-weight": ""
    });
  });
  // 4. 触发组件更新，同步界面状态
  $("#apptDay").trigger("update.datetimepicker");
});

关键说明 #

• 必须调用datetimepicker("date", null)重置组件内部状态，避免残留选中值
• 清空行内样式即可恢复日历默认显示效果，无需额外覆盖
• 触发update.datetimepicker事件确保界面重新渲染，保持状态一致

内容的提问来源于stack exchange，提问作者Sharmae Reyes