How to create a localized DateChooser in your Flex app

This article was originally written in English. Text in other languages was provided by machine translation.

 

Xie Fang

By default the DateChooser in Flex shows the English UI. You need to set the dayNames and monthNames properties to localized strings so that it shows the language you want. But do you know that all these localized names are available in the flash.globalization package? Here’s how to get the localized names.

First, create a DateTimeFormatter object with the locale you are interested in the <fx:Script> section

Alternatively, if you feel more comfortable with MXML than ActionScript, you can use a MXML DateTimeFormatter in the <fx:Declarations> section.

Second, create a vectorToArray function for type conversion in the <fx:Script> section, we will explain a little more in the next step.

Third, in your <mx:DateChooser> component, set the dayNames and monthNames properties.


And since you are using the DateTimeNameStyle enums, you want to import them in <fx:Script>

Here, the getWeekdayNames and getMonthNames methods give the localized names as a vector of string. And vectorToArray function is used to convert them to array before assigning them to the DateChooser. The getFirstWeekday method gives the first day of the week for the locale. For example, many european locales use Monday as the first day instead of Sunday.

That’s it. Now run your app and you will see the DateChooser UI is showing in Chinese.

Change the locale to British English (en-GB) and Arabic, Saudi Arabia (ar-SA) to see how the locale changes the first day of week.

Think that this doesn’t save time than hardcoding? Such as:

It is true if you just need to localized to your language. But imagine you need to localize in multiple languages, or languages you don’t know, or you want language switchable by users at run time. Using flash.globalization is more scalable.

To learn more features provided by flash.globalization package, check out the ActionScript API documentation.

3 thoughts on “How to create a localized DateChooser in your Flex app

  1. Thanks Mihai for bringing this up. Yes, you need one more line in the DateChooser component.

    firstDayOfWeek=”{df.getFirstWeekday()}”

    I just updated the post. This is needed as Sunday is not always the proper first day of week on the calendar. Many European locales use Monday and there are also locales that use Saturday. The getFirstWeekday method solves the problem.

  2. do you have localization on flex 3
    I use date chooser and ko_KR as my locale for korean

    i get null value at the side of the month
    its like

    []

Leave a Reply