jQuery Datepicker DateFormat在Asp.net中不起作用

Question

jQuery的/ JS：

 $("#startDate").datepicker(
 {

 onSelect: function (date) { // Onselect not working after postback

 var date1 = $('#startDate').datepicker('getDate');
 var date = new Date(Date.parse(date1));
 date.setDate(date.getDate() + 1);
 var newDate = date.toDateString();
 newDate = new Date(Date.parse(newDate));
 $('#endDate').datepicker("option", "minDate", newDate);},

 });


$("#endDate").datepicker();

$.datepicker._gotoToday = function (id) {
$(id).datepicker('setDate', new Date()).datepicker('hide').blur();};

$.datepicker.regional['tr'] = {
closeText: 'Kapat',
prevText: '<geri',
nextText: 'ileri>',
currentText: 'Bugün',
dayNamesShort: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
dayNamesMin: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
weekHeader: 'Hf',


dateFormat: 'dd.mm.yy', // Problem here


firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};

$.datepicker.setDefaults($.datepicker.regional['tr']);
}

HTML：

<asp:TextBox ID="startDate" runat="server" ReadOnly="true"></asp:TextBox>   

<asp:TextBox ID="endDate" runat="server" ReadOnly="true"></asp:TextBox>

<asp:Button ID="btnsearch" runat="server" Text="search OnClick="btnsearch_Click" />

CodeBehind：

 protected void btnsearch_Click(object sender, EventArgs e)
{

    startDate.Text = "10.02.2012";
    endDate.Text = DateTime.Today.Date.ToShortDateString();

}

題：

當我加載頁面時，jQuery onSelect函數可以正常工作 。

如果單擊 搜索按鈕，則將startDate.Text設置為“ 10.02.2012 ”，將endDate.Text設置為DateTime.Today.Date.toShortDateString（） ;。 之后，jquery onSelect函數不適用於dateformat dd.mm.yy。但是如果我將dateformat更改為dd / mm / yy，它可以工作。

在asp.net中單擊 jquery datepicker 按鈕后，如何為dd.mm.yy運行onselect函數？

Answer 1

當您使用UpdatePanel時，您需要在回發后重新初始化javascript，因為DOM已更改並且舊的javascript不再起作用。

因此，您的代碼將為：

<script type="text/javascript"> 
    function InitDatePicker()
    {
         $("#startDate").datepicker(
         {
             onSelect: function (date) {     
               var date1 = $('#startDate').datepicker('getDate');
               var date = new Date(Date.parse(date1));
               date.setDate(date.getDate() + 1);
               var newDate = date.toDateString();
               newDate = new Date(Date.parse(newDate));
               $('#endDate').datepicker("option", "minDate", newDate);
             },
         });

        $("#endDate").datepicker();

        $.datepicker._gotoToday = function (id) {
            $(id).datepicker('setDate', new Date()).datepicker('hide').blur();
        };

        $.datepicker.regional['tr'] = {
            closeText: 'Kapat',
            prevText: '<geri',
            nextText: 'ileri>',
            currentText: 'Bugün',
            dayNamesShort: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
            dayNamesMin: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
            weekHeader: 'Hf',
            dateFormat: 'dd.mm.yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        };

        $.datepicker.setDefaults($.datepicker.regional['tr']);
        }
    }

    function UnBindDatePicker()
    {
        // make unbind to avoid memory leaks.
        $("#startDate").unbind();
        $("#endDate").unbind();
    }

   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker
       InitDatePicker();
    });        

    function InitializeRequest(sender, args) {
       // make unbind to avoid memory leaks.
       UnBindDatePicker();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       InitDatePicker();
    }   
</script> 

相關： Gridview jQuery DatePicker中的Asp.Net UpdatePanel