[Require #628] Allow datepicker format in publication dates

dist/assets/admin/twill-manifest.json

@@ -11,20 +11,20 @@
   "Inter-MediumItalic.woff2": "/assets/admin/fonts/Inter-MediumItalic.7a7fd735.woff2",
   "Inter-Regular.woff": "/assets/admin/fonts/Inter-Regular.aebfbb3c.woff",
   "Inter-Regular.woff2": "/assets/admin/fonts/Inter-Regular.bffaed79.woff2",
-  "chunk-common.css": "/assets/admin/css/chunk-common.12135879.css",
-  "chunk-common.js": "/assets/admin/js/chunk-common.000dd611.js",
-  "chunk-vendors.css": "/assets/admin/css/chunk-vendors.e0f3ef32.css",
+  "chunk-common.css": "/assets/admin/css/chunk-common.354187e5.css",
+  "chunk-common.js": "/assets/admin/js/chunk-common.9e15dc30.js",
+  "chunk-vendors.css": "/assets/admin/css/chunk-vendors.320d4d86.css",
   "chunk-vendors.js": "/assets/admin/js/chunk-vendors.ceaa7d19.js",
   "icons-files.svg": "/assets/admin/icons/icons-files.3cdbddfb2725088d.svg",
   "icons-wysiwyg.svg": "/assets/admin/icons/icons-wysiwyg.63f0e2d625dc615e.svg",
   "icons.svg": "/assets/admin/icons/icons.2ee8758aafe79e18.svg",
   "main-buckets.css": "/assets/admin/css/main-buckets.9db8fb96.css",
-  "main-buckets.js": "/assets/admin/js/main-buckets.b281d4f0.js",
-  "main-dashboard.css": "/assets/admin/css/main-dashboard.0414eb69.css",
-  "main-dashboard.js": "/assets/admin/js/main-dashboard.eb8b81dd.js",
-  "main-form.css": "/assets/admin/css/main-form.7c11184a.css",
-  "main-form.js": "/assets/admin/js/main-form.771f10cf.js",
+  "main-buckets.js": "/assets/admin/js/main-buckets.524bdf2f.js",
+  "main-dashboard.css": "/assets/admin/css/main-dashboard.30d9b9b0.css",
+  "main-dashboard.js": "/assets/admin/js/main-dashboard.5e532505.js",
+  "main-form.css": "/assets/admin/css/main-form.d1690cef.css",
+  "main-form.js": "/assets/admin/js/main-form.0158d672.js",
   "main-free.js": "/assets/admin/js/main-free.efda4e65.js",
-  "main-listing.css": "/assets/admin/css/main-listing.fa4de685.css",
-  "main-listing.js": "/assets/admin/js/main-listing.1a81c8e5.js"
+  "main-listing.css": "/assets/admin/css/main-listing.7b40e0a4.css",
+  "main-listing.js": "/assets/admin/js/main-listing.ba0e5e3c.js"
 }

docs/.sections/form-fields.md

@@ -369,6 +369,8 @@ No migration is needed to save `files` form fields.
 | minDate     | Minimum selectable date                                      | string          |               |
 | maxDate     | Maximum selectable date                                      | string          |               |
 | withTime    | Define if the field will display the time selector           | true<br/>false  | true          |
+| time24Hr    | Pick time with a 24h picker instead of AM/PM                 | true<br/>false  | false         |
+| altFormat   | Format used by flatPickr                                     | string          | F j, Y        |
 | note        | Hint message displayed above the field                       | string          |               |
 | required    | Displays an indicator that this field is required<br/>A backend validation rule is required to prevent users from saving | true<br/>false  | false         |
 

docs/.sections/getting-started/configuration.md

@@ -158,6 +158,20 @@ return [
 ];
 ```
 
+**Time format configuration**
+
+To change the format of the publication field when setting `publish_start_date` and `publish_end_date` on your Model you can change these keys in `twill.php`.
+
+```php
+<?php
+
+return [
+    'publish_date_format' => 'd F Y H:i', // Format used by Flatpick
+    'publish_date_24h' => true, // Enable the 24h format
+    'publish_date_format_fns' => 'DD MMMM YYYY HH:mm', // Format used by date-fns
+];
+```
+
 **Multiple subdomains CMS routing**
 
 ```php

