datetime_controller.js

import { Controller } from '@hotwired/stimulus'
import { TempusDominus } from '@eonasdan/tempus-dominus'

function findParentBySelector(element, selector) {
  while (element && element.parentElement) {
      if (element.parentElement.matches(selector)) {
          return element.parentElement;
      }
      element = element.parentElement;
  }
  return null; // Return null if no matching parent is found
}

// Connects to data-controller="datetime"
export default class extends Controller {
  connect() {
    this.element.classList.add('bg-white')
    this.element.setAttribute('readonly', true)
    this.widget = new TempusDominus(this.element, {
      container: findParentBySelector(this.element, '.modal'),
      localization: {
        hourCycle: 'h24',
        format: 'yyyy-MM-dd HH:mm'
      },
      display: {
        sideBySide: true,
        components: {
          seconds: true
        },
        icons: {
          type: 'icons',
          time: 'fas fa-clock',
          date: 'fas fa-calendar',
          up: 'fas fa-arrow-up',
          down: 'fas fa-arrow-down',
          previous: 'fas fa-chevron-left',
          next: 'fas fa-chevron-right',
          today: 'fas fa-calendar-check',
          clear: 'fas fa-trash',
          close: 'fas fa-times',
        }
      }
    })
    this.element.addEventListener('change.td', e => {
      const date = e.detail.date
      date.setMilliseconds(0)
      this.element.value = date.toISOString()
    })
  }
}