如何在tempusDominus中关闭时间选择器，仅保留日期选择

要在Tempus Dominus中仅启用日期选择、完全隐藏时间相关元素，你需要通过配置关闭时间组件的渲染，而非仅设置视图模式。具体修改如下：

• 在display配置中添加components字段，将time设为false，这会直接禁用时间选择器的所有相关元素（包括时间图标）
• 保持viewMode: 'calendar'确保默认打开日历视图
• 可移除配置中多余的time图标定义（可选，不影响功能）

修改后的核心配置代码 #

$(document).ready(function() {
  $('.datepickers').tempusDominus({
    display: {
      theme: 'light',
      viewMode: 'calendar',
      components: {
        time: false // 关键配置：关闭时间组件
      },
      icons: {
        type: 'icons',
        date: 'fa fa-calendar',
        up: 'fa fa-arrow-up',
        down: 'fa fa-arrow-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-calendar-check',
        clear: 'fa fa-trash',
        close: 'fa fa-xmark'
      },
    },
    localization: {
      format: 'dd-MM-yyyy',
    }
  });
});

完整示例代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.css" />
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/jQuery-provider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="col-3">
  <label>Select date</label>
  <input class="form-control datepickers">
</div>

<script>
  $(document).ready(function() {
    $('.datepickers').tempusDominus({
      display: {
        theme: 'light',
        viewMode: 'calendar',
        components: {
          time: false
        },
        icons: {
          type: 'icons',
          date: 'fa fa-calendar',
          up: 'fa fa-arrow-up',
          down: 'fa fa-arrow-down',
          previous: 'fa fa-chevron-left',
          next: 'fa fa-chevron-right',
          today: 'fa fa-calendar-check',
          clear: 'fa fa-trash',
          close: 'fa fa-xmark'
        },
      },
      localization: {
        format: 'dd-MM-yyyy',
      }
    });
  });
</script>

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