本文實例為大家分享了jqueryUI中datepicker的使用，解決與asp.net中的UpdatePanel合併使用時的失效問題。
1.jqueryUI的datepicker的使用
-->先在jqueryUI官上根據你的需求下載。適合你係統主題的樣式，jqueryUI主題：下載地址（http://jqueryui.com/themeroller/#themeGallery）
-->下載後的檔案
jquery-ui-1.10.3.custom資料夾；不同的主題的區別在於它們引用的css不同
預設下載的樣式如下：
下載的jqueryUI中除了css檔案皆相同
-->頁中的使用datePicker的步驟
(1)引進jquery-ui-1.10.3.custom.min. css樣式檔
<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-p").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>
程式碼如下：
/* 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']);
});(1)$("#ui-datepicker-p").css("font-size", " 12px"); 用來改變日期控制項的大小
(2)dateFormat: "yy-mm-dd",改變日期格式(3)日期控制項為英文版本，加入一段腳本將其漢化(4)對於一些datepicker的屬性和方法的詳細使用，可以參考其API文檔，上面講的很詳細
-->再分享一招
$("[id$=txtASN]")的使用定義好的asp.net的textbox控制項idtxtASN，但是$ ("#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進行重新呈現。
$(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-p").css("font-size", "14px"); //改变大小
});
});因為在UpdatePanel局部刷新之後，其中的文字方塊元素被重寫，而此時整個DOM樹並沒有重新載入，所以jQuery的ready事件並沒有觸發，所以文字方塊元素就失去了原有的特效。 -->解決方法將初始化DatePicker的程式碼放在Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});
jquery UI Datepicker時間控制的用法（一）
jquery UI Datepicker時間控制的用法（二）
jquery UI Datepicker時間控制的用法（二）jquery UI Datepicker時間控制的用法（三）以上就是本文的全部內容，希望對大家的學習有所幫助。
