Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Just exceptional. Thank you so much, Jack, you smashed it.

— Hugo, Developer

Date Fieldtype

Work with dates, times, and ranges with a variety of user interface options that make you really enjoy basically just picking numbers from a table.

Date Fieldtype UI
The Date Fieldtype in action!

Overview

Date fields have highly configurable user interfaces. They can be as simple as a single date and/or time, or as fancy as a multi-month calendar with multi-day range picking. Be sure to experiment with the various config options to create the best experience for your content authors.

Data Structure

Single dates are stored as a date/timestring. Ranges are stored as an array with a start and end key.

date: 1983-10-01
date_with_time: 1983-10-01 12:00:00
date_range:
start: 2019-11-18
end: 2019-11-22

Templating

Date fields are augmented to return a Carbon instance. When used as a string they will return a pre-formatting output that uses your config.date format setting. By default that'll look like January 1, 2020.

Date Ranges

Ranges have nested start and end variables, so you can access them like this:

// Nested variable
Event: {{ date:start }} through {{ date:end }}
 
// Tag pair
{{ date }}
Event: {{ start }} through {{ end }}
{{ /date }}
Date fieldtype in range mode
Ranges are much simpler than two date fields.

Formatting Dates

You can format the output of your date fields with the format modifier and PHP's date formatting options.

{{ date format="Y" }} // 2019
{{ date format="Y-m-d" }} // 2019-10-10
{{ date format="l, F jS" }} // Sunday, January 21st

Formatting localized Dates

You can format localized dates with the iso modifier and ISO formatting options. This use Carbon's inner translations rather than language packages you need to install on every machine where you deploy your application.

{{ date iso_format="YYYY" }} // 2019
{{ date iso_format="YYYY-MM-DD" }} // 2019-10-10
{{ date iso_format="dddd, MMMM Do" }} // Sunday, January 21st

Options

columns

integer

Show multiple months at one time, in columns and rows. Default: 1.

earliest_date

string

Set the earliest selectable date in YYYY-MM-DD format. Default: 1900-01-01.

format

string

How the date should be stored, using the PHP date format

full_width

boolean

Enable to stretch the calendar out like Stretch Armstrong, using the maximum amount of available horizontal space. Default: false.

inline

boolean

Always show the calendar instead of the text input and dropdown UI. Default: false.

mode

string

Choose between single or range. Range mode disables the time picker. Default: single.

rows

integer

Show multiple months at one time, in columns and rows. Default: 1.

time_enabled

boolean

Enable/disable the timepicker. Default: false.

Date fieldtype with time enabled
Now you can pick a time, too!

time_required

boolean

Makes the time field visible and non-dismissible. Default: false.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →