jQuery日曆選擇器DatePicker－聆風之境

***DatePicker背景***

現在的網頁專案中，日期選擇器已經是必備的了。

其中DatePicker是jQuery UI中的一個很好用的小工具。

jQuery UI是一個建構於jQuery之上的JavaScript函式庫。可用來提供GUI控制項和動畫效果。

實際範例可參閱官網 : https://jqueryui.com/datepicker/

***簡單實作***

先在HTML頁面上建立一個要做為輸入日期的TextBox，依自己偏好設定id 、name、class
如果不懂HTML的人(應該不會有吧?)，可以忽略h1的部分。
(大部分介紹都會從using jQuery套件開始...我喜歡反其道而行，哈哈)

<div>

<h1>測試DatePicker</h1>

<input type="text" id="BirthDay" name="Birthday" class="datepicker" />

</div>
接著引用jQuery、jQuery UI js 及 jQuery UI css。
沒錯，jQuery UI 會有兩個，一個是js檔案及一個css檔案，所以總共會有三項引用。
何謂引用，跟為什麼引用，這些檔案去哪抓...這邊就不說明了，留給各位自行去瞭解~
小幫手提供 : https://www.w3school.com.cn/jquery/jquery_install.asp

<script src="Script/jquery-3.5.1.min.js"></script>

<script src="Script/jquery-ui.min.js"></script>

<link rel="stylesheet" href="Script/jquery-ui.min.css" />
在head中加入程式碼如下，細節不解釋。

<script>

    $(function () {

        $(".datepicker").datepicker();

    });

</script>
正常的狀況下，這時就已經可以得到一個這樣簡單畫面。

點按文字框後，日曆應該就會出現囉~

補充 :

Error 1 Uncaught ReferenceError: jQuery is not defined

Error 2 Uncaught ReferenceError: $ is not defined

以上兩個錯誤可能是 jQuery 未載入或是載入失敗

Error 3 Uncaught TypeError: $(...).datepicker is not a function

jQuery UI js檔未載入或是載入失敗，無法識別datepicker函式

Error 4 日曆呈現如下圖

jQuery UI css檔未載入或是載入失敗

***進階設定***

如果依照上述設定完，可以出現正常的日期選擇器，在這邊說一聲恭喜~

可能都沒有遇到障礙(很熟練)，或是遇到障礙但解決了(有概念)

但這時應該會發現，選擇日期後，被帶回文字框的日期是月/日/年

DatePicker提供了很多參數，可以客製出接近自己需求的結果，以下介紹各項調整。

(使用時須注意，如大小寫錯誤則不會有效果，除錯似乎也沒有提示。)

**日期格式**

如果想要改為一般的年/月/日格式。請將上述第三點的程式碼改為如下

<script>
    $(function () {
        $(".datepicker").datepicker(
            // ↓ 其實只多了這三行
            {
                dateFormat: 'yy/mm/dd'
            }
            // ↑ 其實只多了這三行
        );
    });
</script>

關鍵字是 dateFormt，更多格式可參考 jQuery UI 官網 https://api.jqueryui.com/datepicker/#utility-formatDate 還滿詳細的~

**日曆按鈕**

有時為了友善使用者，可能會希望在文字框旁多出一個按鈕，來區分日期選擇或文字輸入。

以上述的範例，只需要設定showOn屬性(預設值為'focus')，就可以呈現出這個效果~

  <script>
    $(function () {
        $(".datepicker").datepicker(
            {
                // ↓ 只需要這一行
                showOn: "both",
                dateFormat: 'yy/mm/dd'
            }
        );
    });
</script>

偷偷附上全碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是頁面標題</title>
    <!--引用 jQuery 及 jQuery UI -->
    <script src="Script/jquery-3.5.1.min.js"></script>
    <script src="Script/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="Script/jquery-ui.min.css" />
    <script>
        $(function () {
            $(".datepicker").datepicker({
                showOn: "both",
                buttonImage: "/images/datepicker.gif",
                dateFormat: 'yy/mm/dd'
            });
        });
    </script>
</head>
<body>
    <div>
        <h1>測試DatePicker</h1>
        <input type="text" id="BirthDay" name="Birthday" class="datepicker" />
    </div>
</body>
</html>