Datepicker

Posted on Edited on In Views: Disqus:

 

本文章只簡述其 jQuery UI Datepicker 的基本用法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body>
    <form action="">
        <label for="">select date</label>
        <input type="text" id="myDatepicker">
    </form>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-zh-TW.js"></script>

    <script>
        $("#myDatepicker").datepicker();
    </script>

</body>

</html>

結果畫面為

說明：

使用 datepicker 預設都是英文的，但其實可以替換為中文語言。

可以到官方 jQuery UI github 裡面的 i18n 資料夾找到 datepicker-zh-TW.js 後把他下載下來，然後去引用他。

 

參考資料：

Datepicker