首頁 > 開發者 > JavaScript
jquery UI Datepicker時間控制項的使用及問題解決，jquerydatepicker
本文執行個體為大家分享了jqueryUI中datepicker的使用，解決與asp.net中的UpdatePanel聯合使用時的失效問題。
1.jqueryUI的datepicker的使用
-->首先在jqueryUI官網上根據你的需要下載適合你系統主題的樣式，jqueryUI主題：；
-->下載後的檔案
jquery-ui-1.10.3.custom檔案夾；不同的主題的區別在於它們引用的css不同
預設下載的樣式如下：
其它樣式比如我下載的樣式：
下載的jqueryUI中除了css檔案夾不同，其它檔案均相同
-->頁面中的使用datePicker的步驟
(1)引入jquery-ui-1.10.3.custom.min.css樣式檔案
(2)引入jquery-1.9.1.js和jquery-ui-1.10.3.custom.min.js指令檔；注意：先引入jquery檔案
(3)我的需求是製作一個起始時間和一個終止時間的選擇。
代碼如下：
<script type="text/javascript"> $(function () { $("#txtStartDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, onClose: function (selectedDate) { $("#txtEndDate").datepicker("option", "minDate", selectedDate); } }); $("#txtEndDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, onClose: function (selectedDate) { $("#txtStartDate").datepicker("option", "maxDate", selectedDate); } }); $("#ui-datepicker-div").css("font-size", "12px"); //改變大小 }); </script></head><body> <label for="from">開始時間：</label> <input type="text" id="txtStartDate" name="from"/> <label for="to">結束時間：</label> <input type="text" id="txtEndDate" name="to"/></body>
註：
(1)$("#ui-datepicker-div").css("font-size", "12px"); 用來改變日期控制項的大小
(2)dateFormat: "yy-mm-dd",改變日期格式
(3)日期控制項為英文版本，加入一段指令碼將其漢化
/* Chinese initialisation for the jQuery UI date picker plugin. *//* Written by Cloudream (cloudream@gmail.com). */jQuery(function ($) { $.datepicker.regional['zh-CN'] = { closeText: '關閉', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], weekHeader: '周', dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false, showMonthAfterYear: true, yearSuffix: '年' }; $.datepicker.setDefaults($.datepicker.regional['zh-CN']);});
(4)對於一些datepicker的屬性和方法的詳細使用，可以參考其API文檔，上面講的很詳細
-->再分享一招
$("[id$=txtASN]")的使用
定義好的asp.net的textbox控制項id為txtASN，但是$("#txtASN")卻擷取不到textbox的dom元素了，原因查看原始碼後發現是其控制項ID發生了變化，如果控制項放在了panel中或者母片中，產生的html控制項input ID就會發生變化，如pnlBaseInfo_txtASN
解決辦法： $("[id$=txtASN]")，其意義就是在於獲得id以txtASN結尾的dom元素
-->完成效果
2.解決與asp.net中的UpdatePanel聯合使用時的失效問題
問題：運行之後，點擊"查詢"，頁面局部重新整理，發現日曆選取器不出來了
DatePicker在asp.net的UpdatePanel中非同步回傳後失效的問題
在頁面第一次載入時可以正常顯示DatePicker控制項，但在點擊查詢後，由於非同步回傳，DatePicker就失效了。
-->分析UpdatePanel
UpdatePanel在應用中主要用於局部重新整理，避免整個頁面的Postback。
UpdatePanel實現局部重新整理的核心在於MicrosoftAjaxWebForm.js檔案，它的局部重新整理過程就是將頁面提交到服務端（包 含ViewState），執行服務端代碼後非同步將在UpdatePanel內的HTML進行重新呈現。
-->分析jQuery
因為在UpdatePanel局部重新整理之後，其中的文字框元素被重寫，而此時整個DOM樹並沒有重新載入，所以jQuery的ready事件並沒有觸 發，所以文字框元素就失去了原有的特效。
-->解決方案
將初始化DatePicker的代碼放在Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});
$(function () { Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) { $("[id$=txtStartDate]").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, onClose: function (selectedDate) { $("[id$=txtEndDate]").datepicker("option", "minDate", selectedDate); } }); $("[id$=txtEndDate]").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, onClose: function (selectedDate) { $("[id$=txtStartDate]").datepicker("option", "maxDate", selectedDate); } }); $("#ui-datepicker-div").css("font-size", "14px"); //改變大小 });});
大家還可以參考以下文章進行學習：
jquery UI Datepicker時間控制項的使用方法（基礎版）
jquery UI Datepicker時間控制項的使用方法（加強版）
jquery UI Datepicker時間控制項的使用方法（終結版）
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
