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

网络编程 2024/11/17 佚名

3 1 2

本文实例为大家分享了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在应用中主要用于局部刷新，避免整个页面的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"); //改变大小
  });
});

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

jquery UI Datepicker时间控件的使用方法（基础版）

jquery UI Datepicker时间控件的使用方法（加强版）

jquery UI Datepicker时间控件的使用方法（终结版）

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

jquery,UI,Datepicker,时间控件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“jquery UI Datepicker时间控件的使用及问题解决”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

Bootstrap模态对话框的简单使用

jquery弹出遮掩层效果【附实例代码】

评论“jquery UI Datepicker时间控件的使用及问题解决”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接