Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

# Format Dates in Text Elements with Code
Formatting dates within [text elements](fallback::https://dev.wix.com/docs/velo/api-reference/$w/text/introduction) using code allows you to display dates dynamically and tailor them to different locales.

Use JavaScript's `Date` class' [`toLocaleDateString`](fallback::https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) method to format dates on your site.

## Format dates on your site

1. To render a date in the site visitor's locale settings on their computer, call `toLocaleDateString()` on your date object without specifying any parameters. For example:
    ```js
    $w("currentDate").text = new Date().toLocaleDateString();

    // Examples:
    // en-US - 1/30/2025
    // en-UK - 30/01/2025
    ```

1. Add [parameters](fallback::https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#parameters) to customize the date's locale. For example:
    ```js
    const options = {
      day: "numeric",
      month: "short",
      year: "numeric",
    };

    $w("currentDate").text = new Date().toLocaleDateString("en-US", options); // Jan 30, 2025
    ```

## Format dates from a dataset on your site

If you're displaying dates retrieved from a dataset, you can format all dates retrieved from your dataset in the same way using the [dataset](fallback::https://dev.wix.com/docs/velo/api-reference/$w/dataset/introduction) element's [`onReady()`](fallback::https://dev.wix.com/docs/velo/api-reference/$w/dataset/on-ready) and [`getCurrentItem()`](fallback::https://dev.wix.com/docs/velo/api-reference/$w/dataset/get-current-item) with `toLocaleDateString()`. For example:
```js
$w("#myDataset").onReady(() => {
  const date = $w("#myDataset").getCurrentItem().dateField;

  // The dateText is linked to the dataset and is initially hidden.
  $w("#dateText").text = new Date(date).toLocaleDateString();
  $w("#dateText").show();
});
```

> **Note:** You can also [format dates from a dataset](fallback::https://support.wix.com/en/article/cms-formatting-live-site-date-and-time-content-from-your-collection) in the editor without code.

## See also
- [About formatting text elements](fallback::https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/formatting-layout/about-formatting-text-elements)
- [Text element](fallback::https://dev.wix.com/docs/velo/api-reference/$w/text/introduction)