<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',
}
});
});
Refer: https://getdatepicker.com/6/options/