jqueryUI中datepicker的使用，解決與asp.net中的UpdatePanel聯合使用時的失效問題

時間 2020-06-03

標籤 jqueryui datepicker 使用解決 asp.net asp updatepanel 聯合失效問題欄目 JQuery 简体版

原文原文鏈接

1.jqueryUI的datepicker的使用

-->首先在jqueryUI官網上根據你的須要下載適合你係統主題的樣式，jqueryUI主題下載地址；

-->下載後的文件

jquery-ui-1.10.3.custom文件夾；不一樣的主題的區別在於它們引用的css不一樣
javascript

默認下載的樣式以下：css

其它樣式好比我下載的樣式：html

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

-->頁面中的使用datePicker的步驟

(1)引入jquery-ui-1.10.3.custom.min.css樣式文件
jquery

(2)引入jquery-1.9.1.js和jquery-ui-1.10.3.custom.min.js腳本文件；注意：先引入jquery文件api

(3)個人需求是製做一個起始時間和一個終止時間的選擇。asp.net

代碼以下：dom

<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"); 用來改變日期控件的大小
ui

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