Add date picker component via extension to DateField, with relevant t…

…emplates Ref #89

src/Extensions/DateFieldExtension.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace NSWDPC\Waratah\Extensions;
+
+use SilverStripe\Core\Extension;
+use SilverStripe\Forms\FormField;
+use SilverStripe\Forms\ListboxField;
+
+/**
+ * Extension applies the NSW Design System date input template.
+ *
+ * Browser default
+ * =====================
+ * The native browser date picker is preferred. To enable this in your project,
+ * add the following YAML config to your app/_config/extensions.yml:
+ *
+ * Silverstripe\Forms\DateField:
+ *   extensions:
+ *     - NSWDPC\Waratah\Extensions\DateFieldExtension
+ *
+ * Attributes
+ * =====================
+ * Max/min and non-selectable dates can be added via the standard setAttribute() method:
+ *
+ * $field->setAttribute('data-min-date','31/12/2020')
+ * $field->setAttribute('data-min-date','31/12/2022')
+ * $field->setAttribute('data-dates-disabled','20/01/2022 01/04/2021')
+ *
+ * This extension does not (yet) implement the picker on the DateCompositeField from the
+ * nswdpc/silverstripe-datetime-inputs module
+ */
+class DateFieldExtension extends Extension
+{
+
+    /**
+     * Update the available attributes for the input
+     */
+    public function updateAttributes(&$attributes) {
+        $attributes['autocomplete'] = 'off';
+        $attributes['type'] = 'text';// component blocks native browser type
+        if(!isset($attributes['class'])) {
+            $attributes['class'] = '';
+        }
+        $attributes['class'] .= ' nsw-form__input js-date-input__text';
+        $attributes['class'] = trim($attributes['class']);
+    }
+
+    /**
+     * Update render templates
+     */
+    public function onBeforeRenderHolder($context, $properties) {
+        $this->owner->setInputType('text');
+        $this->owner->setTemplate('NSWDPC/Waratah/Forms/DateField');
+        $this->owner->setFieldHolderTemplate('NSWDPC/Waratah/Forms/DateField_holder');
+    }
+
+}

themes/nswds/templates/NSWDPC/Waratah/Forms/DateField.ss

@@ -0,0 +1,55 @@
+<div class="nsw-date-input__wrapper nsw-form__input-group nsw-form__input-group--icon">
+  <input {$AttributesHTML}>
+
+  <button class="nsw-button nsw-button--dark nsw-button--flex js-date-input__trigger" aria-label="<%t wrth.SELECT_DATE_USING_PICKER 'Select date using calendar widget' %>" type="button">
+    <% include nswds/Icon Icon_Icon='calendar_today' %>
+  </button>
+</div>
+
+<div class="nsw-date-picker js-date-picker" role="dialog" aria-labelledby="calendar-label-{$ID}">
+  <header class="nsw-date-picker__header">
+    <div class="nsw-date-picker__title">
+      <span class="nsw-date-picker__title-label js-date-picker__title-label" id="calendar-label-{$ID}"></span>
+
+      <nav>
+        <ul class="nsw-date-picker__title-nav js-date-picker__title-nav">
+          <li>
+            <button class="nsw-icon-button nsw-date-picker__title-nav-btn js-date-picker__year-nav-btn js-date-picker__year-nav-btn--prev" type="button">
+              <% include nswds/Icon Icon_Icon='keyboard_double_arrow_left' %>
+            </button>
+            <button class="nsw-icon-button nsw-date-picker__title-nav-btn js-date-picker__month-nav-btn js-date-picker__month-nav-btn--prev" type="button">
+              <% include nswds/Icon Icon_Icon='chevron_left' %>
+            </button>
+          </li>
+
+          <li>
+            <button class="nsw-icon-button nsw-date-picker__title-nav-btn js-date-picker__month-nav-btn js-date-picker__month-nav-btn--next" type="button">
+               <% include nswds/Icon Icon_Icon='chevron_right' %>
+            </button>
+            <button class="nsw-icon-button nsw-date-picker__title-nav-btn js-date-picker__year-nav-btn js-date-picker__year-nav-btn--next" type="button">
+              <% include nswds/Icon Icon_Icon='keyboard_double_arrow_right' %>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <ol class="nsw-date-picker__week">
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_MONDAY_START 'M' %><span class="sr-only"><%t wrth.DAY_MONDAY_END 'onday' %></span></div></li>
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_TUESDAY_START 'T' %><span class="sr-only"><%t wrth.DAY_TUESDAY_END 'uesday' %></span></div></li>
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_WEDNESDAY_START 'W' %><span class="sr-only"><%t wrth.DAY_WEDNESDAY_END 'ednesday' %></span></div></li>
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_THURSDAY_START 'T' %><span class="sr-only"><%t wrth.DAY_THURSDAY_END 'hursday' %></span></div></li>
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_FRIDAY_START 'F' %><span class="sr-only"><%t wrth.DAY_FRIDAY_END 'riday' %></span></div></li>
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_SATURDAY_START 'S' %><span class="sr-only"><%t wrth.DAY_SATURDAY_END 'aturday' %></span></div></li>
+      <li><div class="nsw-date-picker__day"><%t wrth.DAY_SUNDAY_START 'S' %><span class="sr-only"><%t wrth.DAY_SUNDAY_END 'unday' %></span></div></li>
+    </ol>
+  </header>
+
+  <ol class="nsw-date-picker__dates js-date-picker__dates" aria-labelledby="calendar-label-{$ID}">
+  </ol>
+
+  <div class="nsw-date-picker__buttongroup">
+    <button type="button" class="nsw-button nsw-button--dark-outline-solid js-date-picker__close" value="cancel"><%t wrth.CANCEL 'Cancel' %></button>
+    <button type="button" class="nsw-button nsw-button--dark js-date-picker__accept" value="ok"><%t wrth.OK 'OK' %></button>
+  </div>
+</div>

themes/nswds/templates/NSWDPC/Waratah/Forms/DateField_holder.ss

@@ -0,0 +1,19 @@
+<div id="$HolderID" class="nsw-form__group<% if $ParentExtraClass %> {$ParentExtraClass}<%end_if %>">
+
+    <div class="nsw-date-input js-date-input">
+
+        <% if $Title %><label class="nsw-form__label left<% if $Required %> nsw-form__required<% end_if %>" for="{$ID}">{$Title}</label><% end_if %>
+
+        <% include NSWDPC/Waratah/Forms/Description %>
+
+        <div class="field">
+        {$Field}
+        </div>
+
+        <% include nswds/FormFieldMessage FormFieldMessage_IsCompact=1, FormFieldMessage_Message=$Message, FormFieldMessage_MessageType=$MessageType, FormFieldMessage_MessageCast=$MessageCast %>
+
+        <% include NSWDPC/Waratah/Forms/RightTitle %>
+
+    </div>
+
+</div>

themes/nswds/templates/nswds/Includes/DatePicker.ss

@@ -0,0 +1 @@
+<%-- this component is implemented via the DateFieldExtension extension to DateField --%>