Skip to Content
Author's profile photo Jerry Wang

DateFormat in DatePicker control

This blog contains my research about the date format determination for DatePicker control. 

/wp-content/uploads/2015/10/clipboard1_809666.png

Suppose I have select a new date ( 2015-10-15 ) from DatePicker control, my aim is to figure out the logic how the line 192 has translated dateTapped, “Thu Oct 15 2015” to tempString, “15.10 2015”.

/wp-content/uploads/2015/10/clipboard2_809667.png

aFormatArray

When I debug into this method, I find an array this.aFormatArray.

/wp-content/uploads/2015/10/clipboard3_809668.png

It contains the date format placeholder as below: “day.month.year”. This is the reason why I get 15.10.2015 as conversion result.

/wp-content/uploads/2015/10/clipboard4_809672.png

So the question now is, when, where and how is this.aFormatArray populated?

Do a text search and I find out it is determined by variable this.oFormatOptions.pattern.

In my laptop it has value “dd.MM.yyyy”. Where does this pattern come from?

this.oFormatOptions.pattern

/wp-content/uploads/2015/10/clipboard5_809673.png

Through debugging we can know the pattern is determined by these three factors:

/wp-content/uploads/2015/10/clipboard6_809674.png

The pattern is stored in this.mCustomData in LocaleData.js:

/wp-content/uploads/2015/10/clipboard7_809675.png

this.mCustomData

And this.mCustomData is filled in LocalData.js ‘ constructor function:

/wp-content/uploads/2015/10/clipboard8_809676.png

getCustomLocaleData function just simply returns mSettings in Configuration.js:

/wp-content/uploads/2015/10/clipboard9_809677.png

mSettings

Now I will look into when the data in this.mSettings will be populated. I find an array M_ABAP_DATE_FORMAT_PATTERN which contains lots of date format options. For my current testing, the format option with key sFormatId = 1 is chosen. Why “1”?

/wp-content/uploads/2015/10/clipboard10_809678.png

/wp-content/uploads/2015/10/clipboard11_809679.png

This “1” is configured in my user settings for corresponding ABAP backend system and retrieved via an OData request:

/wp-content/uploads/2015/10/clipboard12_809680.png

/wp-content/uploads/2015/10/clipboard13_809681.png

/wp-content/uploads/2015/10/clipboard14_809682.png

Now we are ready to go back for checking how is aFormatArray filled by the Date Format DD.MM.YYYY.

The logic is, to simply replace each character in this.oFormatOptions.pattern with corresponding hard code value in DateFormat.prototype.oStates:

/wp-content/uploads/2015/10/clipboard15_809683.png

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dmitrii Sharshatkin
      Dmitrii Sharshatkin

      Hello Jerry,

      Did you ever try to create date picker with automatically identified pattern or date format?

      /wp-content/uploads/2016/06/issue_972444.png

      The above code (which is commented) does not work. Do you know why this can happen?

      Thanks, Dima

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hi Dima,

      can you please also provide the screenshot for the content of your model, cmnParamModel and CREATE_DTMANAGEMENT?

      Best regards,

      Jerry