如何指定 Tempus Dominus 6 (getdatepicker) 的日期格式？

Question

我使用的是 Tempus Dominus 的第 6 版，其文档位于https://getdatepicker.com/6/ 。

我的问题是：

• 如何设置日期格式？

我有这个 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>

我有以下 JavaScript Tempus Dominus datepicker 控件的配置：

const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
    display: {
        components: {
            clock: false
        }
    },
    localization: {
        startOfTheWeek: 1
    }
});

在浏览器中，控件如下所示：

我然后 select 约会：

正如您在字段中所见，日期写为06/22/2022 。 但是，我希望格式为YYYY-MM-DD ，以便此实例中的日期变为2022-06-22 。 我该如何实现？

Answer 1

我在插件概述页面上找到了它的文档： https ://getdatepicker.com/6/plugins/

它有以下示例：

每个选择器
每个拣货员都可以使用这个系统。 例如：

 const td = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1')); td.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }

上面的代码会影响单个选择器，但不会影响全局。 您可以轻松地修改此代码，使其具有接受格式字符串的通用格式化函数。

所以我通过以下方式调整了我的代码：

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

现在日期格式看起来像我想要的那样：

如您所见，日期现在写为2022-06-22 。

Answer 2

如果你不想使用 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);

Answer 3

提交表单后，正确的格式更改为默认格式。

Answer 4

如果使用 jquery，并且您的插件 >= 6.2.7。

• 加载插件customDateFormat.js
• 设置您的 tempusDominus 以扩展自定义格式

 tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);

完整代码如

tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);

$('#fromDate').tempusDominus({
      localization: {
        format: 'yyyy-MM-dd',
      }
    });

参考： https://getdatepicker.com/6/plugins/customDateFormat.html