add datetime picker

assets/js/admin/datepicker.js

@@ -1,26 +1,27 @@
 const Datepicker = require('vanillajs-datepicker')
+const Flatpickr = require("flatpickr").default;
+const French = require('flatpickr/dist/l10n/fr').default.fr;
 
-const isDateSupported = () => {
+require('flatpickr/dist/flatpickr.css')
-    const input = document.createElement('input');
-    const value = 'a';
-
-    input.setAttribute('type', 'date');
-    input.setAttribute('value', value);
-
-    return input.value !== value;
-}
 
 module.exports = () => {
-    if (isDateSupported()) {
+    let inputs = document.querySelectorAll('input[type="date"]')
-        return
+    let size = inputs.length
-    }
-
-    const inputs = document.querySelectorAll('input[type="date"]')
-    const size = inputs.length
 
     for (var i = 0, c = inputs.length; i < c; i++) {
         new Datepicker.Datepicker(inputs[i], {
             format: 'yyyy-mm-dd'
         })
     }
+
+    inputs = document.querySelectorAll('input[data-datetime]')
+    size = inputs.length
+
+    for (var i = 0, c = inputs.length; i < c; i++) {
+        Flatpickr(inputs[i], {
+            enableTime: true,
+            dateFormat: "d/m/Y h:i",
+            locale: French
+        })
+    }
 }

package.json

@@ -22,6 +22,7 @@
         "@fortawesome/fontawesome-free": "^5.11.2",
         "bootstrap": "^4.3.1",
         "choices.js": "^9.0.1",
+        "flatpickr": "^4.6.9",
         "jquery": "^3.6.0",
         "lozad": "^1.16.0",
         "particles.js": "^2.0.0",
@@ -31,7 +32,7 @@
         "qrcodejs": "^1.0.0",
         "simplemde": "^1.11.2",
         "tinymce": "^5.7.1",
-        "vanillajs-datepicker": "^1.1.2",
+        "vanillajs-datepicker": "^1.1.4",
         "wire.css": "^1.2.5",
         "zxcvbn": "^4.4.2"
     }

src/Form/Blog/PostType.php

@@ -22,6 +22,8 @@ use Symfony\Component\Form\Extension\Core\Type\NumberType;
 use Symfony\Component\Validator\Constraints\Range;
 use Symfony\Component\Validator\Constraints\Url;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
+use Symfony\Component\Validator\Constraints\DateTime;
+use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
 
 class PostType extends AbstractType
 {
@@ -128,16 +130,17 @@ class PostType extends AbstractType
 
         $builder->add(
             'publishedAt',
-            DateType::class,
+            DateTimeType::class,
             [
                 'label' => 'Date de publication',
                 'required' => false,
-                'html5' => true,
+                'html5' => false,
                 'widget' => 'single_text',
+                'format' => 'dd/MM/yyyy hh:mm',
                 'attr' => [
+                    'data-datetime' => '',
                 ],
                 'constraints' => [
-                    new Date(),
                 ],
             ]
         );

yarn.lock

@@ -2773,6 +2773,11 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+flatpickr@^4.6.9:
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
+  integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
+
 follow-redirects@^1.0.0:
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
@@ -6104,7 +6109,7 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vanillajs-datepicker@^1.1.2:
+vanillajs-datepicker@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/vanillajs-datepicker/-/vanillajs-datepicker-1.1.4.tgz#247a5969739ca17895ae53e30218293e230e6cad"
   integrity sha512-XJhvRx+VqtRjqrPlgNCQntLpCntFKPMBd8ahxZhLkvrWX0bNdpP3kz5j13L2Q0xfTAY/QMfQtVZvBvRF0NilcA==