视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jqueryUIDatepicker时间控件的使用及问题解决_jquery
2020-11-27 21:49:45 责编:小OO
文档
 本文实例为大家分享了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)我的需求是制作一个起始时间和一个终止时间的选择。

代码如下:



注:

(1)$("#ui-datepicker-div").css("font-size", "12px"); 用来改变日期控件的大小
(2)dateFormat: "yy-mm-dd",改变日期格式

(3)日期控件为英文版本,加入一段脚本将其汉化



(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) {});



大家还可以参考以下文章进行学习:

jquery UI Datepicker时间控件的使用方法(基础版)

jquery UI Datepicker时间控件的使用方法(加强版)

jquery UI Datepicker时间控件的使用方法(终结版)

下载本文
显示全文
专题