[WordPress] 外掛開發使用 jQuery UI 的日期選擇（Datepicker）功能

本篇文章更新時間：2023/04/11
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

這幾天寫程式又碰到要設計一個輸入框可以選擇日期的問題！之前碰過，但沒寫成筆記。

WordPress 核心有內建 jQuery UI 與 Datepicker 的 JavaScript 方法，但沒有包含 UI 的 CSS 樣式。

除此之外，還有操作介面的語言問題，要一次到位的處裡方法，我的筆記如下：

    wp_enqueue_script('jquery-ui-datepicker-google', '//ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js');
    wp_enqueue_script('jquery-ui-datepicker-google-i18n', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/i18n/jquery-ui-i18n.js');
    wp_enqueue_style('jquery-ui-datepicker-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css');

要先使用 wp_register_script 方法把這些給註冊起來稍後用也可以，但重點就是這三行以及順序。

其中多國語言支援中文部分，也不知道為什麼 Google CDN 沒有到 1.11 之後的版本，但不影響使用。

真介意使用這些 CDN 服務，也是可以自己抓下來包進外掛或主題中呼叫，避免外部的干擾。

處理好這些函式庫的引入後，在 JavaScript 程式中呼叫 Datepicker 的方法如下：

    $("#from_date").datepicker({
        showMonthAfterYear: true,
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0"
    });

通常沒特別需求是不會去設定日期格式，後端 PHP 使用 strtotime 都可以先解讀成 timestamp 格式，然後想怎樣換表示法都沒問題。

重點會放在最後一個參數 yearRange，預設前後十年的區間，如果是要讓人選擇「年齡」這種跨年度很多的話，我上述範例就是「當前與往過去一百年」的範圍來定義。

更多設定可以參考官方文件： Datepicker Widget