The New Date Field

on June 7th, 2019

This week Statamic 3's date fieldtype has received a delightful upgrade, not in small part thanks to Nathan Reyes' fantastic Vue compoment, vCalendar.

New UI

First, let's look at the brand new and beautiful UI. It really couldn't be simpler to switch between months and years to jump to the date you need. You can also edit the date directly in the text area and the picker will follow along with you.

Statamic 3 Date Fieldtype Interaction


The date fieldtype will automatically adapt to your site's locale (set in config/app.php), and display the date in the localized format and language.

German (de)

Statamic 3 Date Fieldtype in German

Arabic (ar)

Statamic 3 Date Fieldtype in Arabic

English - Great Britain (en-GB)

Statamic 3 Date Fieldtype in Arabic

Inline Mode

We also have a new "Inline" mode if you want to only use the calendar view.

Statamic 3 Date Fieldtype Inline Mode

Rows and Columns

Don't like clicking and have some room to spare? You can set the number of rows and columns of months you'd like to fill out the screen. If you run out of room, it'll automatically collapse down to less.

Statamic 3 Date Fieldtype Rows and Columns

Date Ranges

You can now even set date ranges with the date fieldtype. No more need for a date field inside a grid just to set a start and end date.

Statamic 3 Date Fieldtype Range

And here's how that data is stored, in case you were curious.

  start: 2019-07-08
  end: 2019-07-12

And there you have it. Have a great weekend! 🌴️☀️

Jack McDade
Jack McDade, Creator of Statamic
Creator of Statamic

Copyright 2020 Statamic