customization of date picker widget

[lakshmi_raghava]

HI,

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

Thanks,

Lakshmi Raghava Reddy Mannem.

[Sham_HC]

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]

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 · Accepted solution]

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]

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.