Javascript - How to turn off time picker in tempusDominus

Javascript – How to turn off time picker in tempusDominus

Last updated: 2024/02/10 at 1:11 PM

Admin

1 Min Read

Problem:

Contents

<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 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>

im trying to turn off time picker and allowed only to select date in tempusDominus
but i dont find how to do it.
I tried with

viewMode: 'calendar',

but time icon still there
I can use css to display:none the time icon and so on but dont think this is the right way so do not recommend me this option

Solution:

You can easily turn off time component by setting time props to 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',
  }
 });
});