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联合使用时的失效问题的更多相关文章

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最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并 ...

随机推荐

数据挖掘算法学习（三）NaiveBayes算法
算法简单介绍 NBC是应用最广的分类算法之中的一个.朴素贝叶斯模型发源于古典数学理论,有着坚实的数学基础,以及稳定的分类效率.同一时候,NBC模型所需预计的參数非常少,对缺失数据不太敏感,算法也比較简 ...
oracle expdp和impdp使用例子
情景: 由于生产需求,需要把rmtel用户的数据完全复制一份给rmtel_xzy,但排除rmtel用户 ('CAB_JJXPORT_TAB','T_SERVICEXX','TB_CROSSCONNEC ...
Eclipse使用技巧总结（三）
十六.快速关闭窗口关闭当前打开窗口 Ctrl + W 关闭当前打开的所有窗口 Ctrl +Shift +F4 十九.重命名 F2 二十.快速回到上次编辑点 Ctrl + Q 二十 ...
10 - 应用程序间通信、本地通知、加速计、URL传输中文
一.应用间通信 URL 调用系统服务: tel:11111 sms:xxx@163.com http:// URL深入类型://主机:端口/地址?参数 label框等于文字大小快捷键:command ...
stack around the variable “ ” was corrupted
用scanf格式控制不当经常发生此错误. 如 short int a=10; scanf("%d",&a); 应该是%hd; 一般是越界引起的. 参看:http://bl ...
php实现加好友功能
思路: 1用户发送好友申请之后把申请储存到申请数据表中,状态为未验证 2 当用户登录时,查询申请表中是否有uid和被申请人id相同的,如果同意,更改状态,并把数据插入到对应的好友数据表否则,删除申 ...
Windows cmd
windows常用命令 http://www.cnblogs.com/kekec/p/3662125.htmlwindows批处理语法 http://www.cnblogs.com/kekec/p/3 ...
Response.AppendCookie
//写入 protected void Button2_Click(object sender, EventArgs e) { HttpCookie cookie=new HttpCookie(&qu ...
web前端网页开发一般过程
看见很多新手同学前端开发,效率比较慢.总是拿起代码就敲,不分析,没有逻辑,反而使效率变慢.所谓磨刀不误砍柴工,有一个良好的过程,才是最主要的: 1.分析平面效果图,在草稿纸上画出基本结构图 2.建立项 ...
Mac上利用Eclipse编译Cocos2d-x
目前使用较多的Cocos2d-x开发平台是XCode,应该是由于大部分Cocos2d-x开发者都是iOS开发出生.但是当我们将XCode开发的Cocos2d-x工程发布Android版本时,每次都需要 ...

jqueryUI中datepicker的使用，解决与asp.net中的UpdatePanel联合使用时的失效问题