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