Date and Time inputs

Last modified: October 3rd, 2024

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.

A screenshot of the Datetime input in the Data Editor, showing a calendar for date 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.

cloudcannon.config.yaml
copied
_inputs:
  published:
    type: datetime

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Datetime input is called published.

The value of the type key determines the input type. This is a datetime input.

cloudcannon.config.json
copied
{
  "_inputs": {
    "published": {
      "type": "datetime"
    }
  }
}

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Datetime input is called published.

The value of the type key determines the input type. This is a datetime input.

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.

blog.md
copied
---
published: 2024-07-16T12:00:00Z
---

Blog content goes here.

Date#

The Date input provides an editing interface for date values.

A screenshot of the Date input in the Data Editor, showing a calendar 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.

cloudcannon.config.yaml
copied
_inputs:
  due:
    type: date

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Date input is called due.

The value of the type key determines the input type. This is a date input.

cloudcannon.config.json
copied
{
  "_inputs": {
    "due": {
      "type": "date"
    }
  }
}

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Date input is called due.

The value of the type key determines the input type. This is a date input.

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.

blog.md
copied
---
due: 2024-07-16T00:00:00Z
---

Blog content goes here.

Even though the input does not display the time, CloudCannon will automatically add 00:00:00 to the end of Date values, separated by a "T" character. This is for consistency with Datetime inputs, and to store timezone information necessary for determining the current date.

Time#

The Time input provides an editing interface for time values.

A screenshot of the Time input in the Data Editor.

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.

cloudcannon.config.yaml
copied
_inputs:
  event_opens:
    type: time

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Time input is called event_opens.

The value of the type key determines the input type. This is a time input.

cloudcannon.config.json
copied
{
  "_inputs": {
    "event_opens": {
      "type": "time"
    }
  }
}

All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.

This Time input is called event_opens.

The value of the type key determines the input type. This is a time input.

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.

data.yml
copied
event_opens: 12:00 pm

There may be some minor differences in input behavior depending on your browser and device.

Options#

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

cloudcannon.config.yaml
copied
_inputs:
  event_datetime:
    type: datetime
    options:
      timezone: America/New_York
      empty_type: 
cloudcannon.config.json
copied
{
  "_inputs": {
    "event_datetime": {
      "type": "datetime",
      "options": {
        "timezone": "America/New_York",
        "empty_type": null
      }
    }
  }
}

Date and Time inputs have the following options available:

timezone — String#

This key determines which timezone to use when displaying and editing dates. This will also change the suffix of the date value. Defaults to the timezone configured in your configuration file, which defaults to Etc/UTC.

Values must be in tz database name format (e.g. Pacific/Auckland or America/New_York).

Available for Datetime and Date inputs only.

empty_type — string#

This key determines how CloudCannon handles an empty value. This key does not apply to existing empty values.

Value must be one of the following:

  • string - an empty value for this input will be stored as "".
  • null - an empty value for this input will be stored as a null value (default). This does not apply to TOML files.

A common use of Date and Time inputs is recording the time when you create a new file. To record the date and time of file creation (i.e., TODAY), add instance_value: NOW under your input key name.

For more information about the instance_value key, please read our documentation on general configuration options.

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.
about.md
copied
---
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.

We recommend configuring your inputs for greater control over their functionality and appearance.

Valid values#

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

Empty/null value:

  • datetime:
  • time:

Empty string:

  • datetime: ""
  • datetime: ''
  • time: ""
  • time: ''

ISO 8601 formatted datetime (quoted or unquoted):

  • datetime: 2020-07-15T12:00:00Z
  • datetime: '2020-07-15T12:00:00Z'
  • datetime: "2020-07-15T12:00:00Z"

12hr time (quoted or unquoted):

  • time: 1:23 pm
  • time: '1:23 pm'
  • time: "1:23 pm"

24hr time (quoted or unquoted):

  • time: 13:23:00
  • time: '13:23:00'
  • time: "13:23:00"

Empty string:

  • datetime = ""
  • datetime = ''
  • time = ""
  • time = ''

ISO 8601 formatted datetime (quoted or unquoted):

  • datetime = 2020-07-15T12:00:00Z
  • datetime = "2020-07-15T12:00:00Z"
  • datetime = '2020-07-15T12:00:00Z'

ISO 8601 formatted datetime with space instead of T (quoted or unquoted):

  • datetime = 2020-07-15 12:00:00Z
  • datetime = "2020-07-15 12:00:00Z"

The space will be converted to a T when loaded into the Data Editor.

12hr time:

  • time = "1:23 pm"
  • time = '1:23 pm'

24hr time:

  • time = "13:23:00"
  • time = '13:23:00'

Null value:

  • "datetime": null
  • "time": null

Empty string:

  • "datetime": ""
  • "time": ""

ISO 8601 formatted datetime:

  • "datetime": "2020-07-15T12:00:00Z"

12hr time:

  • "time": "1:23 pm"

24hr time:

  • "time": "13:23:00"

CloudCannon may alter your input value under the following circumstances:

  • When loaded in the Data Editor, date, time, and datetime inputs surrounded by quotation marks will be automatically unquoted.
  • When loaded in the Data Editor, 24hr times will be converted to 12hr times.

Open in a new tab