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)我的需求是制作一个起始时间和一个终止时间的选择。
代码如下：
<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实现局部刷新的核心在于MicrosoftAjaxWebForm.js文件，它的局部刷新过程就是将页面提交到服务端（包 含ViewState），执行服务端代码后异步将在UpdatePanel内的HTML进行重新呈现。
-->分析jQuery
-->解决方法
将初始化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联合使用时的失效问题的更多相关文章
- java中 try catch finally和return联合使用时，代码执行顺序的小细节
代码1测试 public static void main(String[] args) { aa(); } static int aa() { try { int a=4/0; } catch (E ...
- 解决ASP.NET中的各种乱码问题
解决ASP.NET中的各种乱码问题 阅读目录 开始 页面显示乱码问题 AJAX提交的数据乱码问题 JavaScript中正确的URL编码方式 ASP.NET中正确的URL编码方式 正确的URL编码方式 ...
- ASP.NET中数据棒图，饼图，柱状图的实现
Web中绘制图形的方法大致有: 1. VML方式:功能强大,但是非常麻烦. 推荐:http://www.elook.net.cn/vml/ 2.使用控件:Dandus, Aspose.chart,Co ...
- ASP.NET 中对大文件上传的简单处理
在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...
- asp.net中的Application概述
全局应用程序类 从Application这个单词上大致可以看出Application状态是整个应用程序全局的.在ASP时代我们通常会在Application中存储一些公共数据,而ASP.NET中App ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 利用列进行排版
原文 [译]在Asp.Net中操作PDF - iTextSharp - 利用列进行排版 在使用iTextSharp通过ASP.Net生成PDF的系列文章中,前面的文章已经讲述了iTextSharp所涵 ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图
原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片
原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 使用表格
原文 [译]在Asp.Net中操作PDF – iTextSharp - 使用表格 使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并 ...
随机推荐
- Office 365 - SharePoint 2013 Online之加入App开发工具Napa
1.新建一个站点集,模板选择开发者模板.例如以下图: 2.确定以后,须要稍等一会儿; 3.点击站点内容,加入app,例如以下图: 4.进入SharePoint Store.选择Napa.例如以下图: ...
- linux signal 处理
v/:* {behavior:url(#default#VML);} o/:* {behavior:url(#default#VML);} w/:* {behavior:url(#default#VM ...
- 关于PhpDE zend ide破解方式
1.文件和汉化文件 ZendStudio官方下载地址:http://www.geekso.com/component/zendstudio-downloads/ 百度云地址: 10.0.0.msi文件 ...
- libevent： linux安装libevent
http://libevent.org/上下载最新的libevent, 如 libevent-2.0.22-stable.tar.gz. 然后解压,按照README里面的步骤安装.
- 基于visual Studio2013解决C语言竞赛题之0703乾坤大挪移
题目
- Haxe UI框架StablexUI的使用备忘与心得（序）
最近在手上的项目开发中,从原来的使用Sprite全手写UI,开始逐步使用StablexUI,感觉还是相当不错的,强大.高效.轻量.灵活,非常适应我当前的实际需求. 不过作为小种语言的一个小众第三方开源 ...
- spoj 1812 lcsII (后缀自动机)
spoj 1812 lcsII (后缀自动机) 题意:求多个串的lcs,最多10个串,每个串最长10w 解题思路:后缀自动机.先建好第一个串的sam,然后后面的串拿上去跑(这个过程同前一题).sam上 ...
- Android 应用程序签名
本文主要介绍Android应用程序签名的相关理论知识以及怎样公布Android应用程序. 1.签名的概念 为大家所熟知的日常生活中的签名,它是代表某个人的特殊标记,用于唯一标识某个人.而Android ...
- BZOJ 3173: [Tjoi2013]最长上升子序列( BST + LIS )
因为是从1~n插入的, 慢插入的对之前的没有影响, 所以我们可以用平衡树维护, 弄出最后的序列然后跑LIS就OK了 O(nlogn) --------------------------------- ...
- itextSharp 使用模板(PdfTemplate)不规则分栏(ColumnText)
public static void Main() { Document document = new Document(); BaseFont bf = BaseFont.createFont(Ba ...