欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery UI Datepicker時(shí)間控件的使用及問(wèn)題解決

 更新時(shí)間：2016年04月28日 17:14:34   作者：愛生活，愛編程  
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問(wèn)題解決，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jqueryUI中datepicker的使用，解決與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問(wèn)題。

1.jqueryUI的datepicker的使用

-->首先在jqueryUI官網(wǎng)上根據(jù)你的需要下載適合你系統(tǒng)主題的樣式，jqueryUI主題：下載地址；


-->下載后的文件
jquery-ui-1.10.3.custom文件夾；不同的主題的區(qū)別在于它們引用的css不同
默認(rèn)下載的樣式如下：

 

其它樣式比如我下載的樣式：


下載的jqueryUI中除了css文件夾不同，其它文件均相同

-->頁(yè)面中的使用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)我的需求是制作一個(gè)起始時(shí)間和一個(gè)終止時(shí)間的選擇。

代碼如下：

<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">開始時(shí)間：</label>
  <input type="text" id="txtStartDate" name="from"/>
  <label for="to">結(jié)束時(shí)間：</label>
  <input type="text" id="txtEndDate" name="to"/>
</body>

 注：

(1)$("#ui-datepicker-div").css("font-size", "12px"); 用來(lái)改變?nèi)掌诳丶拇笮?br /> (2)dateFormat: "yy-mm-dd",改變?nèi)掌诟袷?/p>

(3)日期控件為英文版本，加入一段腳本將其漢化

/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
jQuery(function ($) {
  $.datepicker.regional['zh-CN'] = {
    closeText: '關(guān)閉',
    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)對(duì)于一些datepicker的屬性和方法的詳細(xì)使用，可以參考其API文檔，上面講的很詳細(xì)

 -->再分享一招 

 $("[id$=txtASN]")的使用

定義好的asp.net的textbox控件id為txtASN，但是$("#txtASN")卻獲取不到textbox的dom元素了，原因查看源代碼后發(fā)現(xiàn)是其控件ID發(fā)生了變化，如果控件放在了panel中或者母版中，生成的html控件input ID就會(huì)發(fā)生變化，如pnlBaseInfo_txtASN
解決辦法： $("[id$=txtASN]")，其意義就是在于獲得id以txtASN結(jié)尾的dom元素

-->完成效果


2.解決與asp.net中的UpdatePanel聯(lián)合使用時(shí)的失效問(wèn)題
問(wèn)題：運(yùn)行之后，點(diǎn)擊"查詢"，頁(yè)面局部刷新，發(fā)現(xiàn)日歷選擇器不出來(lái)了
DatePicker在asp.net的UpdatePanel中異步回傳后失效的問(wèn)題
在頁(yè)面第一次加載時(shí)可以正常顯示DatePicker控件，但在點(diǎn)擊查詢后，由于異步回傳，DatePicker就失效了。
-->分析UpdatePanel
UpdatePanel在應(yīng)用中主要用于局部刷新，避免整個(gè)頁(yè)面的Postback。 
UpdatePanel實(shí)現(xiàn)局部刷新的核心在于MicrosoftAjaxWebForm.js文件，它的局部刷新過(guò)程就是將頁(yè)面提交到服務(wù)端（包 含ViewState），執(zhí)行服務(wù)端代碼后異步將在UpdatePanel內(nèi)的HTML進(jìn)行重新呈現(xiàn)。 

-->分析jQuery
因?yàn)樵赨pdatePanel局部刷新之后，其中的文本框元素被重寫，而此時(shí)整個(gè)DOM樹并沒(méi)有重新加載，所以jQuery的ready事件并沒(méi)有觸 發(fā)，所以文本框元素就失去了原有的特效。
-->解決方法
將初始化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"); //改變大小
  });
});

大家還可以參考以下文章進(jìn)行學(xué)習(xí)：

jquery UI Datepicker時(shí)間控件的使用方法（基礎(chǔ)版）

jquery UI Datepicker時(shí)間控件的使用方法（加強(qiáng)版）

jquery UI Datepicker時(shí)間控件的使用方法（終結(jié)版）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論