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)我的需求是制作一个起始时间和一个终止时间的选择。

代码如下:

<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">开始时间:</label>
<input type="text" id="txtStartDate" name="from"/>
<label for="to">结束时间:</label>
<input type="text" id="txtEndDate" name="to"/>
</body>

注:

(1)$("#ui-datepicker-div").css("font-size", "12px"); 用来改变日期控件的大小

(2)dateFormat: "yy-mm-dd",改变日期格式

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

/* 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']);
});

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

$(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"); //改变大小
});
});

jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题的更多相关文章

  1. java中 try catch finally和return联合使用时,代码执行顺序的小细节

    代码1测试 public static void main(String[] args) { aa(); } static int aa() { try { int a=4/0; } catch (E ...

  2. 解决ASP.NET中的各种乱码问题

    解决ASP.NET中的各种乱码问题 阅读目录 开始 页面显示乱码问题 AJAX提交的数据乱码问题 JavaScript中正确的URL编码方式 ASP.NET中正确的URL编码方式 正确的URL编码方式 ...

  3. ASP.NET中数据棒图,饼图,柱状图的实现

    Web中绘制图形的方法大致有: 1. VML方式:功能强大,但是非常麻烦. 推荐:http://www.elook.net.cn/vml/ 2.使用控件:Dandus, Aspose.chart,Co ...

  4. ASP.NET 中对大文件上传的简单处理

    在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...

  5. asp.net中的Application概述

    全局应用程序类 从Application这个单词上大致可以看出Application状态是整个应用程序全局的.在ASP时代我们通常会在Application中存储一些公共数据,而ASP.NET中App ...

  6. 【译】在Asp.Net中操作PDF - iTextSharp - 利用列进行排版

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 利用列进行排版 在使用iTextSharp通过ASP.Net生成PDF的系列文章中,前面的文章已经讲述了iTextSharp所涵 ...

  7. 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...

  8. 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...

  9. 【译】在Asp.Net中操作PDF – iTextSharp - 使用表格

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 使用表格 使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并 ...

随机推荐

  1. Winform ErrorProvider控件使用

    要实现的功能:判断第一个文本框中输入的是不是字符 “a”. 最终效果: *当输入的不是a,控件旁会显示错误图标.当输入的是a,则错误图标会消失. 首先添加ErrorProvider控件. 代码: pr ...

  2. 在CentOS下源码安装 Xen并搭建Windows虚拟机

    前言 首先要感谢xing的帮助,在他的指导之下才完成环境的搭建,本文档的部分内容来自他的文档.另外,还要感谢——互联网. 1.       环境介绍 Linux: CentOS 6.3 Xen: Xe ...

  3. IntelliJ IDEA导出Java 可执行Jar包

    原文:IntelliJ IDEA导出Java 可执行Jar包 保证自己的Java代码是没有问题的,在IDEA里面是可以正常运行的,然后,按下面步骤: 打开File -> Project Stru ...

  4. 通过 HTTPS 和 SSL 确保 Windows Azure 网站 (WAWS) 安全

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Erez Benari 撰写. 随着身份盗窃和各种形式的网络犯罪迅速增多,使用安全套接字层 (SSL) 对网站进行保护变得越来越 ...

  5. C#面向对象2 静态类、静态成员的理解

    理解:静态成员属于类所有,为各个类的实例所公用,与实例无关,需要全局共享的属性或者方法定义成静态的 C#静态成员:  1.静态成员属于类所有,故用类名调用,非静态成员属于类的实例所有,用实例名调用  ...

  6. 2783: [JLOI2012]树( dfs + BST )

    直接DFS, 然后用set维护一下就好了.... O(nlogn) ------------------------------------------------------------------ ...

  7. spark集群安装配置

    spark集群安装配置 一. Spark简介 Spark是一个通用的并行计算框架,由UCBerkeley的AMP实验室开发.Spark基于map reduce 算法模式实现的分布式计算,拥有Hadoo ...

  8. tomcat下部署activemq(转)

    转自:http://marshal.easymorse.com/archives/1414 activemq可以单独部署和执行,比如类似ActiveMQ的最简单应用中提到的安装和执行方式.但是有时候需 ...

  9. 团队 / Staff_VidaMiaTangoClub_新浪博客

    团队 / Staff_VidaMiaTangoClub_新浪博客 团队 / Staff

  10. Servlet配置对象、上下文对象、多线程问题

    一.Servlet配置对象(ServletConfig):Servlet初始化时,容器调用其init(ServletConfig)方法,传递该对象. 1.获得对象方法: (1).直接使用getServ ...