要使用 JQuery UI 的 Datepicker Widget,首先必須引用 JQuery、JQueryUI。
1 | <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> |
接著在畫面上放入一個 input element。
1 | <p>Date:<input type="text" id="datepicker"></p> |
在 Javascript 中用 JQuery 找到該 input element,並叫用 datapicker 方法即可將該 input element 設為 Datepicker。
1 | $(function() { |
若要做些細部設定,Datepicker 有提供些 options 可供我們使用,像是 minDate、maxDate 可以用來決定可供選取的時間範圍,onSelect 方法可以設定日期選取後的動作。
1 | $(function() { |
若要主動觸發 Datepicker,也提供了些 methods 讓我們使用,像是 setDate、show。
1 | $(function() { |
最後這邊附上測試用的範例:
1 |
|