Localise dates

In this tutorial we show you how to set different formats for dates, and even provide translations for day and month strings.

Before starting this tutorial you should create a new app with a bladeset and a single blade.

Create a Date

We will be using the workbench generated for a newly created blade for this example. Let’s get a simple Date object into our blade. Edit the file $BLADE_ROOT/src/$APP/$BLADESET/$BLADE/ExampleClass.js

test.blades.mytestblade.ExampleClass = function()
{
    var sDate = new Date();
    var sMessage = caplin.i18n.Translator.getTranslator().formatDate(sDate);
    this.message = new caplin.presenter.property.Property(sMessage);
}

Refresh the workbench and the date will appear.

i18n date start

Localise

Specify your required date format inside your $APP_ROOT/default-aspect/resources/i18n/en/en.properties file

ct.i18n.date.format=DD, MMMM YYYY

Our date will now show in the format we just specified

i18n date longdate
We use Moment.js for date operations, so for the available formats see http://momentjs.com/docs/.

Provide Translations for Month or Day Strings

To allow each locale to specify the text for days or weeks you can use these tokens in your language files:

Localisation key Description Example
ct.i18n.date.month.<month-name> Long month name March
ct.i18n.date.month.short.<month-name> Short month name Mar
ct.i18n.date.day.<day-name> Long day name Monday
ct.i18n.date.day.short.<day-name> Short day name Mon

So let’s provide a different translation for the abbreviated October inside en.properties.

ct.i18n.date.format=DD, MMMM YYYY
ct.i18n.date.month.october=LongOctoberName

Refresh the workbench and we’ve just renamed October!

i18n date translate

Time Separator

You can also change the display of the time separator by specifying the property in your i18n properties file.

ct.i18n.time.format.separator