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 相关文章推荐
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
微信小程序实现折叠面板
Jan 31 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
使用js和canvas实现时钟效果
Sep 08 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记录日志的实现代码
2011/08/08 PHP
php事务处理实例详解
2014/07/11 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
pyenv命令管理多个Python版本
2017/03/26 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
小学生自我评价范例
2013/09/24 职场文书
银行工作检查书范文
2014/01/31 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
六年级作文之自救
2019/12/19 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
总结Pyinstaller打包的高级用法
2021/06/28 Python