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.

SharePoint Popup Model dialog is not closing on click of button

Problem :

I have to close the SharePoint Model dialog on click of the cancel Button. It worked fine in SharePoint 2010 but same code when i moved to SharePoint 2010 farm then it did not  work.

HTML Snippet:





on click i have called the CloseModelPopUp() javascript method. This javascript close the SharePoint Dialog in 2010 environment but it did not close in SharePoint 2013.

Solution :

I have searched on google and i got the idea instead of using the above code we have to use some other function. and it was easy in real just a single line of java script.



Above script worked like a charm in SP 2013 and closed the SharePoint Model Dailog.

Below link from where i got the solution.

http://sharepoint.stackexchange.com/questions/118811/sp-ui-modaldialog-close-button

You will get more explanation why the above script does not work in SharePoint 2013 using the above link.