I'm using version 6 of Tempus Dominus, whose documentation is found at https://getdatepicker.com/6/.
My question is:
I have this HTML control:
<div class="col-auto">
<label for="fromDateInput">From date:</label>
<div class="input-group" id="fromDate" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="fromDateInput" type="text" class="form-control" data-td-target="#fromDate">
<span class="input-group-text" data-td-target="#fromDate" data-td-toggle="datetimepicker"><span class="fa-solid fa-calendar"></span></span>
</div>
</div>
And I have the following JavaScript configuration of the Tempus Dominus datepicker control:
const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
display: {
components: {
clock: false
}
},
localization: {
startOfTheWeek: 1
}
});
In the browser, the control looks like this:
I then select a date:
As you can see in the field, the date is written as 06/22/2022
. However, I would like the format to be YYYY-MM-DD
, such that the date in this instance becomes 2022-06-22
. How do I achieve that?
I found documentation for it on the plugins overview page: https://getdatepicker.com/6/plugins/
It has the following example:
Per Picker
It is possible to use this system per picker. For instance:const td = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1')); td.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }
The code above would affect a single picker but not globally. You could easily adapt this code to have a common formatting function taking in a format string.
So I adapted my code in the following way:
const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
display: {
components: {
clock: false
}
},
localization: {
startOfTheWeek: 1
}
});
picker.dates.formatInput = date => moment(date).format('YYYY-MM-DD')
And now the date format looks like I want it:
As you can see, the date is now written 2022-06-22
.