frontend/js/components/DatePicker.vue

@@ -49,6 +49,10 @@
         type: Boolean,
         default: false
       },
+      altFormat: {
+        type: String,
+        default: null
+      },
       inline: {
         type: Boolean,
         default: false
@@ -102,6 +106,12 @@
     computed: {
       uniqId: function (value) {
         return this.name + '-' + this.randKey
+      },
+      altFormatComputed: function () {
+        if (this.altFormat !== null) {
+          return this.altFormat
+        }
+        return 'F j, Y' + (this.enableTime ? (this.time_24hr ? ' H:i' : ' h:i K') : '')
       }
     },
     methods: {
@@ -110,6 +120,7 @@
         return {
           wrap: true,
           altInput: true,
+          altFormat: self.altFormatComputed,
           static: self.staticMode,
           appendTo: self.staticMode ? self.$refs[self.refs.flatPicker] : undefined,
           enableTime: self.enableTime,

frontend/js/components/PubAccordion.vue

@@ -3,15 +3,15 @@
     <span slot="accordion__title"><slot></slot></span>
     <div slot="accordion__value">
       <template v-if="startDate">
-        {{ startDate | formatCalendarDate }}
+        {{ startDate | formatDateWithFormat(dateFormatFns) }}
       </template>
       <template v-else>
         {{ defaultStartDate }}
       </template>
     </div>
     <div class="accordion__fields">
-      <a17-datepicker name="publish_date" place-holder="Start Date" :initialValue="startDate" :maxDate="endDate" :enableTime="true" :allowInput="true" :staticMode="true" @open="openStartCalendar" @close="closeCalendar" @input="updateStartDate" :clear="true"></a17-datepicker>
-      <a17-datepicker name="end_date" place-holder="End Date" :initialValue="endDate" :minDate="startDate" :enableTime="true" :allowInput="true" :staticMode="true" @open="openEndCalendar" @close="closeCalendar" @input="updateEndDate" :clear="true"></a17-datepicker>
+      <a17-datepicker name="publish_date" place-holder="Start Date" :time_24hr="date_24h" :altFormat="dateFormat" :initialValue="startDate" :maxDate="endDate" :enableTime="true" :allowInput="true" :staticMode="true" @open="openStartCalendar" @close="closeCalendar" @input="updateStartDate" :clear="true"></a17-datepicker>
+      <a17-datepicker name="end_date" place-holder="End Date" :time_24hr="date_24h" :altFormat="dateFormat" :initialValue="endDate" :minDate="startDate" :enableTime="true" :allowInput="true" :staticMode="true" @open="openEndCalendar" @close="closeCalendar" @input="updateEndDate" :clear="true"></a17-datepicker>
     </div>
   </a17-accordion>
 </template>
@@ -38,6 +38,18 @@
       defaultEndDate: {
         type: String,
         default: ''
+      },
+      dateFormatFns: {
+        type: String,
+        default: 'MMM, DD, YYYY, hh:mm A'
+      },
+      dateFormat: {
+        type: String,
+        default: null
+      },
+      date_24h: {
+        type: Boolean,
+        default: false
       }
     },
     filters: a17VueFilters,

frontend/js/components/Publisher.vue

@@ -5,7 +5,7 @@
       <a17-reviewaccordion  v-if="reviewProcess && reviewProcess.length" :options="reviewProcess" name="review_process" :value="reviewProcessCompleteValues" :open="openStates['A17Reviewaccordion']" @open="openCloseAccordion">Review status</a17-reviewaccordion>
       <a17-radioaccordion  v-if="visibility && visibilityOptions && visibilityOptions.length" :radios="visibilityOptions" name="visibility" :value="visibility" :open="openStates['A17Radioaccordion']" @open="openCloseAccordion" @change="updateVisibility">Visibility</a17-radioaccordion>
       <a17-checkboxaccordion  v-if="languages && showLanguages&& languages.length > 1" :options="languages" name="active_languages" :value="publishedLanguagesValues" :open="openStates['A17Checkboxaccordion']" @open="openCloseAccordion">Languages</a17-checkboxaccordion>
-      <a17-pubaccordion :open="openStates['A17Pubaccordion']" @open="openCloseAccordion" v-if="withPublicationTimeframe">Published on</a17-pubaccordion>
+      <a17-pubaccordion :date-format-fns="dateFormatFns" :date-format="dateFormat" :date_24h="date_24h" :open="openStates['A17Pubaccordion']" @open="openCloseAccordion" v-if="withPublicationTimeframe">Published on</a17-pubaccordion>
       <a17-revaccordion v-if="revisions.length" :open="openStates['A17Revisions']" @open="openCloseAccordion" :revisions="revisions">Revisions</a17-revaccordion>
       <a17-parentaccordion v-if="parents.length" :open="openStates['A17Parents']" @open="openCloseAccordion" :parents="parents" :value="parentId">Parent page</a17-parentaccordion>
       <div class="publisher__item" v-if="revisions.length">
@@ -52,6 +52,18 @@
       showLanguages: {
         type: Boolean,
         default: true
+      },
+      dateFormat: {
+        type: String,
+        default: null
+      },
+      dateFormatFns: {
+        type: String,
+        default: 'MMM, DD, YYYY, hh:mm A'
+      },
+      date_24h: {
+        type: Boolean,
+        default: false
       }
     },
     data: function () {

frontend/js/utils/filters.js

@@ -36,6 +36,11 @@ const filters = {
 
     return dateFormat(value, 'MMM, DD, YYYY, hh:mm A')
   },
+  formatDateWithFormat: function (value, format) {
+    if (!value) return ''
+
+    return dateFormat(value, format)
+  },
   formatDatatableDate: function (value) {
     const datepickerFormat = 'MMM DD, YYYY'
     if (!value) value = new Date()

src/Http/Controllers/Admin/ModuleController.php

@@ -1360,6 +1360,9 @@ protected function form($id, $item = null)
             'routePrefix' => $this->routePrefix,
             'titleFormKey' => $this->titleFormKey ?? $this->titleColumnKey,
             'publish' => $item->canPublish ?? true,
+            'publish24Hr' => Config::get('twill.publish_date_24h') ?? false,
+            'publishFormat' => Config::get('twill.publish_date_format') ?? null,
+            'publishFormatFns' => Config::get('twill.publish_date_format_fns') ?? null,
             'translate' => $this->moduleHas('translations'),
             'permalink' => $this->getIndexOption('permalink'),
             'form_fields' => $this->repository->getFormFields($item),

views/layouts/form.blade.php

@@ -67,7 +67,7 @@
                 <div class="wrapper wrapper--reverse" v-sticky data-sticky-id="publisher" data-sticky-offset="80">
                     <aside class="col col--aside">
                         <div class="publisher" data-sticky-target="publisher">
-                            <a17-publisher :show-languages="{{ json_encode($controlLanguagesPublication) }}">
+                            <a17-publisher :date_24h="{{ !empty($publish24Hr) ? 'true' : 'false' }}" {!! !empty($publishFormatFns) ? "date-format-fns='{$publishFormatFns}'" : '' !!} {!! !empty($publishFormat) ? "date-format='{$publishFormat}'" : '' !!} :show-languages="{{ json_encode($controlLanguagesPublication) }}">
                                 @yield('publisherRows')
                             </a17-publisher>
                             <a17-page-nav

views/partials/form/_date_picker.blade.php

@@ -18,6 +18,8 @@
     @if ($note ?? false) note="{{ $note }}" @endif
     @if ($required ?? false) :required="true" @endif
     @if ($inModal) :in-modal="true" @endif
+    @if (isset($time24Hr)) time_24hr="{{ $time24Hr ? 'true' : 'false' }}" @endif
+    @if (isset($altFormat)) alt-format="{{ $altFormat }}" @endif
     in-store="date"
 ></a17-datepicker>