Try with Flatpickr

assets/js/controllers/datepicker_controller.js

@@ -8,7 +8,7 @@
  */
 
 import { Controller } from '@hotwired/stimulus';
-import { TempusDominus } from '@eonasdan/tempus-dominus';
+import Flatpickr from 'flatpickr';
 
 export default class extends Controller {
   static values = {
@@ -20,7 +20,7 @@ export default class extends Controller {
 
     this.dispatchEvent('datepicker:pre-connect', { options });
 
-    const datePicker = new TempusDominus(this.element, options);
+    const datePicker = new Flatpickr(this.element, { ...options, wrap: true });
 
     this.dispatchEvent('datepicker:connect', { datePicker });
   }

assets/scss/app.scss

@@ -7,4 +7,4 @@
  * file that was distributed with this source code.
  */
 
-@import '@eonasdan/tempus-dominus';
+@import 'flatpickr';

package.json

@@ -1,8 +1,8 @@
 {
   "dependencies": {
-    "@eonasdan/tempus-dominus": "6.0.0-beta7",
+    "@hotwired/stimulus": "3.0.1",
     "@symfony/stimulus-bridge": "3.1.0",
-    "@hotwired/stimulus": "3.0.1"
+    "flatpickr": "4.6.13"
   },
   "devDependencies": {
     "@babel/core": "^7.17",

src/Bridge/Symfony/Resources/public/manifest.json

@@ -2,5 +2,5 @@
   "bundles/sonataform/app.css": "/bundles/sonataform/app.css",
   "bundles/sonataform/app.js": "/bundles/sonataform/app.js",
   "bundles/sonataform/696.js": "/bundles/sonataform/696.js",
-  "bundles/sonataform/430.js": "/bundles/sonataform/430.js"
+  "bundles/sonataform/527.js": "/bundles/sonataform/527.js"
 }

src/Bridge/Symfony/Resources/views/Form/datepicker.html.twig

@@ -14,7 +14,7 @@ file that was distributed with this source code.
             class="input-group date"
             id="dp_{{ id }}"
             data-controller="datepicker"
-            data-datepicker-options-value="{{ dp_options|json_encode|escape('html_attr') }}"
+            data-datepicker-options-value="{{ datepicker_options|json_encode|escape('html_attr') }}"
         >
     {% endif %}
     {% set attr = attr|merge({'data-date-format': moment_format}) %}
@@ -41,17 +41,17 @@ file that was distributed with this source code.
     {% if datepicker_use_button %}
         <div
             class="input-group date
-            {#% if not dp_options['pickDate'] %}timepicker{% endif %#}"
+            {#% if not datepicker_options['pickDate'] %}timepicker{% endif %#}"
             id="dtp_{{ id }}"
             data-controller="datepicker"
-            data-datepicker-options-value="{{ dp_options|json_encode|escape('html_attr') }}"
+            data-datepicker-options-value="{{ datepicker_options|json_encode|escape('html_attr') }}"
         >
     {% endif %}
     {% set attr = attr|merge({'data-date-format': moment_format}) %}
     {{ block('datetime_widget') }}
     {% if datepicker_use_button %}
             <span class="input-group-addon">
-                <span class="fas {#% if dp_options['pickDate'] %}fa-calendar{% else %}fa-clock{% endif %#}fa-calendar"></span>
+                <span class="fas {#% if datepicker_options['pickDate'] %}fa-calendar{% else %}fa-clock{% endif %#}fa-calendar"></span>
             </span>
         </div>
     {% endif %}