Skip to content

[JQuery] 使用 Datepicker 部件來顯示日期選擇器

Last Updated on 2021-12-21 by Clay

在 JQuery 當中，我們若是有著需要讓使用者選擇日期的需求，那麼使用 Datepicker 部件可說是最恰當的選擇。Datepicker 是一個彈出式的日期選擇器，需配合 HTML 的 input 欄位使用；在點擊日期之後，將會回傳日期於 input 欄位中。

以下做個簡單的範例，並介紹可以改動的一些功能（其實是我自己在最近開發的專案可能會用到的功能）。更詳細的介紹，請參閱文末的 References API 連結。

基礎範例

注意，<link> 以及使用的 jquery 版本需要放置於 <body> 前才可以順利運作。

而 datepicker 部件需要設定於 <input> 元件上。

<html>
    <head>
        <title>Datepicker Demo</title>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    
        <script>
            $(function() {
                $( "#datepicker-widget" ).datepicker();
            });
        </script>
    </head>

    <body>
        <p>Date: <input type="text" id="datepicker-widget"></p>
    </body>
</html>


Output:

Datepicker Demo

Date:

各種不同的顯示特效

這個展示的方法也是從網路上的範例中學習的，不過我覺得挺有意思的。當然，更詳盡的使用方式可以參考官方的 API。

下方有著可以選擇的不同動畫效果，會影響到日期選擇器顯示的動畫。

<html>
    <head>
        <title>Datepicker Demo</title>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    
        <script>
            $(function() {
                $( "#datepicker-widget-anim" ).datepicker();
                $( "#anim" ).change(function() {
                    $( "#datepicker-widget-anim" ).datepicker( "option", "showAnim", $(this).val() );
                });
            });
        </script>
    </head>

    <body>
        <!-- Date input field --!>
        <p>Date: <input type="text" id="datepicker-widget-anim"></p>

        <!-- Animation --!>
        <p>Animation:<br>
            <select id="anim">
                <option value="show">Show (Default)</option>
                <option value="slideDown">Slide Down</option>
                <option value="fadeIn">Fade In</option>
                <option value="blind">Blind</option>
                <option value="bounce">Bounce</option>
                <option value="clip">Clip</option>
                <option value="drop">Drop</option>
                <option value="fold">Fold</option>
                <option value="slide">Slide</option>
                <option value="">None</option>
            </select>
        </p>
    </body>
</html>


Output:

Datepicker Demo

Date:

Animation:

修改回傳的日期格式

這對我而言是重要的處理，因為我的需求需要特定的日期格式。

<html>
    <head>
        <title>Datepicker Demo</title>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    
        <script>
            $(function() {
                $( "#datepicker-widget-format" ).datepicker();
                $( "#format" ).change(function() {
                    $( "#datepicker-widget-format" ).datepicker( "option", "dateFormat", $(this).val() );
                });
            });
        </script>
    </head>

    <body>
        <!-- Date input field --!>
        <p>Date: <input type="text" id="datepicker-widget-format"></p>

        <!-- Format --!>
        <p>Format:<br>
            <select id="format">
                <option value="mm/dd/yy">Default - mm/dd/yy</option>
                <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
                <option value="d M, y">Short - d M, y</option>
                <option value="d MM, y">Medium - d MM, y</option>
                <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
            </select>
        </p>
    </body>
</html>


Output:

Datepicker Demo

Date:

Format:

References

Read More

Tags:

1 thought on “[JQuery] 使用 Datepicker 部件來顯示日期選擇器”

Leave a Reply