Using Date and Time Inputs to edit your data

Last modified: May 24th, 2023

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

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

These inputs are for editing date and time values in your data.

If timezone is set in your global configuration, date values are saved with the matching offset suffix. If unset, date values are saved without an offset suffix in UTC.

For Jekyll sites, date values are saved in the Jekyll-expected format (e.g. 2021-01-09 00:00:00) rather than standard ISO 8601.

Datetime#

Combination date picker and 12-hour time input.

Datetime inputs are shown for inputs configured with the type datetime, for date input values, or for input keys matching:

  • date
  • datetime
  • *_datetime
  • at
  • *_at
Screenshot of datetime input field unfocused
Screenshot of datetime input field with date picker open

 

Naming convention
copied
date: 2020-07-15T12:00:00.000Z
Naming convention
copied
{
  "date": "2020-07-15T12:00:00.000Z"
}
Naming convention
copied
date = 2020-07-15T12:00:00.000Z
Input configuration
copied
when: 2020-07-15T12:00:00.000Z
_inputs:
  when:
    type: datetime
Input configuration
copied
{
  "when": "2020-07-15T12:00:00.000Z",
  "_inputs": {
    "when": {
      "type": "datetime"
    }
  }
}
Input configuration
copied
when = 2020-07-15T12:00:00.000Z

[_inputs.when]
type = "datetime"

Date#

Date picker input for date values with year, month, and day.

Date inputs are shown for inputs configured with the type date, or for inputs keys matching:

  • *_date
Screenshot of date input field unfocused
Screenshot of date input field focused
Naming convention
copied
sale_start_date: 2021-01-09T00:00:00.000Z
Naming convention
copied
{
  "sale_start_date": "2021-01-09T00:00:00.000Z"
}
Naming convention
copied
sale_start_date = 2021-01-09T00:00:00.000Z
Input configuration
copied
due_by: 2021-01-09T00:00:00.000Z
_inputs:
  due_by:
    type: date
Input configuration
copied
{
  "due_by": "2021-01-09T00:00:00.000Z",
  "_inputs": {
    "due_by": {
      "type": "date"
    }
  }
}
Input configuration
copied
due_by = 2021-01-09T00:00:00.000Z

[_inputs.due_by]
type = "date"

The time value is always added for Date inputs as 00:00:00 for consistency with Datetime inputs.

Time#

Single line 12-hour time input for strings of time values.

Time inputs are shown for inputs configured with the type time, or for input keys matching:

  • time
  • *_time
Screenshot of time input field

The editing interface shown here is dependent on your browser and device. CloudCannon uses the default interface from your browser for time inputs.

Naming convention
copied
opening_time: 8:00 am
Naming convention
copied
{
  "opening_time": "8:00 am"
}
Naming convention
copied
opening_time = "8:00 am"
Input configuration
copied
doors_open: 8:00 am
_inputs:
  doors_open:
    type: time
Input configuration
copied
{
  "doors_open": "8:00 am",
  "_inputs": {
    "doors_open": {
      "type": "time"
    }
  }
}
Input configuration
copied
doors_open = "8:00 am"

[_inputs.doors_open]
type = "time"

Options#

Date, Datetime and Time input options are configured with options inside an _inputs entry.

timezone - String#

Specifies the time zone that dates are displayed and edited in. Also changes the suffix the date is persisted to the file with. Must be in the tz database name format (e.g. Pacific/Auckland or America/New_York). Defaults to the timezone configured in your global configuration file, which defaults to Etc/UTC.

Available on Date and Datetime inputs, has no effect on Time inputs.

empty_type - string#

Set how an ‘empty’ value will be saved. Does not apply to existing empty values. Can 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.

Valid values#

Documented below are the valid formats for date, datetime, and time inputs.

The lists of examples are non-exhaustive.

  • Date, time, and datetime inputs surrounded by quotation marks will be automatically unquoted when loaded into the Data Editor.

  • 24hr times will be converted to 12hr times when loaded into the Data Editor.

Date and Datetime

Empty/null value:

  • datetime:

Empty string:

  • datetime: ""
  • datetime: ''

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"

Empty string:

  • datetime = ""
  • datetime = ''

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

Null value:

  • "datetime": null

Empty string:

  • "datetime": ""

ISO 8601 formatted datetime:

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

Time

Empty/null value:

  • time:

Empty string:

  • time: ""
  • time: ''

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:

  • time = ""
  • time = ''

12hr time:

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

24hr time:

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

Null value:

  • "time": null

Empty string:

  • "time": ""

12hr time:

  • "time": "1:23 pm"

24hr time:

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

Related links

Open in a new tab