Convert selected date format to dd/mm/yyyy from dd.mm.yyyy for SharePoint Date Time control with German LocalId

Problem:

We have a webpart Contains the SharePoint DateTime Control. This webpart can be used in Different Sitecollection with Different Regional settings. Based on Regional settings the Calendar UI should be changed but Date format should be always in dd/mm/yyyy.

Below is the code present in ASCX file of the webpart.

   <SharePoint:DateTimeControl ID="date_GENDateRanges_To" DateOnly="true" runat="server" />


In Code behind .cs file i set the LocalId for the SharePoint DateTimeControl to get the Different calendar based on the Language.

 date_GENDateRanges_To.LocaleId = (int)SPContext.Current.RegionalSettings.LocaleId;

ex : if the LocalId =1033 is for UK so calendar UI is in English and when we select the date it display in the textbox  in format dd/mm/yyyy

if LocalId=1031 is for German so calendar UI is in German and when we select the date it display in the Textox format dd.mm.yyyy

but here is our problem starts the customer want to have the calender UI should be changed in their respective language but Selected Date format in Textbox it should be dd/mm/yyyy.

Solution :

Initially I tried with onchange event on the DateCalender Texbox, as you know SharePoint DateTime Control Consists of A TextBox and Date Picker.

Code Behind :

TextBox txtTo = (TextBox)date_GENDateRanges_To.Controls[0];
 txtTo.Attributes.Add("onchange", "javascript:return ChangeDateFormat('" + txtTo.ClientID + "');");

but onchange event on textbox never fired on selecting the date using Datepicker of SharePoint Date Control. when i change the date using Keypad then the onchange event fires. so  i started searching google and finally i have found there is a Method in DatePicker.js called "OnPickerFinish" which will be called each time you select a date from SharePoint date picker.

I override the "OnPickerFinish" method in my ascx as stated below.

function OnPickerFinish(resultfield) {
        clickDatePicker(null, "", "");

        var mystring = resultfield.value;

  if (mystring.indexOf(".") > -1) {
                var res = mystring.split(".");
                var Newdate = res[0] + "/" + res[1] + "/" + res[2];
                resultfield.value = Newdate;
            }
            else if (mystring.indexOf("-") > -1) {
                var res = mystring.split("-");
                var Newdate = res[0] + "/" + res[1] + "/" + res[2];
                resultfield.value = Newdate;
            }
        }

The above function will take care of two type of Date format as dd.mm.yyyy and dd-mm-yyyy and convert to dd/mm/yyyy.

I thought i achieved what i wanted but suddenly i stuck with another problem. whenever a Postback happend then again the changed Date of Textbox (dd/mm/yyyy) changed to the original LocalId format as dd.mm.yyyy or dd-mm-yyyy.

To overcome this problem again i called "OnPickerFinish" method from code behind as well on each post back as below.

   TextBox txtTo = (TextBox)date_GENDateRanges_To.Controls[0];
 ScriptManager.RegisterStartupScript(UpdatePanel_Search_Docs, GetType(), "Listview2", "javascript:OnPickerFinish('" + txtTo.ClientID + "');", true);

and  i have modified the OnPickerFinish method as well as given below.

function OnPickerFinish(resultfield) {
        clickDatePicker(null, "", "");

        var mystring = resultfield.value;
     
        if (mystring === undefined) {
            mystring = document.getElementById(resultfield).value;
         
            if (mystring.indexOf(".") > -1) {
                var res = mystring.split(".");
                var Newdate = res[0] + "/" + res[1] + "/" + res[2];
                document.getElementById(resultfield).value = Newdate;
            }
            else if (mystring.indexOf("-") > -1) {
                var res = mystring.split("-");
                var Newdate = res[0] + "/" + res[1] + "/" + res[2];
                document.getElementById(resultfield).value = Newdate;
            }
        }
        else {
            if (mystring.indexOf(".") > -1) {
                var res = mystring.split(".");
                var Newdate = res[0] + "/" + res[1] + "/" + res[2];
                resultfield.value = Newdate;
            }
            else if (mystring.indexOf("-") > -1) {
                var res = mystring.split("-");
                var Newdate = res[0] + "/" + res[1] + "/" + res[2];
                resultfield.value = Newdate;
            }
        }


    }


Hope this will help others as well and sincere apologies for my English language. Please mail me or comment if you still face the issue.