jquery UI Datepicker时间控件的使用及问题解决


Posted in Javascript onApril 28, 2016

本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题。

1.jqueryUI的datepicker的使用

-->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题:下载地址;

jquery UI Datepicker时间控件的使用及问题解决

-->下载后的文件
jquery-ui-1.10.3.custom文件夹;不同的主题的区别在于它们引用的css不同
默认下载的样式如下:

 jquery UI Datepicker时间控件的使用及问题解决

其它样式比如我下载的样式:

jquery UI Datepicker时间控件的使用及问题解决

下载的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元素

-->完成效果

jquery UI Datepicker时间控件的使用及问题解决

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

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

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

Javascript 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js中eval详解
Mar 30 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 #Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 #Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 #Javascript
JavaScript String 对象常用方法总结
Apr 28 #Javascript
JavaScript Math 对象常用方法总结
Apr 28 #Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 #Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 #Javascript
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
详解React 条件渲染
2020/07/08 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python用GET方法上传文件
2015/03/10 Python
python操作mysql数据库
2017/03/05 Python
Python实现按中文排序的方法示例
2018/04/25 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python保留小数位的三种实现方法
2020/01/07 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
初中班主任寄语
2014/04/04 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
领导干部对照检查材料
2014/08/24 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Node.js实现断点续传
2021/06/23 Javascript
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis