Friday, November 21, 2014

SharePoint Hosted App: How to manage DateTimeControl Picker and Format with the correct Language and Culture

This article explains how convert the Raw Date from REST calls and manage Date Format base in different Languages and lcid and how to manipulate the Out of the Box SharePoint Control  DateTimeControl to display the correct Language in the DatePicker with the correct Date Format.  
This is very important when you are creating your App with multiple Languagues and you need to keep integrity of Regional settings bettwen your Hosted site and App Web Site and have to be done in dinamyc approach.

DateFormat SharePoint Hosted App example 

Let's go for steps:
  • Create a Site and define his Language
    • For this example a Site Collection was created base in Language "PT-pt" and Lcid 2070

Create a SharePoint Hosted App call "DateFormat", this solution shows the tips and trick about managing Dateformats, Culture and Languages using out of the box SharePoint controls and Raw dates from SharePoint Data.

Add DateTimeControl in App

Include the SharePoint Web control Markup DateTimeControl in the default.aspx Page.

When the SharePoint Hosted App is installed in the SharePoint Site access the App Web select the calendar Picker,
Since you create your Host site base in Language "PT-pt" and Lcid "2070" you are expecting to get the correct Language, but that don't happen like is shown in the image bellow.

PS:"The control has a LocaleId parameter but i dont include in the Control since the language can change and don't have access to server side code, everything should be made using JS"

If you access to F12 Developer tools you are able to see that the DatePicker control opens a iframe base in Parameters but the most interresting are the values from there, 
  • lcid: 1033
  • Langid:2070 

This is the reason the calendar appear with En-US Language in the calendar and not with PT-pt language, 

To get the correct values from the iframe parameter you can use the Regional Settings of the current Web.

For more information about the parameter see the 3 point "Calendar Options" in the following article, 
Using SharePoint’s DatePicker Control:

You can use REST call fill the needed parameters in the datepicker Iframe request.

Thef following code example call the Regional Settings and replace the parameters that i used in the Calendar picker with the lcid "1033" to correct lcid, for this case "2070":

      url: getQueryStringParameter("SPAppWebUrl") + "/_api/Web/RegionalSettings",
      method: "GET",
      headers: { "Accept""application/json; odata=verbose" },
      success: function (data) {
          $(".ms-dtinput a").each(function () {
              $(this).attr("onclick", $(this).attr("onclick")
                  .replace(/cal=\d{1,2}/"cal=" + data.d.CalendarType)
                  .replace(/lcid=\d{4}/"lcid=" + data.d.LocaleId)
                  .replace(/ww=\d{7}/"ww=" + ("0000000" + data.d.WorkDays.toString(2)).slice(-7))
                  .replace(/fdow=\d{1}/"fdow=" + data.d.FirstDayOfWeek)
                  .replace(/fwoy=\d{1}/"fwoy=" + data.d.FirstWeekOfYear)
                  .replace(/hj=\d+/"hj=" + data.d.AdjustHijriDays)
                  .replace(/swn=\w+/"swn=" + data.d.ShowWeeks));

After the change is made, access the datepicker and language appears correctly with the Date Format included as shown in image below.

If we access the html associated in the datepicker control, we are able to see the Lcid is different with the correct Regional Setting lcid "2070".

Convert REST/Raw Date to correct Format

After we correct the SharePoint Control DateTimeControl we should start to convert Date to string with the correct Language Format, for this the following example make the convertion of Date to String with the Language associated in the Site.

The following exame make a call to Object Web/Created to return the Date when the Site was created and include in a Text Box with the Date format associated with the Culture.

        url: getQueryStringParameter("SPAppWebUrl") + "/_api/Web/created",
        method: "GET",
        headers: { "Accept""application/json; odata=verbose" },
        success: function (data) {
            $('#OutputDate').val(new Date(data.d.Created).format(Sys.CultureInfo.CurrentCulture.dateTimeFormat.ShortDatePattern));

for this example the raw output date will be "2014-11-21T09:57:17" and the method "Date(data.d.Created).format(Sys.CultureInfo.CurrentCulture.dateTimeFormat.ShortDatePattern)" converts the Date to the Culture Date Format that is associated in the Server but by default is "1033" as shown bellow image.

To make the correct Date format convertion you need to include the following reference in your App Page, JS reference to SP.DateTimeUtil.js.

This SharePoint Object make the convertion to the correct Lcid for this case "PT-pt"

<SharePoint:ScriptLink Name="SP.DateTimeUtil.js" runat="server" LoadAfterUI="true"   />

Deploy the new version of the App and validate the Date format from the REST call and will be with the correct Date Format in this case for "PT-pt" and "2070".

After this change is made you can make the call to date and make the JS convertion from String to Date using the method "parseLocale"

var date = Date.parseLocale($('#OutputDate').val());

and returns the value as a date without having error of bad Format of Date 

With the correct Date Object you are able to make the necessary changes in your SharePoint Hosted App without incorrect formats and issues in SharePoint controls.
A big thank you to my colleague "Selim Gezgin".

Support Articles:
Using SharePoint’s DatePicker Control:

Hope you like this article,
Kind regards,
André Lage