如何使用日曆外掛datepicker
阿新 • • 發佈：2019-02-14
演示地址：http://jqueryui.com/datepicker/
下載地址：http://jqueryui.com/download/
使用jQuery ui首先需要引入jquery類庫，jQuery ui js指令碼和jQuery ui css樣式表。程式碼示例如下：
<scriptsrc="jquery-1.7.1.js"></script>
<scriptsrc="jquery-ui.js"></script>
<linkrel="stylesheet"type="text/css"href="jquery-ui.css">
注：引入js
下面為實現步驟：
第一步 實現兩個datepicker元件。
需要定義兩個input標籤，型別為text，並指定id屬性
HTML程式碼如下
開始日期：<input type="text" id="start">
結束日期：<input type="text" id="end">
在js程式碼中得到兩個input元素的jQuery物件，並將其轉化為datepicker元件
Js程式碼如下:
- $(document).ready(function(){
- $("#start").datepicker();
- $("#end").datepicker();
- });
實現以上操作後，在頁面中點選文字框，如果出現datepicker則代表成功。
第二步 設定開始和結束日期
當選擇開始日期的值後，則結束日期的最小值應該就是開始日期；同理，當選擇結束日期後，開始日期的最大值則應該是結束日期。我們可以利用datepicker中的onSelect屬性來設定當選擇指定日期後觸發的事件，通過該事件來指定對應的datepicker最小日期或最大日期。
Js程式碼如下:
- $("#start").datepicker({
- onSelect:function(dateText,inst){
- $("#end").datepicker("option","minDate",dateText);
- }
- });
- $("#end").datepicker({
- onSelect:function(dateText,inst){
- $("#start").datepicker("option","maxDate",dateText);
- }
- });
注：匿名函式中的dateText屬性為當前選擇日期的字串
實現全部功能的完全程式碼，如下：- <!DOCTYPE html>
- <htmllang="en">
- <head>
- <metacharset="UTF-8">
- <title></title>
- <scriptsrc="jquery.js"></script>
- <scriptsrc="date/jquery-ui.min.js"></script>
- <linkrel="stylesheet"type="text/css"href="date/jquery-ui.min.css">
- </head>
- <body>
- 開始日期：<inputtype="text"id="start"> 結束日期：<inputtype="text"id="end">
- <script>
- $("#start").datepicker({
- onSelect:function(dateText,inst){
- $("#end").datepicker("option","minDate",dateText);
- }
- });
- $("#end").datepicker({
- onSelect:function(dateText,inst){
- $("#start").datepicker("option","maxDate",dateText);
- }
- });
- </script>
- </body>
- </html>
