Configure a Date or Time input

Date and Time inputs are editing interfaces for date and time values. By configuring your inputs, you can customize the appearance and functionality for a better editing experience.

These instructions assume that you know what type of Date or Time input you want to configure and where in the configuration cascade. For more information, please read our documentation on Date and Time inputs, inputs in general, and the configuration cascade.

To configure a Date or Time input:

1. Open your website files in your local development environment, or log in to CloudCannon and select the Site for which you want to configure your input.
2. Navigate to the location in the configuration cascade where you want to configure your input. This can be the root of your CloudCannon Configuration File, within the collections_config.* key in your CloudCannon Configuration File, a Schema file, a markup file, or any where you configure a Structure.
3. Identify the _inputs key, or create one at that level of the configuration cascade.
4. Add an input name key for your input under the _inputs key (a.k.a., _inputs.*). We recommend naming your input something simple that indicates the function or context.
5. Add the type key under your input name key, with the value datetime, date, or time.
6. (Optional.) Add any other general configuration keys (e.g., label, comment, context) under your input name key.
7. (Optional.) Add any specific configuration keys under _inputs.*.options (e.g., timezone, start_from, end_before).

CloudCannon will now apply this input configuration to all markup files that use your input name key, without needing to save your configuration. This allows you to make changes to your input configuration and see those changes affect inputs live.

When you are happy with your input configuration, you must save your input configuration.

_inputs:
  published:
    type: datetime
  due:
    type: date
  event_opens:
    type: time

{
  "_inputs": {
    "published": {
      "type": "datetime"
    },
    "due": {
      "type": "date"
    },
    "event_opens": {
      "type": "time"
    }
  }
}

When you add your input key name to a data or markup file, your configured Date or Time input will appear in the Data Editor, Visual Editor, or Content Editor.

published: 2024-07-16T12:00:00Z
due: 2024-07-16T00:00:00Z
event_opens: 12:00 pm

Input configuration options#

General configuration options are available for all input types. You can define the label, comment, and context box for your Date and Time input, whether it is hidden or disabled, and how CloudCannon should handle configuration at multiple levels of the configuration cascade.

Specific configuration options for Date and Time inputs include defining the timezone and how CloudCannon handles empty values. You can also add input validation to require a value, or specify a valid date range.

Here is an example of a Datetime input using some of the most commonly used configuration keys.

_inputs:
  event_datetime:
    type: datetime
    label: Event Date and Time
    comment: Select when the event will occur
    options:
      timezone: America/New_York
      required: true
      start_from: 2024-01-01T00:00:00.000Z
      end_before: 2025-01-01T00:00:00.000Z

{
  "_inputs": {
    "event_datetime": {
      "type": "datetime",
      "label": "Event Date and Time",
      "comment": "Select when the event will occur",
      "options": {
        "timezone": "America/New_York",
        "required": true,
        "start_from": "2024-01-01T00:00:00.000Z",
        "end_before": "2025-01-01T00:00:00.000Z"
      }
    }
  }
}

These keys configure the appearance and functionality of Date and Time inputs in CloudCannon.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

{
  "_inputs": {
    "author": {
      "type": "text",
      "comment": "Enter the name of the author for this blog post.",
      "options": {
        "required": true
      }
    }
  }
}

_inputs:
  2022_event:
    type: datetime
    options:
      start_from: 2022-01-01T00:00:00.000Z
      end_before: 2023-01-01T00:00:00.000Z

{
  "_inputs": {
    "2022_event": {
      "type": "datetime",
      "options": {
        "start_from": "2022-01-01T00:00:00.000Z",
        "end_before": "2023-01-01T00:00:00.000Z"
      }
    }
  }
}

_inputs:
  2022_event:
    type: datetime
    options:
      start_from: 2022-01-01T00:00:00.000Z
      end_before: 2023-01-01T00:00:00.000Z

{
  "_inputs": {
    "2022_event": {
      "type": "datetime",
      "options": {
        "start_from": "2022-01-01T00:00:00.000Z",
        "end_before": "2023-01-01T00:00:00.000Z"
      }
    }
  }
}

Valid values#

Here are some examples of valid values for Date and Time inputs.

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.