如何指定 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>

我对 Tempus Dominus 日期选择器控件有以下 JavaScript 配置：

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

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

然后我选择一个日期：

正如您在字段中看到的，日期写为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。