<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
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',
}
});
});