Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

customization of date picker widget

lakshmi_raghava
Level 3
Level 3

HI,

Please provide how to customize the date picker widget depends on the locale.

 

 

Thanks,

Lakshmi Raghava Reddy Mannem.

1 Accepted Solution
Sham_HC
Correct answer by
Level 10
Level 10
0 Replies
Sham_HC
Level 10
Level 10

OOB should be already doing it.  Change language preference for Calender component on a Toolbar page and adding a date seems to be coming fine [03/12/2013-en, 12/03/2013 - it].
by default, the format used for the date display is "m/d/y". Then it translates the messages using i18n nodes.
Take a look at /libs/cq/ui/widgets/source/ext/override/locale/ext-lang-cq.js file, you can see this mechanism for the DatePicker and the DateField:

format    : CQ.I18n.getMessage("m/d/y", null, "Date format for ExtJS DatePicker (short, eg. two-digit year, http://extjs.com/deploy/ext/docs/output/Date.html)"), format    : CQ.I18n.getMessage("m/d/y", null, "Date format for ExtJS DateField (short, eg. two-digit year, http://extjs.com/deploy/ext/docs/output/Date.html)"),

Depending on the language, the translation is made from the corresponding i18n nodes, for example: /libs/wcm/core/i18n/de/m_d_Y1. (Look at the sling:key property and the sling:message property, adapting to the correct format)

lakshmi_raghava
Level 3
Level 3

Sham HC wrote...

OOB should be already doing it.  Change language preference for Calender component on a Toolbar page and adding a date seems to be coming fine [03/12/2013-en, 12/03/2013 - it].
by default, the format used for the date display is "m/d/y". Then it translates the messages using i18n nodes.
Take a look at /libs/cq/ui/widgets/source/ext/override/locale/ext-lang-cq.js file, you can see this mechanism for the DatePicker and the DateField:

format    : CQ.I18n.getMessage("m/d/y", null, "Date format for ExtJS DatePicker (short, eg. two-digit year, http://extjs.com/deploy/ext/docs/output/Date.html)"), format    : CQ.I18n.getMessage("m/d/y", null, "Date format for ExtJS DateField (short, eg. two-digit year, http://extjs.com/deploy/ext/docs/output/Date.html)"),

Depending on the language, the translation is made from the corresponding i18n nodes, for example: /libs/wcm/core/i18n/de/m_d_Y1. (Look at the sling:key property and the sling:message property, adapting to the correct format)

 

Hi Sham,

Thanks for the quick response,  Need more clarification on this, where should i have to give [03/12/2013 - it] this kind of format, either in js or in the component. Better provide the little peace of code to customize based on the  Locale.

 

Thanks,

M.L.Raghava Reddy.

Sham_HC
Correct answer by
Level 10
Level 10

en, it in my example was referred to language preference  more details at

http://dev.day.com/docs/en/cq/current/administering/security.html#Setting%20User%20and%20Group%20Pre...

lakshmi_raghava
Level 3
Level 3

Sham HC wrote...

en, it in my example was referred to language preference  more details at

http://dev.day.com/docs/en/cq/current/administering/security.html#Setting%20User%20and%20Group%20Pre...

 

 

Hi Sham,

Thanks for the reply and it's working but my main concern is, the localization is applying to all widgets and it's not possible to provide only to that widget or only for a particular page.