feature #1183 Add flatpickr as a datepicker (atierant)

Author: atierant

assets/admin.js

@@ -2,9 +2,6 @@ import './styles/admin.scss';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
 import 'bootstrap-tagsinput';
-import 'flatpickr';
-import 'flatpickr/dist/flatpickr.css';
-import moment from 'moment';
 
 $(function() {
     // Bootstrap-tagsinput initialization
@@ -27,22 +24,6 @@ $(function() {
             }
         });
     }
-
-    const locale = $('#post_publishedAt').data('date-locale');
-    const Locale = require(`flatpickr/dist/l10n/${locale}.js`).default[locale];
-    flatpickr.localize(Locale);
-
-    $('[data-toggle="datetimepicker"]').flatpickr({
-        enableTime: true,
-        dateFormat: $('#post_publishedAt').data('date-format'),
-        allowInput: true,
-        parseDate: (datestr, format) => {
-            return moment(datestr, format, true).toDate();
-        },
-        formatDate: (date, format, locale) => {
-            return moment(date).format(format);
-        }
-    });
 });
 
 // Handling the modal confirmation message.

assets/app.js

@@ -15,3 +15,5 @@ import './js/doclinks.js';
 
 // start the Stimulus application
 import './bootstrap';
+
+import './js/flatpicker';

assets/js/flatpicker.js

@@ -0,0 +1,32 @@
+import 'flatpickr';
+import 'flatpickr/dist/flatpickr.css';
+
+flatpickr.defaultConfig.animate = window.navigator.userAgent.indexOf('MSIE') === -1;
+const locale = $('html').getAttribute('lang') || 'en';
+const Locale = require(`flatpickr/dist/l10n/${locale}.js`).default[locale];
+flatpickr.localize(Locale);
+const configs = {
+    standard: {
+        enableTime: true,
+        dateFormat: "Y-m-d H:i",
+        allowInput: true,
+        time_24hr: true,
+        defaultHour: 24,
+        parseDate: (datestr, format) => {
+            return flatpickr.parseDate(datestr, format);
+        },
+        formatDate: (date, format, locale) => {
+            return flatpickr.formatDate(date, format);
+        }
+    }
+};
+
+const flatpickrs = document.querySelectorAll(".flatpickr");
+for (let i = 0; i < flatpickrs.length; i++) {
+    let element = flatpickrs[i];
+    let configValue = configs[element.getAttribute("data-flatpickr-class")] || {};
+    // Overrides the default format with the one sent by data attribute
+    configValue.dateFormat = element.getAttribute("data-date-format") || 'Y-m-d H:i';
+    // ...and then initialize the flatpickr
+    flatpickr(element, configValue);
+}

assets/styles/_variables.scss

@@ -0,0 +1,17 @@
+// setting the value of this variable to an empty data URL is the only working solution
+// to load the Bootswatch web fonts locally and avoid loading them from Google servers
+// see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
+$web-font-path: 'data:text/css;base64,';
+
+// Make sure the bootstrap-sass and lato fonts are resolved correctly
+//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
+$lato-font-path: '~lato-font/fonts';
+
+$font-default: 17px;
+$font-heading: 2.5rem;
+$font-title: 1.85rem;
+
+$secondary-color: #ecf0f1;
+$gray-7500: #e9ecec;
+
+@import "~bootswatch/dist/flatly/variables";

assets/styles/app.scss

@@ -1,20 +1,4 @@
-// setting the value of this variable to an empty data URL is the only working solution
-// to load the Bootswatch web fonts locally and avoid loading them from Google servers
-// see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
-$web-font-path: 'data:text/css;base64,';
-
-// Make sure the bootstrap-sass and lato fonts are resolved correctly
-$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-$lato-font-path: '~lato-font/fonts';
-
-$font-default: 17px;
-$font-heading: 2.5rem;
-$font-title: 1.85rem;
-
-$secondary-color: #ecf0f1;
-$gray-7500: #e9ecec;
-
-@import "~bootswatch/dist/flatly/variables";
+@import "variables";
 
 // @import "~bootstrap/scss/bootstrap.scss";
 @import "~bootstrap/scss/functions";
@@ -55,8 +39,6 @@ $gray-7500: #e9ecec;
 @import "~bootstrap/scss/utilities";
 // @import "~bootstrap/scss/print";
 
-@import "~bootstrap-sass/assets/stylesheets/bootstrap";
-
 @import "~bootswatch/dist/flatly/bootswatch";
 @import "~@fortawesome/fontawesome-free/css/all.css";
 @import "~@fortawesome/fontawesome-free/css/v4-shims.css";
@@ -124,14 +106,6 @@ a:hover {
    ------------------------------------------------------------------------- */
 .m-b-0 { margin-bottom: 0 }
 
-@media (min-width: $screen-md-min) {
-  .modal-xl { width: $modal-lg; }
-}
-
-@media (min-width: $screen-lg-min) {
-  .modal-xl { width: $screen-lg-min - 60px; }
-}
-
 .badge{
   padding: 0.25em 0.4em 0.27em 0.4em
 }