https://kaitsealad.ee/modules/custom/ka_calendar/js/calendar.js?v=1.0.0

1/**
2 * @file
3 * JavaScript file for ka_calendar module.
4 * Implements calendar functionality for Drupal 11.
5 */
6
7(function (Drupal, once) {
8  'use strict';
9
10  /**
11   * Drupal behavior to handle date input clicks and show HTML5 datepicker.
12   */
13  Drupal.behaviors.kaCalendarDateInputPicker = {
14    attach: function (context, settings) {
15      // Find all date input elements within webform date components
16      const dateInputs = once('ka-date-picker', '.form-type-date input[type="date"]', context);
17
18      dateInputs.forEach(element => {
19        // Add click event listener to the input field
20        element.addEventListener('click', function (event) {
21          try {
22            // Check if showPicker method is supported
23            if (typeof event.target.showPicker === 'function') {
24              event.preventDefault();
25              event.target.showPicker();
26            } else {
27              // Fallback for browsers that don't support showPicker()
28              console.warn('showPicker() method is not supported in this browser');
29              // Focus the input as a fallback
30              event.target.focus();
31            }
32          } catch (error) {
33            console.error('Error showing date picker:', error);
34            // Fallback behavior
35            event.target.focus();
36          }
37        });
38
39        // Add focus event listener for better UX
40        element.addEventListener('focus', function (event) {
41          try {
42            if (typeof event.target.showPicker === 'function') {
43              event.target.showPicker();
44            }
45          } catch (error) {
46            console.error('Error showing date picker on focus:', error);
47          }
48        });
49      });
50    }
51  };
52
53  /**
54   * Drupal behavior for jQuery UI datepicker integration.
55   * Note: This behavior requires jQuery UI to be loaded.
56   */
57  Drupal.behaviors.kaCalendarCustomDatepicker = {
58    attach: function (context, settings) {
59
60      // Check if jQuery UI is available
61      if (typeof jQuery === 'undefined' || typeof jQuery.fn.datepicker === 'undefined') {
62        console.warn('jQuery UI datepicker is not loaded. kaCalendarCustomDatepicker behavior will be skipped.');
63        return;
64      }
65
66      // Apply datepicker to specific input fields
67      const datepickerElements = once('ka-custom-datepicker', '#edit-event-date', context);
68      datepickerElements.forEach(element => {
69        // Initialize jQuery UI datepicker with modern options
70        jQuery(element).datepicker({
71          dateFormat: 'dd.mm.yy',
72          changeMonth: false,
73          changeYear: false,
74          showButtonPanel: false,
75          yearRange: 'c-10:c+10',
76          // Additional accessibility improvements
77          // Callback functions for better integration
78          onSelect: function(dateText) {
79            // Trigger change event for Drupal form handling
80            jQuery(this).trigger('change');
81          }
82        });
83      });
84    }
85  };
86
87})(Drupal, once);