Demos Back to Docs

Date Column Type

15 of 124
ZingGrid provides a <zg-column type="date"> column type. This column type will automatically format and validate date numbers. While editing the cell, a date picker will be provided.
Result Full HTML CSS JS
Edit Download

The special default capabilities for date column type come when editing the field.

Full Code

<!DOCTYPE html>
<html class="zg-html">

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

    .zg-body zing-grid[loading] {
      height: 400px;
    }

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

<body class="zg-body">
  <p>The special default capabilities for <code>date</code> column type come when editing the field.</p>
  <zing-grid caption="<code>date</code> Column Type" search sort editor-controls>
    <zg-colgroup>
      <zg-column index="birth_date" header="Without Column Type" editor="disabled"></zg-column>
      <zg-column index="birth_date" header="With Column Type" type="date"></zg-column>
    </zg-colgroup>
    <zg-data data='[
        {
          "id": 1,
          "birth_date": "9-14-1974"
        },
        {
          "id": 2,
          "birth_date": "July 29, 1975"
        },
        {
          "id": 3,
          "birth_date": "8/04/2001"
        },
        {
          "id": 4,
          "birth_date": "1979-05-04T08:00"
        },
        {
          "id": 5,
          "birth_date": "2001-05-05 08:30:45.687"
        }
      ]'></zg-data>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <p>The special default capabilities for <code>date</code>
     column type come when editing the field.</p>
    <zing-grid
      caption="<code>date</code> Column Type"
      search
      sort
      editor-controls>
      <zg-colgroup>
        <zg-column index="birth_date" header="Without Column Type" editor="disabled"></zg-column>
        <zg-column index="birth_date" header="With Column Type" type="date"></zg-column>
      </zg-colgroup>
      <zg-data data='[
        {
          "id": 1,
          "birth_date": "9-14-1974"
        },
        {
          "id": 2,
          "birth_date": "July 29, 1975"
        },
        {
          "id": 3,
          "birth_date": "8/04/2001"
        },
        {
          "id": 4,
          "birth_date": "1979-05-04T08:00"
        },
        {
          "id": 5,
          "birth_date": "2001-05-05 08:30:45.687"
        }
      ]'></zg-data>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

.zg-body zing-grid[loading] {
  height:400px;
}

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