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 в дд/мм/гг он работает.

Как я могу запустить onselect функции для dd.mm.yy после нажатия кнопки в asp.net для Jquery DatePicker?

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