SilverStripe 4 Date Entry in the CMS - showing a calendar? How?

<%- if @topic_view.topic.tags.present? %>
<%= t 'js.tagging.tags' %>: <%- @topic_view.topic.tags.each do |t| %> <%= t %> <%- end %>
<% end %>

How do you make the CMS Admin display a handy calendar for Date entry with SS4.2.1?

I’ve upgraded a section of a site from SS3 to SS4 and I’ve failed so far to figure out how to get the calendar to display. I’ve formatted the Date how my users would like it just fine.

I read all the GitHub discussion about this and it seemed that things were added in some SS4 releases and were then changed and removed in later versions.

What’s the trick please?

$dateField = new DateField(‘FromDate’);
//$dateField->setConfig(‘showcalendar’, true); // SS3 way - removed in SS4
//$dateField->setShowCalendar(true); // seemed to be in the discussion but removed
$dateField->setHTML5(false); // tried true and it didn’t do it either
$dateField->setDateFormat(‘dd/MM/yyyy’);
$dateField->setAttribute(‘placeholder’, $dateField->getDateFormat());
$fields->addFieldToTab(‘Root.Main’, $dateField);

1 Like

Silverstripe 4 changed to using a native HTML datepicker… unfortunately, a number of browsers don’t actually render one when asked!

You can use something like this: GitHub - praxisnetau/silverware-datepicker: SilverWare Datepicker Module to add in support.

Thanks for the module recommend.

Just looked up the HTML5 Date field fiasco. Been going on for years as well. Such a shame they can’t all agree and use the spec and build it in to save using external libs.

When I turned HTML5 date on Chrome does one (it’s not an obvious UI) and uses the date format I wanted by default. But that messes up Safari which doesn’t have a Date UI or show the right format in the field anymore.

It’s a shame SS4 didn’t include a new CalendarJS or continue with the old one SilverStripe already had? It had an on/off.

Ah well. Thought I’d just missed something simple in the documentation.

Just one note about the module I linked: At the time of writing, it doesn’t support the SS4 public directory structure out of the box. There’s a PR waiting to be merged which adds this support. If you’re in a hurry, you can fork the module and use a modified version until the official one is updated.

1 Like

Silver Stripe 4 By default provide a calendar for the date field. Please try with below code snippets.

SS4 comes with default dd/mm/yyyy date format.

use SilverStripe\Forms\DateField;
public function getCMSFields() {
    $fields->addFieldToTab('Root.Main',new DateField('Date','Date'));
    return $fields;
}

Hope this helps you.

Thanks!

The PR was just merged, so that module should be good for the public dir now :slight_smile:

2 Likes

Hello @guci0 welcome to the forum. As @DorsetDigital all ready said SS4 is using the native HTML datepicker.

If your browser supports it then you will get one if you use an input of the type date. E.g. Firefox and Chrome support the native html date picker.

If you need one for safari you can either use the module dorset suggested or you need some thing like a jQuery Datepicker.

In Safari (Mac) – Datapicker won’t work. //Silverware-datepicker – also won’t work fine, it’s magic with saving(); and displays dates.