# 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**

```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](../../../images/i18n-date-start.png)

## 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](../../../images/i18n-date-longdate.png)

**📌 NOTE**\
We use _Moment.js_ for date operations, so for the available formats see [http://momentjs.com/docs/](https://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:

<table>
<thead>
<tr>
<th>Localisation key</th>
			<th>Description</th>
			<th>Example</th>
		</tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td><code>ct.i18n.date.month.&lt;month-name&gt;</code></td>
			<td>Long month name</td>
			<td>March</td>
		</tr>
<tr>
<td><code>ct.i18n.date.month.short.&lt;month-name&gt;</code></td>
			<td>Short month name</td>
			<td>Mar</td>
		</tr>
<tr>
<td><code>ct.i18n.date.day.&lt;day-name&gt;</code></td>
			<td>Long day name</td>
			<td>Monday</td>
		</tr>
<tr>
<td><code>ct.i18n.date.day.short.&lt;day-name&gt;</code></td>
			<td>Short day name</td>
			<td>Mon</td>
		</tr>
</tbody>
</table>

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](../../../images/i18n-date-translate.png)

## 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
```