diff --git a/README.md b/README.md
index d9f904d432a3519ead9601404c7a35ad560612d7..14b5e11ba792378e1a7fb5ec3b865c8ab0bde99d 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Table of contents
Introduction
------------
-The Date Timepicker module adds one of 3 jQuery plugins to any DateTime field in
+The Date Timepicker module adds one of 4 jQuery plugins to any DateTime field in
the Widget settings.
Features:
@@ -38,6 +38,7 @@ The Date Timepicker module requires the following JavaScript libraries:
- [jQuery UI Timepicker](https://github.com/fgelinas/timepicker)
- [jQuery Timepicker Addon](https://github.com/trentrichardson/jQuery
-Timepicker-Addon)
+- [Flatpickr Plugin](https://flatpickr.js.org/#introduction)
Follow the installation instructions below for installing the module and
the libraries.
@@ -52,8 +53,7 @@ Installation
2. Install merge plugin using `composer require wikimedia/composer-merge-plugin`
3. Edit your site's composer.json file and add the following under
- the "extra" section:
-
+ the "extra" section:
```
"merge-plugin": {
"include": [
@@ -72,7 +72,23 @@ Installation
"/libraries/jquery-ui-timepicker" folder.
- Extract the jQuery Timepicker Addon library into the
"/libraries/jquery-timepicker-addon" folder.
+- Extract the Flatpickr library into the
+ "/libraries/flatpickr"
+ There is also a `composer.libraries.json` which you can use to copy and paste the library repositories in your site's `composer.json` file and use composer to download the libraries
+
+ ```
+ composer require "jonthornton-jquery-timepicker/jonthornton-jquery-timepicker"
+ composer require "jquery-ui-timepicker/jquery-ui-timepicker"
+ composer require "jquery-addon-timepicker/jquery-addon-timepicker
+ composer require "flatpickr-library/flatpickr-library"
+ ```
+6. Additional steps for installing the **flatpickr** library
+
+ You will need **NodeJS** and **npm** installed for these steps, go to the **/libraries/flatpickr** directory and run:
+
+ - `npm install` to install the library dependencies
+ - `npm run build` to compile the library and create a **dist** directory with the js and css files that the module needs.
Configuration
-------------
diff --git a/composer.libraries.json b/composer.libraries.json
index 839a15343daca624168014b6f6e621bf72603c5b..b0b0ac5fc296cfcde7f12761367ee872c0b2d5ea 100644
--- a/composer.libraries.json
+++ b/composer.libraries.json
@@ -52,26 +52,42 @@
}
}
},
- "jquery-timepicker-addon": {
+ "jquery-addon-timepicker": {
"type": "package",
"package": {
- "name": "jquery-timepicker-addon/jquery-timepicker-addon",
+ "name": "jquery-addon-timepicker/jquery-addon-timepicker",
"version": "1.6.3",
"type": "drupal-library",
"extra": {
- "installer-name": "jquery-timepicker-addon"
+ "installer-name": "jquery-addon-timepicker"
},
"dist": {
"url": "https://github.com/trentrichardson/jQuery-Timepicker-Addon/archive/refs/tags/v1.6.3.zip",
"type": "zip"
}
}
+ },
+ "flatpickr-library": {
+ "type": "package",
+ "package": {
+ "name": "flatpickr/flatpickr",
+ "version": "4.6.13",
+ "type": "drupal-library",
+ "extra": {
+ "installer-name": "flatpickr"
+ },
+ "dist": {
+ "url": "https://github.com/flatpickr/flatpickr/archive/refs/tags/v4.6.13.zip",
+ "type": "zip"
+ }
+ }
}
},
"require": {
"jonthornton-jquery-timepicker/jonthornton-jquery-timepicker": "1.14.1",
"jquery-ui-timepicker/jquery-ui-timepicker": "0.3.3",
- "jquery-timepicker-addon/jquery-timepicker-addon": "1.6.3"
+ "jquery-addon-timepicker/jquery-addon-timepicker": "1.6.3",
+ "flatpickr-library/flatpickr-library": "4.6.13"
}
}
\ No newline at end of file
diff --git a/js/flatpickr.js b/js/flatpickr.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec8ab7aaaf1e1bf49c5464e1aabbc995fb2434c4
--- /dev/null
+++ b/js/flatpickr.js
@@ -0,0 +1,31 @@
+/**
+ * @file
+ *
+ * Callback for flatpickr.
+ */
+
+(function ($) {
+ Drupal.behaviors.flatpickr = {
+ attach:(context, settings) => {
+
+ const fieldName = [];
+
+ Object.keys(settings.timepicker.flatpickr_timepicker).forEach((key, index) => {
+ if (key !== null) {
+ fieldName[index] = key;
+ }
+ });
+
+ const requiredOptions = {
+ enableTime: true,
+ noCalendar: true,
+ dateFormat: "H:i",
+ };
+
+ for (let i = 0; i < fieldName.length; i++) {
+ $('input[name="' + fieldName[i] + '[' + i + '][value][time]"').flatpickr(requiredOptions);
+ }
+ }
+ };
+
+}(jQuery));
diff --git a/timepicker.libraries.yml b/timepicker.libraries.yml
index 67a5583398312d07c48671fbc1cf64c8aec3e207..520cce88edc98244ad3c6bf6f2bf31e4a4b6ca65 100644
--- a/timepicker.libraries.yml
+++ b/timepicker.libraries.yml
@@ -23,6 +23,14 @@ jquery-addon-timepicker:
- core/jquery
- timepicker/jquery.ui.timepicker.addon
+flatpickr-timepicker:
+ version: VERSION
+ js:
+ js/flatpickr.js: { }
+ dependencies:
+ - core/jquery
+ - timepicker/flatpickr-library
+
# Define third-party libraries.
jonthornton-jquery-timepicker:
remote: https://github.com/jonthornton/jquery-timepicker
@@ -61,10 +69,27 @@ jquery.ui.timepicker.addon:
gpl-compatible: false
css:
theme:
- /libraries/jquery-timepicker-addon/dist/jquery-ui-timepicker-addon.css: { }
+ /libraries/jquery-addon-timepicker/dist/jquery-ui-timepicker-addon.css: { }
js:
- /libraries/jquery-timepicker-addon/dist/jquery-ui-timepicker-addon.js: { }
+ /libraries/jquery-addon-timepicker/dist/jquery-ui-timepicker-addon.js: { }
dependencies:
+ - core/jquery-ui
- jquery_ui/core
- - core/jquery.ui.slider
+ - jquery_ui/widget
- jquery_ui_datepicker/datepicker
+ - jquery_ui/jquery.ui.slider
+
+flatpickr-library:
+ remote: https://github.com/flatpickr/flatpickr
+ version: VERSION
+ license:
+ name: MIT
+ url: https://github.com/flatpickr/flatpickr/blob/master/LICENSE.md
+ gpl-compatible: false
+ css:
+ theme:
+ /libraries/flatpickr/dist/flatpickr.css: { }
+ js:
+ /libraries/flatpickr/dist/flatpickr.js: { }
+ dependencies:
+ - core/jquery
\ No newline at end of file
diff --git a/timepicker.module b/timepicker.module
index a57336ebec086febde3043ff98a5e10abacce668..ff86267e7e7dcc03790b179f591656a09af74cbb 100644
--- a/timepicker.module
+++ b/timepicker.module
@@ -114,6 +114,22 @@ function timepicker_timepicker_libraries() {
'http://trentrichardson.com/examples/timepicker/#tp-options',
],
],
+ 'timepicker_flatpickr' => [
+ 'title' => 'Flatpickr JS',
+ 'callback library' => [
+ 'extension' => 'timepicker',
+ 'name' => 'flatpickr-timepicker',
+ ],
+ 'depended library' => [
+ 'extension' => 'timepicker',
+ 'name' => 'flatpickr-library',
+ 'download url' =>
+ 'https://github.com/flatpickr/flatpickr/archive/master.zip',
+ 'library path' => '/libraries/flatpickr',
+ 'js options reference url' =>
+ 'https://flatpickr.js.org/getting-started',
+ ],
+ ],
];
}
@@ -136,9 +152,9 @@ function timepicker_get_library($name) {
}
/**
- * Implements hook_field_widget_form_alter().
+ * Implements hook_field_widget_single_element_form_alter().
*/
-function timepicker_field_widget_form_alter(&$element, FormStateInterface $form_state, $context) {
+function timepicker_field_widget_single_element_form_alter(&$element, FormStateInterface $form_state, $context) {
if (in_array($context['widget']->getPluginId(), timepicker_allowed_widgets())) {
/** @var \Drupal\Core\Field\WidgetInterface $widget */
$widget = $context['widget'];