前情提要

筆者在公司寫後台系統，重回dotnet core MVC的懷抱，不免俗的要搭配jquery來完成前端效果，離筆者好遙遠阿，畢竟在前公司寫angular寫了多年，被model binding的框架養胖了(誤，現在要重頭來蒐集jquery各種套件(武器)的時候了，畢竟筆者要獨力完成一個後台系統，雖然有別的系統可參考，還是個一大挑戰阿。筆者公司的後台系統使用Admin LTE 3的版本當作底層框架，雖然盡量使用裏頭整合好的jquery套件，這篇就假設預設框架未提供datepicker相關套件，跟著筆者一起來看看怎麼跟ChatGPT互動寫出datepicker的效果吧。

詢問有名套件

第一步是問一下網路上有名的datepicker套件有哪些，因為Admin LTE 3是bootstrap為基底，因此要加上一個限制，帶有bootstrap樣式風格的datepicker套件

1	List the famous datepicker jquery component with bootstrap style

可以看到ChatGPT列了幾個知名套件，直接拿第一個來使用吧

初始化方法

再來問ChatGPT大神使用方式吧

1	List the methods of Bootstrap-datepicker jquery component

[ChatGPT list bootstrap-datepicker methods]

可以看到第一個方法datepicker(options)為初始化方法，筆者就使用這個方法來初始化我們的datepicker

製作Demo畫面

筆者這邊教一下VSCode快速產生html5的方法，只要輸入html:5，即可產出完整的html(包含header及body)

切換語言模式並產生html5頁面

透過Ctrl+N新增一個空白的檔案
透過Ctrl+Shift+P叫出VSCode的指令列
輸入lang即可看到Change Language Mode

[VSCode command list-Change Language Mode]

選擇html即可完成

最後輸入html:5後按下Tab鍵可以看到完整的html5的結構

引入Bootstrap-datepicker的相關連結

筆者為美化，這邊引入bootstrap，稍微排版一下form的結構

<!--css(header tag中)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
<!--javascript(body tag中)-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-TW.min.js"></script>

Form表單設計

直接抄Bootstrap文件中的Form結構

<form>
    <div class="row">
        <div class="col-3">
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Start Date</label>
                <input type="text" class="form-control" id="start-date">
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

datepicker初始化

筆者透過ChatGPT給的答案中的第一個initial method做初始化

<script type="text/javascript">
    $(function () {      
        $('#start-date').datepicker();
    })
</script>

這邊先看一下效果吧

可以看到成功地套上去了，預設日期格式為mm/dd/yyyy

Format日期格式

以我們認知的日期格式，比較偏向是yyyy/mm/dd，再來請教ChatGPT大神了，這次問

1	List the Bootstrap-datepicker jquery component's options

[ChatGPT list bootstrap-datepicker options]

回復完全切中要點，直接套上看看

1
2
3

$('#start-date').datepicker({
    format: 'yyyy/mm/dd'
});

看一下效果吧

完美地呈現日期格式:yyyy/mm/dd

設定日期

這時候需求來了，Start Date需要預設選擇該月份的一號，姑且不論該月份的一號怎麼取得，筆者以操作套件方法為準，先來問ChatGPT怎麼使用setDate吧

1	List the example of Bootstrap-datepicker jquery component's setDate method

[ChatGPT list bootstrap-datepicker setDate]

回答完全不拖泥帶水，解釋說可以透過datepicker(’setDate’, {date})的方式設定，這個{date}可以是Date物件，也可以是符合Javascript日期規則的字串

1 2	// 筆者這邊先寫死2023-02-01 $('#start-date').datepicker('setDate', '2023-02-01');

設定語系

最後一個需求，日曆的語系切換為台灣語系，請教ChatGPT大神了

1	List the example of setting locale option of Bootstrap-datepicket jquery component

筆者就按照建議，加上

1	$.fn.datepicker.defaults.language = 'zh-TW';

筆者因為有到cdn網站搜尋過相關連結，知道要載入對應語系的連結

[bootstrap-datepicker setting locale result]

最後貼上完整程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap-datepicker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
</head>

<body class="container-fluid">
    <form>
        <div class="row">
            <div class="col-3">
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Start Date</label>
                    <input type="text" class="form-control" id="start-date" autocomplete="off">
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-TW.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.fn.datepicker.defaults.language = 'zh-TW';
            $('#start-date').datepicker({
                format: 'yyyy/mm/dd'
            });
            $('#start-date').datepicker('setDate', '2023-02-01');
        })
    </script>
</body>

</html>

結論

筆者僅僅花了十分鐘完成datepicker的呈現，筆者的感想是只要會用List the example of起手式，後面接上你要找的東西，基本上效果要比google搜尋好很多，不用一個連結一個連結打開看是不是自己要的，正所謂善用工具，工具會帶你上天堂，筆者就早早下班去啦。

Buy me a coffee

Eugene's Blog

[雜記]ChatGPT初體驗