[英]How do I specify the date format of Tempus Dominus 6 (getdatepicker)?
I'm using version 6 of Tempus Dominus, whose documentation is found at https://getdatepicker.com/6/ .我使用的是 Tempus Dominus 的第 6 版,其文档位于https://getdatepicker.com/6/ 。
My question is:我的问题是:
I have this HTML control:我有这个 HTML 控件:
<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:我有以下 JavaScript Tempus Dominus datepicker 控件的配置:
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:我然后 select 约会:
As you can see in the field, the date is written as 06/22/2022
.正如您在字段中所见,日期写为
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
.但是,我希望格式为
YYYY-MM-DD
,以便此实例中的日期变为2022-06-22
。 How do I achieve that?我该如何实现?
I found documentation for it on the plugins overview page: https://getdatepicker.com/6/plugins/我在插件概述页面上找到了它的文档: 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
.如您所见,日期现在写为
2022-06-22
。
And in case you don't want to use moment.js…如果你不想使用 moment.js…
const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {});
picker.dates.formatInput = date =>
date.getFullYear() + '-' +
("0"+(date.getMonth() + 1)).slice(-2) + "-" +
("0" + date.getDate()).slice(-2);
After submit form, correct format changes to default format.提交表单后,正确的格式更改为默认格式。
if using jquery, and your plugin is >= 6.2.7.如果使用 jquery,并且您的插件 >= 6.2.7。
customDateFormat.js
customDateFormat.js
tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);
Complete code like完整代码如
tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);
$('#fromDate').tempusDominus({
localization: {
format: 'yyyy-MM-dd',
}
});
Reference: https://getdatepicker.com/6/plugins/customDateFormat.html参考: https://getdatepicker.com/6/plugins/customDateFormat.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.