added datepicker globally

src/Foundation.hs

@@ -482,6 +482,7 @@ instance Yesod UniWorX where
             $(widgetFile "standalone/inputs")
             $(widgetFile "standalone/tabber")
             $(widgetFile "standalone/alerts")
+            $(widgetFile "standalone/datepicker")
         withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
 
     -- The page to be redirected to when authentication is required.

templates/home.hamlet

@@ -30,11 +30,11 @@
 <hr>
 <div .container>
   <h2 .js-show-hide__toggle data-collapsed=true>Date picker
-  <form action=# id="datetime-form1">
+  <form action=#>
-    <input type="date">
+    <input type="date" placeholder="Pick a date">
-    <input type="time">
+    <input type="time" placeholder="Pick a time">
-  <form action=# id="datetime-form2">
+  <form action=#>
-    <input type="datetime-local">
+    <input type="datetime-local" placeholder="Pick a date and a time">
 
 <hr>
 <div .container>

templates/home.julius

@@ -1,19 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-  'use strict';
-
-  var config = {
-    enableTime: true,
-    altInput: true,
-    altFormat: "j. F Y, H:i",
-    dateFormat: "Y-m-d H:i",
-    time_24hr: true
-  };
-
-  flatpickr('#datetime-form1 [type="date"]', {
-    altFormat: "j. F Y", dateFormat: "Y-m-d", altInput: true
-  });
-  flatpickr('#datetime-form1 [type="time"]', {
-    enableTime: true, noCalendar: true, altFormat: "H:i", dateFormat: "H:i", altInput: true, time_24hr: true
-  });
-  flatpickr('#datetime-form2 input', config);
-});

templates/standalone/datepicker.hamlet

@@ -0,0 +1 @@
+<!-- only here to be able to include datepicker using `toWidget` -->

templates/standalone/datepicker.julius

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', function() {
+  "use strict";
+
+  var config = {
+    dtLocal: {
+      enableTime: true,
+      altInput: true,
+      altFormat: "j. F Y, H:i",
+      dateFormat: "Y-m-d H:i",
+      time_24hr: true
+    },
+    d: {
+      altFormat: "j. F Y",
+      dateFormat: "Y-m-d",
+      altInput: true
+    },
+    t: {
+      enableTime: true,
+      noCalendar: true,
+      altFormat: "H:i",
+      dateFormat: "H:i",
+      altInput: true,
+      time_24hr: true
+    }
+  };
+
+  Array.from(document.querySelectorAll('input[type="date"]')).forEach(function(el) {
+    flatpickr(el, config.d);
+  });
+  Array.from(document.querySelectorAll('input[type="time"]')).forEach(function(el) {
+    flatpickr(el, config.t);
+  });
+  Array.from(document.querySelectorAll('input[type="datetime-local"]')).forEach(function(el) {
+    flatpickr(el, config.dtLocal);
+  });
+});

templates/widgets/form.hamlet

@@ -6,4 +6,5 @@ $case formLayout
       <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
+        $# TODO: inputs should have proper placeholders
         ^{fvInput view}