jquery UI Datepicker時(shí)間控件的使用及問(wèn)題解決
本文實(shí)例為大家分享了jqueryUI中datepicker的使用,解決與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問(wèn)題。
1.jqueryUI的datepicker的使用
-->首先在jqueryUI官網(wǎng)上根據(jù)你的需要下載適合你系統(tǒng)主題的樣式,jqueryUI主題:下載地址;
-->下載后的文件
jquery-ui-1.10.3.custom文件夾;不同的主題的區(qū)別在于它們引用的css不同
默認(rèn)下載的樣式如下:
其它樣式比如我下載的樣式:
下載的jqueryUI中除了css文件夾不同,其它文件均相同
-->頁(yè)面中的使用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)我的需求是制作一個(gè)起始時(shí)間和一個(gè)終止時(shí)間的選擇。
代碼如下:
<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">開始時(shí)間:</label> <input type="text" id="txtStartDate" name="from"/> <label for="to">結(jié)束時(shí)間:</label> <input type="text" id="txtEndDate" name="to"/> </body>
注:
(1)$("#ui-datepicker-div").css("font-size", "12px"); 用來(lái)改變?nèi)掌诳丶拇笮?br /> (2)dateFormat: "yy-mm-dd",改變?nèi)掌诟袷?/p>
(3)日期控件為英文版本,加入一段腳本將其漢化
/* Chinese initialisation for the jQuery UI date picker plugin. */ /* Written by Cloudream (cloudream@gmail.com). */ jQuery(function ($) { $.datepicker.regional['zh-CN'] = { closeText: '關(guān)閉', 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)對(duì)于一些datepicker的屬性和方法的詳細(xì)使用,可以參考其API文檔,上面講的很詳細(xì)
-->再分享一招
$("[id$=txtASN]")的使用
定義好的asp.net的textbox控件id為txtASN,但是$("#txtASN")卻獲取不到textbox的dom元素了,原因查看源代碼后發(fā)現(xiàn)是其控件ID發(fā)生了變化,如果控件放在了panel中或者母版中,生成的html控件input ID就會(huì)發(fā)生變化,如pnlBaseInfo_txtASN
解決辦法: $("[id$=txtASN]"),其意義就是在于獲得id以txtASN結(jié)尾的dom元素
-->完成效果
2.解決與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問(wèn)題
問(wèn)題:運(yùn)行之后,點(diǎn)擊"查詢",頁(yè)面局部刷新,發(fā)現(xiàn)日歷選擇器不出來(lái)了
DatePicker在asp.net的UpdatePanel中異步回傳后失效的問(wèn)題
在頁(yè)面第一次加載時(shí)可以正常顯示DatePicker控件,但在點(diǎn)擊查詢后,由于異步回傳,DatePicker就失效了。
-->分析UpdatePanel
UpdatePanel在應(yīng)用中主要用于局部刷新,避免整個(gè)頁(yè)面的Postback。
UpdatePanel實(shí)現(xiàn)局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新過(guò)程就是將頁(yè)面提交到服務(wù)端(包 含ViewState),執(zhí)行服務(wù)端代碼后異步將在UpdatePanel內(nèi)的HTML進(jìn)行重新呈現(xiàn)。
-->分析jQuery
因?yàn)樵赨pdatePanel局部刷新之后,其中的文本框元素被重寫,而此時(shí)整個(gè)DOM樹并沒(méi)有重新加載,所以jQuery的ready事件并沒(méi)有觸 發(fā),所以文本框元素就失去了原有的特效。
-->解決方法
將初始化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"); //改變大小 }); });
大家還可以參考以下文章進(jìn)行學(xué)習(xí):
jquery UI Datepicker時(shí)間控件的使用方法(基礎(chǔ)版)
jquery UI Datepicker時(shí)間控件的使用方法(加強(qiáng)版)
jquery UI Datepicker時(shí)間控件的使用方法(終結(jié)版)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jquery UI Datepicker時(shí)間控件沖突問(wèn)題解決
- jquery UI Datepicker時(shí)間控件的使用方法(終結(jié)版)
- jquery UI Datepicker時(shí)間控件的使用方法(加強(qiáng)版)
- jquery UI Datepicker時(shí)間控件的使用方法(基礎(chǔ)版)
- jquery 日期控件datepicker屬性詳細(xì)解析
- datePicker——日期選擇控件(with jquery)
- jQuery日程管理插件fullcalendar使用詳解
- 基于jQuery的日期選擇控件
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
- jQuery日程管理控件glDatePicker用法詳解
相關(guān)文章
推薦6款基于jQuery實(shí)現(xiàn)圖片效果插件
這里給大家匯總了一下個(gè)人比較常用的基于jQuery實(shí)現(xiàn)的圖片特效的插件,個(gè)人感覺非常不錯(cuò),這里分享給大家2014-12-12jQuery截取指定長(zhǎng)度字符串的實(shí)現(xiàn)原理及代碼
截取指定長(zhǎng)度字符串操作在新聞列表這種類型的操作中大量應(yīng)用,下面有個(gè)示例,大家可以參考下2014-07-07jQuery EasyUI API 中文幫助文檔和擴(kuò)展實(shí)例
這篇文章主要介紹了jQuery EasyUI API 中文幫助文檔和擴(kuò)展實(shí)例 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼的實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10基于jquery打造的百分比動(dòng)態(tài)色彩條插件
主要是為了往后的項(xiàng)目中方便實(shí)現(xiàn)這類型的功能,在之前做問(wèn)卷調(diào)查那個(gè)應(yīng)用中,就用到這個(gè)來(lái)顯示結(jié)果,但當(dāng)時(shí)開發(fā)時(shí)并不用是插件的,一大堆代碼,看也煩,用起來(lái)很麻煩2012-09-09jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionWidgets插件結(jié)合swf文件載入xml數(shù)據(jù)實(shí)現(xiàn)Bulb圖效果的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)美觀的多級(jí)動(dòng)畫效果菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)動(dòng)畫效果菜單代碼,涉及jquery針對(duì)頁(yè)面元素的遍歷及事件綁定操作頁(yè)面元素樣式變換的技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09