experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-Internationalization-date-column
mode: provenance
representation: html
origin_response_id: 14eb1f3d1c8300a268e85ab8ab78da67
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.531Z
version_nonce: a4ea7ad50b61fbe5e2ccdbcb3e10b378
generated_at_utc: 2026-11-13T00:45:15.975Z
response_nonce: c86894b9fb071638e0a7b8ad7b2f2818

International Date Formatting

60 of 125
You can automatically format your date to the corresponding language default. Add conventionally standard tokens (standard derived from moment.js) to date columns for custom date formatting <zg-column type="date" type-date-format="[Month:] MM">
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 325px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="Date Formatting">
    <zg-colgroup>
      <zg-column index="d1" header="Input String"></zg-column>
      <zg-column index="d1" header="No Formatting<br>Default Locale" type="date"></zg-column>
      <zg-column index="d1" header="No Formatting<br>en-GB Locale" type="date" locale="en-GB"></zg-column>
      <zg-column index="d1" header="Format: dddd, MMMM Do YYYY" type-date-format="dddd, MMMM Do YYYY" type="date"></zg-column>
      <zg-column index="d1" header="Format: Mo [Month], Qo [Quarter]" type-date-format="Mo [Month], Qo [Quarter]" type="date"></zg-column>
      <zg-column index="d1" header="English" type-date-format="LLLL" type="date"></zg-column>
      <zg-column index="d1" header="Spanish" type-date-format="LLLL" type="date" locale="es"></zg-column>
      <zg-column index="d1" header="German" type-date-format="LLLL" type="date" locale="de"></zg-column>
    </zg-colgroup>
    <zg-data data='[{"d1": "12/30/2018 12:01:01 AM"}, {"d1": "1/1/2015 1:32:55 PM"}, {"d1": "1/1/2016 1:32:55 PM"}, {"d1": 1451683975567}]'></zg-data>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    
   <zing-grid caption="Date Formatting">
      <zg-colgroup>
        <zg-column index="d1" header="Input String"></zg-column>
        <zg-column index="d1" header="No Formatting<br>Default Locale" type="date"></zg-column>
        <zg-column index="d1" header="No Formatting<br>en-GB Locale" type="date" locale="en-GB"></zg-column>
        <zg-column index="d1" header="Format: dddd, MMMM Do YYYY" type-date-format="dddd, MMMM Do YYYY" type="date"></zg-column>
        <zg-column index="d1" header="Format: Mo [Month], Qo [Quarter]" type-date-format="Mo [Month], Qo [Quarter]" type="date"></zg-column>
        <zg-column index="d1" header="English" type-date-format="LLLL" type="date"></zg-column>
        <zg-column index="d1" header="Spanish" type-date-format="LLLL" type="date" locale="es"></zg-column>
        <zg-column index="d1" header="German" type-date-format="LLLL" type="date" locale="de"></zg-column>
      </zg-colgroup>
      <zg-data data='[{"d1": "12/30/2018 12:01:01 AM"}, {"d1": "1/1/2015 1:32:55 PM"}, {"d1": "1/1/2016 1:32:55 PM"}, {"d1": 1451683975567}]'></zg-data>
    </zing-grid>
    
  </body>
</html>
.zg-body {background:#e6e6e6;}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery