在安排某些計劃 / 行動時，會需要使用 Magento 2 所提供的小工具 – 日期選擇器。 

對於 Magento 2 的使用者而言，它不僅減少了打字錯誤，借助標準化格式的特性也為管理員節省了大量時間。日期選擇器有助於增強用戶體驗：用戶無需使用鍵盤，只需單擊日曆即可進行選擇。

在本篇文章中，我們將向您展示如何在 Magento 2 的前端添加日期選擇的方法。

從這篇文章你會知道：

• 彈出窗口 或 內聯日曆
• 自定義形式顯示日曆
• 可選擇日期範圍

彈出窗口 或 內聯日曆

Magento 2 日期選擇器是由 jQuery Datepicker 衍生而來，我們可以使用 彈出窗口 或 內聯日曆 來選擇日期。

差別在於默認情況下，當關聯的欄位獲得焦點時，日期選擇器才會在欄位周圍展開。 對於內聯日曆，只需將日期選擇器附加到 div 或 span，不需要特定動作即顯示在前端畫面。

【彈出視窗】

<input type="text" 
           class="input-text required-entry hasDatepicker" 
           id="date-selector" 
           name="date-selector"
           aria-required="true" />

【內聯日曆】

<div id="date-selector"></div>

決定日曆要如何呈現後，再添加 Javascript

自定義形式顯示日曆

jQuery Datepicker 文件中詳細說明了 Datepicker 各種不同的功能與用法，我們可以用來客製不同的需求

<script>
require([
    'jquery',
    'mage/mage',
    'mage/calendar'
], function($){
    $('#date-selector').datepicker({
        dateFormat: 'yy/mm/dd',  
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showOn: 'button'
        …
    });
});
</script>

可選擇日期範圍

要顯示日期範圍，首先，我們需要為日期範圍添加兩個欄位，即起始日期和截止日期。

<div class="field overview required" id="date-range">
    <label for="from" class="label">
        <span>From date</span>
    </label>
    <div class="control">
        <input class="input-text required-entry"
            type="text"
            id="date-from"
            name="from" />
    </div>

    <label for="to" class="label">
        <span>To date</span>
    </label>
    <div class="control">
        <input class="input-text required-entry"
            type="text"
            id="date-to"
            name="to" />
    </div>
</div>
<script>
require([
    'jquery',
    'mage/mage',
    'mage/calendar'
], function($){
    $('#date-range').dateRange({
        buttonText: 'Select Date',
        from: {
            id: 'date-from'
        },
        to: {
            id: 'date-to'
        }
    });
});
</script>

參考資料來源：

Calendar widget | Adobe Commerce Developer Guide

Datepicker Widget – jQuery UI API Documentation

---

在 Magento 2 添加日期選擇器是開發項目中的常規任務，希望本篇文章有簡化大家的開發時間！

接下來我們還會持續介紹各種簡易又好用的方法給大家，記得追蹤我們的FB粉絲團及IG，也別忘了訂閱電子報，就不會錯過第一手的最新消息囉！有問題也歡迎聯繫我們！