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" />

代码隐藏：

 protected void btnsearch_Click(object sender, EventArgs e)
{

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

}

问题：

当我加载页面 jquery onSelect功能工作没有任何问题。

如果我 单击 到 search 按钮，我将 startDate.Text 设置为“10.02.2012”并且 endDate.Text 作为 DateTime.Today.Date.toShortDateString();。之后 jquery onSelect 功能 not working for dateformat dd.mm.yy 。但是，如果我将 dateformat 更改为 dd/mm/yy 有效。

如何在 jquery datepicker 的 asp.net 中单击 按钮 后为 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> 

相关：Asp.Net UpdatePanel in Gridview Jquery DatePicker