Date and Time inputs

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Astro

Bridgetown

Docusaurus

Eleventy

Gatsby

Hugo

Jekyll

Lume

MkDocs

Next.js

Nuxt

Static

SvelteKit

Custom

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

A Date or Time input lets your team members add date or time values to your data files or the front matter of markup files. Date and time inputs have a calendar to select date values and a 12-hour time field.

There are three types of Date and Time input:

• Datetime
• Date
• Time

For each input, you can configure the timezone and how CloudCannon handles empty values. You can also use the general configuration options available for all inputs.

Datetime#

The Datetime input provides an editing interface for date and time values.

You can configure a Datetime input using the type key with the value datetime. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

_inputs:
  published:
    type: datetime

{
  "_inputs": {
    "published": {
      "type": "datetime"
    }
  }
}

module.exports = {
  _inputs: {
    published: {
      type: "datetime"
    }
  }
};

Once configured, the Datetime input will appear in the Data Editor or the Visual or Content Editor sidebar when you add it to a data file or the front matter of a markup file.

---
published: 2024-07-16T12:00:00Z
---

Blog content goes here.

Date#

The Date input provides an editing interface for date values.

You can configure a Date input using the type key with the value date. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

_inputs:
  due:
    type: date

{
  "_inputs": {
    "due": {
      "type": "date"
    }
  }
}

module.exports = {
  _inputs: {
    due: {
      type: "date"
    }
  }
};

Once configured, the Date input will appear in the Data Editor or the Visual or Content Editor sidebar when you add it to a data file or the front matter of a markup file.

---
due: 2024-07-16T00:00:00Z
---

Blog content goes here.

Time#

The Time input provides an editing interface for time values.

You can configure a Time input using the type key with the value time. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

_inputs:
  event_opens:
    type: time

{
  "_inputs": {
    "event_opens": {
      "type": "time"
    }
  }
}

module.exports = {
  _inputs: {
    event_opens: {
      type: "time"
    }
  }
};

Once configured, the Time input will appear in the Data Editor or the Visual or Content Editor sidebar when you add it to a data file or the front matter of a markup file.

event_opens: 12:00 pm

Options#

You can configure Date and Time inputs using the options key under your input key, inside of _inputs.

_inputs:
  event_datetime:
    type: datetime
    options:
      timezone: America/New_York
      empty_type: 

{
  "_inputs": {
    "event_datetime": {
      "type": "datetime",
      "options": {
        "timezone": "America/New_York",
        "empty_type": null
      }
    }
  }
}

module.exports = {
  _inputs: {
    event_datetime: {
      type: "datetime",
      options: {
        timezone: "America/New_York",
        empty_type: null
      }
    }
  }
};

Date and Time inputs have the following options available:

Unconfigured Date and Time inputs#

In some cases, CloudCannon can still detect a Date or Time input even if you have not configured it.

CloudCannon will interpret any unconfigured input with the key name:

• datetime or at, or that ends in _datetime or _at, as a Datetime input.
• date, or that ends in _date, as a Date input.
• time, or that ends in _time, as a Time input.

---
at: 2024-07-16T12:00:00Z
---

Content goes here.

This behavior is convenient if you have simple inputs or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.

Valid values#

Here are some examples of valid values for the keys datetime and time. All datetime values also work for Date inputs.