jquery UI日期选择器时间控制和问题解决的使用

本文给出了一个在jqueryUI中共享日期选择器使用的例子，解决了它与ASP.NET UpdatePanel结合时的失败问题。

1.1.jqueryUI的datepicker的使用。

-首先根据你的需求在jqueryUI官网下载适合你系统主题的风格。jqueryUI主题：下载地址；

-下载的文件jquery-ui-1.10.3 .自定义文件夹；不同的主题是不同的，因为它们涉及不同的css。默认下载样式如下：

其他样式，如我下载的样式：

除了css文件夹，下载的jqueryUI中的其他文件都是一样的。

-页面中使用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)我的要求是选择开始时间和结束时间。

代码如下：

脚本类型=' text/JavaScript ' $(function(){ $(' # TxtStartDate ')。dateppicker({ dateformat : ' YY-mm-DD '，changeMonth: true，onClose:函数(selectedDate) { $('#txtEndDate ')。datepicker('option '，' minDate '，selected date)；} });$('#txtEndDate ')。dateppicker({ dateformat : ' YY-mm-DD '，changeMonth: true，onClose:函数(selected date){ $(' # txtsstartdate ')。datepicker('option '，' maxDate '，selected date)；} });$('#ui-datepicker-div ')。css('font-size '，' 12px ')；//更改大小})；/script/headbody标签为=' from ' start time:/labe input type=' text ' id=' txt start date ' name=' from '/labe input=' to ' end time:/labe input type=' text ' id=' txt end date ' name=' to '/body注意：

(1)$('#ui-datepicker-div ')。css('font-size '，' 12px ')；用于更改日期控件的大小(2)dateFormat: 'yy-mm-dd '更改日期格式。

(3)日期控件是英文的，所以添加一个脚本使其中文化。

/* jQuery UI日期选择器插件的中文初始化。*//*由Cloudream ([emailprotected])编写。*/jQuery(函数($) {$)。日期选择器。区域['zh-cn']={closetext: '关闭'，上一个文本： '上个月'，下一个文本： '下个月'，当前文本： '今天'，月份： ['一月'，'二月'。3月”，“4月”，“5月”，“6月”，“7月”，“8月”，“9月”，“10月”，“11月”，“12月”]，Monthname Short 3360[“I”，“II”，“III”]。日名称： ['星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六']，日名称： ['星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'。日名称： ['日'，'一'，'二'，'三'，'四'，'五'，'六']，周标题3360 '周'，日期格式3360 ' YY-毫米-日'，第一天： 1，ISRL 330。$ . datepicker . setdefaults($ . datepicker . regional[' zh-CN '])；});(4)关于datepicker的一些属性和方法的详细使用，可以参考它的API文档，上面已经详细介绍过了。

-分享另一个技巧。

使用$('[id$=txtASN]')。

定义的ASP.NET的文本框控件标识为txtASN，但是$(“# TxTasn”)无法获取文本框的dom元素。原因是检查源代码后发现其控件id发生了变化。如果控件放置在面板或主控形状中，则生成的html控件输入ID将会改变。例如，pnlBaseInfo_txtASN解决方案：$('[id$=txtASN]')，其。

-完成效果。

2.解决在asp.net中与UpdatePanel结合使用时失效的问题：运行后，点击“查询”，页面部分刷新。发现日历选择器没有出来。在ASP.NET的更新面板中异步返回后，日期选择器失败。当第一次加载页面时，日期选择器控件可以正常显示，但是在单击查询后，日期选择器由于异步返回而失败。-Analysis UpdatePanel UpdatePanel主要用于应用程序中的局部刷新，以避免整个页面的回发。UpdatePanel本地刷新的核心在于MicrosoftAjaxWebForm.js文件，其本地刷新过程是将页面提交给服务器(包括ViewState)，执行服务器代码后在UpdatePanel中异步重新呈现HTML。

-分析jQuery。由于UpdatePanel中的文本框元素在本地刷新后被重写，但此时没有重新加载整个DOM树，jQuery的ready事件没有触发，所以文本框元素失去了原来的特效。-解决方案：将初始化DatePicker的代码放在sys . web forms . page requestmanager . getinstance()中。add _ pageloaded(函数(evt，args){ })；

$(function () { Sys。WebForms . page requestmanager . GetInstance()。add_pageLoaded(函数(evt，args) { $('[id$=txtStartDate]')。date picker({ dateformat : ' YY-mm-DD '，changeMonth: true，onClose:函数(selected date){ $('[id $=TxTendDate]')。datepicker('option '，' minDate '，selected date)；} });$('[id$=txtEndDate]')。date picker({ dateformat : ' YY-mm-DD '，changeMonth: true，onClose:函数(selected date){ $('[id $=Txtstartdate]')。datepicker('option '，' maxDate '，selected date)；} });$('#ui-datepicker-div ')。css('font-size '，' 14px ')；//更改大小})；});您也可以参考以下文章进行学习：

jquery UI Datepicker时间控件的使用(基本版)。

jquery用户界面日期选择器时间控件的使用(增强版)

jquery UI Datepicker时间控件的使用(最终版本)。

以上就是本文的全部内容，希望对大家的学习有所帮助。