代码之家 › 专栏 › 技术社区 › bobi

如何在tempusDominus中关闭时间选择器

tempus-dominus-datetimepicker javascript

bobi · 技术社区 · 2 年前

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/tempus-dominus.js"></script>
  <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/css/tempus-dominus.css"
    />
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/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 time</label>
  <input class="form-control datepickers">
</div>



<script>
  $(document).ready(function() {
    $('.datepickers').tempusDominus({
      display: {
        theme: 'light',
        viewMode: 'calendar',
        icons: {
          type: 'icons',
          time: 'fa fa-clock-o',
          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>

我试图关闭时间选择器,只允许在中选择日期 tempusDominus 但是我不知道怎么做。我试过了

viewMode: 'calendar',

但时间图标仍然存在我可以使用css来显示:没有时间图标等等,但我认为这不是正确的方式,所以不建议我使用这个选项

1 回复 | 直到 2 年前

Syed M Sohaib 2 年前

您可以通过设置轻松关闭时间组件 time props 到 false

$(document).ready(function() {
 $('.datepickers').tempusDominus({
  display: {
    viewMode: 'calendar',
    components: {
      clock: false,
      hours: false,
      minutes: false,
      seconds: false,
      useTwentyfourHour: undefined
    },
  },
  localization: {
    format: 'dd-MM-yyyy',
  }
 });
});

参考: https://getdatepicker.com/6/options/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前