Jquery Datepicker dateformat not working in 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();

}

Question:

When I load page jquery onSelect function works without any problem.

If I click to search button I set startDate.Text as "10.02.2012" and endDate.Text as DateTime.Today.Date.toShortDateString();. After that jquery onSelect function not working for dateformat dd.mm.yy .However if i change dateformat as dd/mm/yy it works.

How can I run onselect function for dd.mm.yy after button click in asp.net for jquery datepicker ?

Answer 1

When you use UpdatePanel you need to re-initialize the javascript after the post back, because the DOM is change and the old javascript not working any more.

So your code will be as:

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

Related : Asp.Net UpdatePanel in Gridview Jquery DatePicker