---json
{
    "aliases": [
        { "path": ":docs:content:date" }
    ],
    "cache_expiration_frequency": "@daily",
    "canonical": ":variable:date",
    "date_published": "2021-09-26T00:00:00+00:00",
    "description": "This page shows you how to format a date.",
    "h1": "ComboStrap - Date Component",
    "page_id": "59rkmdj9buce6ud5bvwzb",
    "title": "How to format a date ?"
}
---

====== How to format a date ? ======


===== About =====
This [[howto:howto|how to]] will show you how to format a date <icon name="healthicons:i-schedule-school-date-time"/> with the [[:docs:templating:pipeline#format|pipeline format function]].



You can apply it to any [[:docs:templating:variable|date variable]] such as:
  * the today's date ''now''
  * or any [[docs:templating:variable|page date attribute]] such as:
      * ''date_created'' or ''date_modified''  of a page
      * ''date_published'' (if specified, see [[docs:page:published]])
      * ''date_start'' or ''date_end'' of an [[docs:type:event|event]]




===== Example =====

==== Today's date ====

<webcode name="Default" frameborder="0">
Without any formatting, the date is given in [[docs:metadata:date_format|the iso date format]]
<code dw>
${now}
</code>
</webcode>

\\
\\

To apply a formatting, you need to use the [[:docs:templating:pipeline#format|format function]]
<webcode name="Default" frameborder="0">
<code dw>
${now | format()}
</code>
The output is a date formatted to the default format of your [[:docs:locale:locale|locale (ie country and language)]]
</webcode>


\\
<note tip>
To have it refresh every day, we expire the [[docs:cache:cache|page cache date daily]]
</note>


==== Today's date with a pattern ====

<webcode name="Default" frameborder="0">
Today's date with a [[https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax|date pattern]] where:
      * ''MMM'' is the short month description 
      * ''dd'' is the day number on two digits
<code dw>
${now | format( "MMM dd" )}
</code>
  * The output:
</webcode>


==== Formatting a date content  ====

Because a pipeline is an expression, you can even format a date written in your content.

<webcode name="Default" frameborder="0">
<code dw>
${"2022-05-05" | format()}
</code>
  * The output:
</webcode>
==== Formatting a date in an other language  ====


<webcode name="Default" frameborder="0">
  * A date formatted in French with the default pattern (The markup with the [[docs:locale:locale|locale]] attribute with just the region (ie country) as value)
<code dw>
${now | format( "", "fr" )}
</code>
</webcode>

\\
\\
<webcode name="Default" frameborder="0">
  * Compare it with the US date
<code dw>
${now | format( "", "us" )}
</code>
</webcode>

==== Date of a page ====

You can also print the date metadata of a page.

<webcode name="Default" frameborder="0">
For instance, for the date of this article
<code dw>
  * ${date_created | format()}
  * ${date_modified | format()}
  * ${date_published | format()}
</code>
The output is:
</webcode>