jqueryUIDatepicker時間控件的使用及問題解決_jquery

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-27 21:49:45

jqueryUIDatepicker時間控件的使用及問題解決_jquery

1.jqueryUI的datepicker的使用。-->首先在jqueryUI官網(wǎng)上根據(jù)你的需要下載適合你系統(tǒng)主題的樣式，jqueryUI主題：下載地址。-->下載后的文件；jquery-ui-1.10.3.custom文件夾；不同的主題的區(qū)別在于它們引用的css不同。默認(rèn)下載的樣式如下：其它樣式比如我下載的樣式。下載的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文件。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀1.jqueryUI的datepicker的使用。-->首先在jqueryUI官網(wǎng)上根據(jù)你的需要下載適合你系統(tǒng)主題的樣式，jqueryUI主題：下載地址。-->下載后的文件；jquery-ui-1.10.3.custom文件夾；不同的主題的區(qū)別在于它們引用的css不同。默認(rèn)下載的樣式如下：其它樣式比如我下載的樣式。下載的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文件。

本文實(shí)例為大家分享了jqueryUI中datepicker的使用，解決與asp.net中的UpdatePanel聯(lián)合使用時的失效問題。

1.jqueryUI的datepicker的使用

-->首先在jqueryUI官網(wǎng)上根據(jù)你的需要下載適合你系統(tǒng)主題的樣式，jqueryUI主題：下載地址；

-->下載后的文件
jquery-ui-1.10.3.custom文件夾；不同的主題的區(qū)別在于它們引用的css不同
默認(rèn)下載的樣式如下：

其它樣式比如我下載的樣式：

下載的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)我的需求是制作一個起始時間和一個終止時間的選擇。

代碼如下：


(1)$("#ui-datepicker-div").css("font-size", "12px"); 用來改變?nèi)掌诳丶拇笮?br />
(2)dateFormat: "yy-mm-dd",改變?nèi)掌诟袷?/p>
(3)日期控件為英文版本，加入一段腳本將其漢化



(4)對于一些datepicker的屬性和方法的詳細(xì)使用，可以參考其API文檔，上面講的很詳細(xì)
 -->再分享一招 
 $("[id$=txtASN]")的使用
定義好的asp.net的textbox控件id為txtASN，但是$("#txtASN")卻獲取不到textbox的dom元素了，原因查看源代碼后發(fā)現(xiàn)是其控件ID發(fā)生了變化，如果控件放在了panel中或者母版中，生成的html控件input ID就會發(fā)生變化，如pnlBaseInfo_txtASN

解決辦法： $("[id$=txtASN]")，其意義就是在于獲得id以txtASN結(jié)尾的dom元素
-->完成效果



2.解決與asp.net中的UpdatePanel聯(lián)合使用時的失效問題

問題：運(yùn)行之后，點(diǎn)擊"查詢"，頁面局部刷新，發(fā)現(xiàn)日歷選擇器不出來了 

DatePicker在asp.net的UpdatePanel中異步回傳后失效的問題 

在頁面第一次加載時可以正常顯示DatePicker控件，但在點(diǎn)擊查詢后，由于異步回傳，DatePicker就失效了。 

-->分析UpdatePanel 

UpdatePanel在應(yīng)用中主要用于局部刷新，避免整個頁面的Postback。 

UpdatePanel實(shí)現(xiàn)局部刷新的核心在于MicrosoftAjaxWebForm.js文件，它的局部刷新過程就是將頁面提交到服務(wù)端（包 含ViewState），執(zhí)行服務(wù)端代碼后異步將在UpdatePanel內(nèi)的HTML進(jìn)行重新呈現(xiàn)。 
-->分析jQuery

因?yàn)樵赨pdatePanel局部刷新之后，其中的文本框元素被重寫，而此時整個DOM樹并沒有重新加載，所以jQuery的ready事件并沒有觸 發(fā)，所以文本框元素就失去了原有的特效。 

-->解決方法

將初始化DatePicker的代碼放在Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});





大家還可以參考以下文章進(jìn)行學(xué)習(xí)：
jquery UI Datepicker時間控件的使用方法（基礎(chǔ)版）
jquery UI Datepicker時間控件的使用方法（加強(qiáng)版）
jquery UI Datepicker時間控件的使用方法（終結(jié)版）
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com