hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/date_picker_controller.js

@@ -0,0 +1,906 @@
+import RegistryController from "../base/registry_controller.js"
+import DateHelper, { ISO_DATE_FORMAT, ISO_DATETIME_FORMAT, ISO_DATETIME_NO_SECONDS_FORMAT } from "../../utils/date_helper.js"
+
+export default class extends RegistryController {
+  static targets = ["hiddenInput", "displayInput", "input", "panel", "clear", "startInput", "endInput", "hourOption", "minuteOption", "secondOption", "periodOption", "nowBtn", "okBtn"]
+  static values = {
+    allowClear: Boolean,
+    disabled: Boolean,
+    picker: String,
+    range: Boolean,
+    showTime: Boolean,
+    showSeconds: Boolean,
+    displayFormat: String
+  }
+
+  setup() {
+    this.isOpen = false
+    this.activeRange = "start"
+    this.disabledDate = null
+    this.boundClickOutside = this.handleClickOutside.bind(this)
+    document.addEventListener("click", this.boundClickOutside)
+
+    // Range selection state
+    this.tempRangeStart = null
+    this.tempRangeEnd = null
+  }
+
+  teardown() {
+    document.removeEventListener("click", this.boundClickOutside)
+
+    // Limpiar listeners de calendarios si existen
+    if (this.rangeValue && this.hasPanelTarget) {
+      const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+      const [startCalendar, endCalendar] = calendars
+
+      if (startCalendar && this.boundSyncFromStart) {
+        startCalendar.removeEventListener("hakumi--calendar:change", this.boundSyncFromStart)
+      }
+      if (endCalendar && this.boundSyncFromEnd) {
+        endCalendar.removeEventListener("hakumi--calendar:change", this.boundSyncFromEnd)
+      }
+      if (startCalendar && this.boundHandleHover) {
+        startCalendar.removeEventListener("hakumi--calendar:cell-hover", this.boundHandleHover)
+      }
+      if (endCalendar && this.boundHandleHover) {
+        endCalendar.removeEventListener("hakumi--calendar:cell-hover", this.boundHandleHover)
+      }
+    }
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "date_picker",
+      version: 1,
+      singleton: false,
+      api: {
+        getValue: () => this.getValue(),
+        setValue: (value) => this.setValue(value),
+        open: () => this.open(),
+        close: () => this.close(),
+        toggle: () => this.toggle(),
+        clear: () => this.clear(),
+        focus: () => this.focus(),
+        blur: () => this.blur(),
+        setDisabledDate: (fn) => this.setDisabledDate(fn)
+      }
+    }
+  }
+
+  getValue() {
+    if (this.rangeValue) {
+      return {
+        startValue: this.hasStartInputTarget ? this.startInputTarget.value : "",
+        endValue: this.hasEndInputTarget ? this.endInputTarget.value : ""
+      }
+    }
+
+    // Return ISO value from hidden input
+    return this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
+  }
+
+  setValue(value) {
+    if (this.rangeValue) {
+      const startValue = value?.startValue ?? value?.[0] ?? ""
+      const endValue = value?.endValue ?? value?.[1] ?? ""
+      if (this.hasStartInputTarget) this.startInputTarget.value = startValue
+      if (this.hasEndInputTarget) this.endInputTarget.value = endValue
+      this.updateClearVisibility()
+      this.dispatchChangeEvent({ startValue, endValue })
+      return
+    }
+
+    const isoValue = value ?? ""
+
+    // Set ISO value in hidden input
+    if (this.hasHiddenInputTarget) {
+      this.hiddenInputTarget.value = isoValue
+    }
+
+    // Set formatted value in display input
+    if (this.hasDisplayInputTarget) {
+      this.displayInputTarget.value = this.formatForDisplay(isoValue)
+    }
+
+    this.updateClearVisibility()
+    this.dispatchChangeEvent({ value: isoValue })
+  }
+
+  // Format ISO value for display using Day.js
+  formatForDisplay(isoValue) {
+    if (!isoValue) return ""
+    const displayFormat = this.displayFormatValue || this.getDefaultDisplayFormat()
+    return DateHelper.format(isoValue, displayFormat)
+  }
+
+  // Get default display format based on showTime and showSeconds
+  getDefaultDisplayFormat() {
+    if (this.showTimeValue) {
+      return this.showSecondsValue ? ISO_DATETIME_FORMAT : ISO_DATETIME_NO_SECONDS_FORMAT
+    }
+    return ISO_DATE_FORMAT
+  }
+
+  // Get ISO format for internal value
+  getISOFormat() {
+    if (this.showTimeValue) {
+      return this.showSecondsValue ? ISO_DATETIME_FORMAT : ISO_DATETIME_NO_SECONDS_FORMAT
+    }
+    return ISO_DATE_FORMAT
+  }
+
+  toggle(event) {
+    if (event) event.stopPropagation()
+    if (this.disabledValue) return
+
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this.disabledValue) return
+    if (this.isOpen) return
+
+    this.isOpen = true
+    this.element.classList.add("hakumi-date-picker-open", "hakumi-date-picker-focused")
+    this.showPanel(true)
+
+    // Initialize selectedTime from current input value when show_time is enabled
+    if (this.showTimeValue) {
+      this.initializeTimeFromInput()
+    }
+
+    if (this.rangeValue) {
+      this.waitForCalendarApi().then(() => {
+        this.syncRangeCalendars()
+        this.setupRangeCalendarListeners()
+        this.syncCalendarWithInput()
+      })
+    } else {
+      this.waitForCalendarApi().then(() => this.syncCalendarWithInput())
+    }
+
+    this.dispatchOpenChange(true)
+  }
+
+  initializeTimeFromInput() {
+    // Use hidden input for ISO value (24-hour format)
+    const currentValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
+    const timePart = currentValue.match(/(\d{2}):(\d{2})(?::(\d{2}))?$/)
+
+    if (timePart) {
+      let hour = parseInt(timePart[1], 10)
+      let period = undefined
+
+      // Convert 24h to 12h if needed
+      if (this.hasPeriodOptionTarget) {
+        if (hour === 0) {
+          hour = 12
+          period = "AM"
+        } else if (hour < 12) {
+          period = "AM"
+        } else if (hour === 12) {
+          period = "PM"
+        } else {
+          hour -= 12
+          period = "PM"
+        }
+      }
+
+      this.selectedTime = {
+        hour: String(hour).padStart(2, "0"),
+        minute: timePart[2],
+        second: timePart[3] || "00"
+      }
+
+      if (period) {
+        this.selectedTime.period = period
+      }
+    } else {
+      this.selectedTime = { hour: "00", minute: "00", second: "00" }
+    }
+
+    // Also initialize selectedDate if we have a date in the input
+    if (currentValue) {
+      const datePart = currentValue.match(/^(\d{4}-\d{2}-\d{2})/)
+      if (datePart) {
+        this.selectedDate = DateHelper.parseDataDate(datePart[1]).toDate()
+      }
+    }
+
+    this.updateTimeSelection()
+  }
+
+  waitForCalendarApi(maxAttempts = 50, interval = 10) {
+    return new Promise((resolve) => {
+      let attempts = 0
+      const check = () => {
+        const calendars = this.panelTarget?.querySelectorAll(".hakumi-calendar")
+
+        // For range picker, wait for BOTH calendars to be ready
+        if (this.rangeValue) {
+          const allReady = calendars?.length === 2 &&
+            calendars[0]?.hakumiComponent?.api?.refresh &&
+            calendars[1]?.hakumiComponent?.api?.refresh
+          if (allReady) {
+            resolve()
+            return
+          }
+        } else {
+          // For single picker, wait for one calendar
+          const calendar = calendars?.[0]
+          if (calendar?.hakumiComponent?.api?.refresh) {
+            resolve()
+            return
+          }
+        }
+
+        if (attempts < maxAttempts) {
+          attempts++
+          requestAnimationFrame(() => setTimeout(check, interval))
+        } else {
+          resolve()
+        }
+      }
+
+      requestAnimationFrame(check)
+    })
+  }
+
+  syncCalendarWithInput() {
+    if (!this.hasPanelTarget) return
+
+    // Use hidden input for ISO value
+    const inputValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
+
+
+    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+
+    calendars.forEach(calendarEl => {
+
+      const api = calendarEl.hakumiComponent?.api
+      if (!api) return
+
+      if (inputValue) {
+
+        const date = this.parseInputValue(inputValue)
+        if (date) {
+
+          api.setValue(date)
+          api.refresh()
+        }
+      } else {
+
+        api.clearSelection()
+        api.refresh()
+      }
+    })
+  }
+
+  parseInputValue(value) {
+    if (!value) return null
+
+    const picker = this.pickerValue || "date"
+
+    try {
+      switch (picker) {
+        case "quarter": {
+          const match = value.match(/Q(\d) (\d{4})/)
+          if (!match) return null
+          const quarter = parseInt(match[1], 10)
+          const year = parseInt(match[2], 10)
+          const month = (quarter - 1) * 3 + 1
+          return DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`).toDate()
+        }
+        case "year": {
+          const year = parseInt(value, 10)
+          if (isNaN(year)) return null
+          return DateHelper.parseDataDate(`${year}-01-01`).toDate()
+        }
+        case "month": {
+          const [year, month] = value.split("-").map(n => parseInt(n, 10))
+          if (isNaN(year) || isNaN(month)) return null
+          return DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`).toDate()
+        }
+        case "week": {
+          const parts = value.split("-W")
+          const year = parseInt(parts[0], 10)
+          const week = parseInt(parts[1], 10)
+          if (isNaN(year) || isNaN(week)) return null
+          return DateHelper.getMondayOfISOWeek(year, week).toDate()
+        }
+        default: {
+          const parsed = DateHelper.parseDataDate(value)
+          return parsed.isValid() ? parsed.toDate() : null
+        }
+      }
+    } catch (e) {
+      return null
+    }
+  }
+
+  close() {
+    if (!this.isOpen) return
+
+    this.isOpen = false
+    this.element.classList.remove("hakumi-date-picker-open", "hakumi-date-picker-focused")
+    this.showPanel(false)
+
+    // Clean up datetime state
+    if (this.showTimeValue) {
+      this.selectedDate = null
+      this.selectedTime = null
+    }
+
+    // Clean up range state
+    if (this.rangeValue) {
+      this.tempRangeStart = null
+      this.tempRangeEnd = null
+      this.clearRangeVisuals()
+    }
+
+    this.dispatchOpenChange(false)
+  }
+
+  updateRangeVisuals() {
+    if (!this.rangeValue || !this.hasPanelTarget) return
+
+    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+
+    calendars.forEach(calendar => {
+      const api = calendar.hakumiComponent?.api
+      if (!api) return
+
+      if (this.tempRangeStart && this.tempRangeEnd) {
+        // Rango completo
+        api.setRange(this.tempRangeStart, this.tempRangeEnd, null)
+      } else if (this.tempRangeStart) {
+        // Solo inicio, sin fin (mostrar solo el inicio)
+        api.setRange(this.tempRangeStart, null, null)
+      } else {
+        // Sin rango
+        api.clearRange()
+      }
+    })
+  }
+
+  clearRangeVisuals() {
+    if (!this.hasPanelTarget) return
+
+    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+    calendars.forEach(calendar => {
+      const api = calendar.hakumiComponent?.api
+      if (api) api.clearRange()
+    })
+  }
+
+  syncRangeCalendars() {
+    if (!this.rangeValue || !this.hasPanelTarget) return
+
+    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+    if (calendars.length !== 2) return
+
+    const startCalendar = calendars[0]
+    const endCalendar = calendars[1]
+
+    const startApi = startCalendar.hakumiComponent?.api
+    const endApi = endCalendar.hakumiComponent?.api
+
+    if (!startApi || !endApi) return
+
+    // Obtener el mes/año actual del primer calendario
+    const startDate = startApi.getValue()
+    const startMonth = startDate.getMonth()
+    const startYear = startDate.getFullYear()
+
+    // Calcular el mes siguiente para el segundo calendario
+    let endMonth = startMonth + 1
+    let endYear = startYear
+
+    if (endMonth > 11) {
+      endMonth = 0
+      endYear += 1
+    }
+
+    // Establecer el segundo calendario al mes siguiente
+    const endDate = new Date(endYear, endMonth, 1)
+    endApi.setValue(endDate, { navigate: true })
+  }
+
+  setupRangeCalendarListeners() {
+    if (!this.rangeValue || !this.hasPanelTarget) return
+
+    const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+    if (calendars.length !== 2) return
+
+    const startCalendar = calendars[0]
+    const endCalendar = calendars[1]
+
+    // Remover listeners previos si existen
+    if (this.boundSyncFromStart) {
+      startCalendar.removeEventListener("hakumi--calendar:change", this.boundSyncFromStart)
+    }
+    if (this.boundSyncFromEnd) {
+      endCalendar.removeEventListener("hakumi--calendar:change", this.boundSyncFromEnd)
+    }
+
+    // Crear los listeners
+    this.boundSyncFromStart = (event) => {
+      const startApi = startCalendar.hakumiComponent?.api
+      const endApi = endCalendar.hakumiComponent?.api
+      if (!startApi || !endApi) return
+
+      const startDate = startApi.getValue()
+      const startMonth = startDate.getMonth()
+      const startYear = startDate.getFullYear()
+
+      // Calcular el mes siguiente
+      let endMonth = startMonth + 1
+      let endYear = startYear
+
+      if (endMonth > 11) {
+        endMonth = 0
+        endYear += 1
+      }
+
+      const endDate = endApi.getValue()
+      const currentEndMonth = endDate.getMonth()
+      const currentEndYear = endDate.getFullYear()
+
+      // Solo sincronizar si el segundo calendario no está ya en el mes correcto
+      if (currentEndMonth !== endMonth || currentEndYear !== endYear) {
+        endApi.setValue(new Date(endYear, endMonth, 1), { navigate: true })
+      }
+    }
+
+    this.boundSyncFromEnd = (event) => {
+      const startApi = startCalendar.hakumiComponent?.api
+      const endApi = endCalendar.hakumiComponent?.api
+      if (!startApi || !endApi) return
+
+      const endDate = endApi.getValue()
+      const endMonth = endDate.getMonth()
+      const endYear = endDate.getFullYear()
+
+      // Calcular el mes anterior
+      let startMonth = endMonth - 1
+      let startYear = endYear
+
+      if (startMonth < 0) {
+        startMonth = 11
+        startYear -= 1
+      }
+
+      const startDate = startApi.getValue()
+      const currentStartMonth = startDate.getMonth()
+      const currentStartYear = startDate.getFullYear()
+
+      // Solo sincronizar si el primer calendario no está ya en el mes correcto
+      if (currentStartMonth !== startMonth || currentStartYear !== startYear) {
+        startApi.setValue(new Date(startYear, startMonth, 1), { navigate: true })
+      }
+    }
+
+    // Listener para hover
+    this.boundHandleHover = (event) => {
+      const hoveredDate = event.detail?.date
+      if (!hoveredDate) return
+
+      const calendars = this.panelTarget.querySelectorAll(".hakumi-calendar")
+      calendars.forEach(calendar => {
+        const api = calendar.hakumiComponent?.api
+        if (api) {
+          api.setHoveredDate(hoveredDate)
+        }
+      })
+    }
+
+    // Agregar los listeners
+    startCalendar.addEventListener("hakumi--calendar:change", this.boundSyncFromStart)
+    endCalendar.addEventListener("hakumi--calendar:change", this.boundSyncFromEnd)
+    startCalendar.addEventListener("hakumi--calendar:cell-hover", this.boundHandleHover)
+    endCalendar.addEventListener("hakumi--calendar:cell-hover", this.boundHandleHover)
+  }
+
+  clear(event) {
+    if (event) event.stopPropagation()
+    if (this.disabledValue) return
+
+    if (this.rangeValue) {
+      if (this.hasStartInputTarget) this.startInputTarget.value = ""
+      if (this.hasEndInputTarget) this.endInputTarget.value = ""
+      this.dispatchChangeEvent({ startValue: "", endValue: "" })
+    } else {
+      // Clear both hidden and display inputs
+      if (this.hasHiddenInputTarget) this.hiddenInputTarget.value = ""
+      if (this.hasDisplayInputTarget) this.displayInputTarget.value = ""
+      this.dispatchChangeEvent({ value: "" })
+    }
+
+    this.updateClearVisibility()
+  }
+
+  focus() {
+    if (this.disabledValue) return
+    if (this.rangeValue && this.hasStartInputTarget) {
+      this.startInputTarget.focus()
+    } else if (this.hasInputTarget) {
+      this.inputTarget.focus()
+    }
+  }
+
+  blur() {
+    if (this.rangeValue) {
+      if (this.hasStartInputTarget) this.startInputTarget.blur()
+      if (this.hasEndInputTarget) this.endInputTarget.blur()
+    } else if (this.hasInputTarget) {
+      this.inputTarget.blur()
+    }
+  }
+
+  activateStart(event) {
+    if (event) event.stopPropagation()
+    if (this.disabledValue) return
+    this.activeRange = "start"
+    this.open()
+  }
+
+  activateEnd(event) {
+    if (event) event.stopPropagation()
+    if (this.disabledValue) return
+    this.activeRange = "end"
+    this.open()
+  }
+
+  handleCalendarSelect(event) {
+    let date = event.detail?.date
+    const detailData = event.detail
+
+    if (detailData?.quarter) {
+      const quarter = detailData.quarter
+      const year = detailData.year || new Date().getFullYear()
+      const formatted = `Q${quarter} ${year}`
+
+      // Use setValue to update both hidden and display inputs
+      this.setValue(formatted)
+
+      if (!this.rangeValue) {
+        this.syncCalendarWithInput()
+      }
+      this.close()
+      return
+    }
+
+    if (!(date instanceof Date)) return
+    if (this.isDateDisabled(date)) return
+
+    // When show_time is enabled, don't close panel or update input immediately
+    // Store the selected date and wait for OK button
+    if (this.showTimeValue) {
+      this.selectedDate = date
+      // Initialize time from current value or defaults
+      if (!this.selectedTime) {
+        const currentValue = this.hasHiddenInputTarget ? this.hiddenInputTarget.value : ""
+        const timePart = currentValue.match(/(\d{2}):(\d{2})(?::(\d{2}))?$/)
+        if (timePart) {
+          this.selectedTime = {
+            hour: timePart[1],
+            minute: timePart[2],
+            second: timePart[3] || "00"
+          }
+        } else {
+          this.selectedTime = { hour: "00", minute: "00", second: "00" }
+        }
+        this.updateTimeSelection()
+      }
+      return
+    }
+
+    const formatted = this.formatDate(date)
+
+    if (this.rangeValue) {
+      // Nueva lógica de selección de rango visual
+      if (!this.tempRangeStart) {
+        // Primera selección: establecer inicio del rango
+        this.tempRangeStart = date
+        this.tempRangeEnd = null
+
+        // Actualizar input de inicio
+        if (this.hasStartInputTarget) {
+          this.startInputTarget.value = formatted
+        }
+
+        // Limpiar input de fin
+        if (this.hasEndInputTarget) {
+          this.endInputTarget.value = ""
+        }
+
+        // Actualizar visual en ambos calendarios
+        this.updateRangeVisuals()
+
+        this.dispatchChangeEvent({
+          startValue: formatted,
+          endValue: ""
+        })
+      } else if (!this.tempRangeEnd) {
+        // Segunda selección: establecer fin del rango
+        const clickedDate = date
+
+        // Si la fecha clickeada es anterior al inicio, reiniciar selección
+        if (clickedDate < this.tempRangeStart) {
+          this.tempRangeStart = clickedDate
+          this.tempRangeEnd = null
+
+          if (this.hasStartInputTarget) {
+            this.startInputTarget.value = formatted
+          }
+          if (this.hasEndInputTarget) {
+            this.endInputTarget.value = ""
+          }
+
+          this.updateRangeVisuals()
+
+          this.dispatchChangeEvent({
+            startValue: formatted,
+            endValue: ""
+          })
+        } else {
+          // Completar el rango
+          this.tempRangeEnd = clickedDate
+
+          if (this.hasEndInputTarget) {
+            this.endInputTarget.value = formatted
+          }
+
+          this.updateRangeVisuals()
+
+          this.dispatchChangeEvent({
+            startValue: this.hasStartInputTarget ? this.startInputTarget.value : "",
+            endValue: formatted
+          })
+
+          this.updateClearVisibility()
+
+          // Cerrar el picker después de completar la selección
+          this.close()
+        }
+      } else {
+        // Ya hay un rango completo, reiniciar con nueva selección
+        this.tempRangeStart = date
+        this.tempRangeEnd = null
+
+        if (this.hasStartInputTarget) {
+          this.startInputTarget.value = formatted
+        }
+        if (this.hasEndInputTarget) {
+          this.endInputTarget.value = ""
+        }
+
+        this.updateRangeVisuals()
+
+        this.dispatchChangeEvent({
+          startValue: formatted,
+          endValue: ""
+        })
+      }
+
+      this.updateClearVisibility()
+      return  // Salir temprano para rangos
+    }
+
+    // Código para pickers no-rango
+    // Use setValue to update both hidden and display inputs
+    this.setValue(formatted)
+    this.syncCalendarWithInput()
+    this.updateClearVisibility()
+    this.close()
+  }
+
+  setDisabledDate(fn) {
+    this.disabledDate = fn
+  }
+
+  isDateDisabled(date) {
+    if (typeof this.disabledDate === "function") {
+      return this.disabledDate(date)
+    }
+    return false
+  }
+
+  showPanel(show) {
+    if (!this.hasPanelTarget) return
+
+    if (show) {
+      this.panelTarget.classList.remove("hakumi-date-picker-panel-hidden")
+    } else {
+      this.panelTarget.classList.add("hakumi-date-picker-panel-hidden")
+    }
+  }
+
+  updateClearVisibility() {
+    if (!this.hasClearTarget || !this.allowClearValue) return
+
+    const hasValue = this.rangeValue
+      ? (this.hasStartInputTarget && this.startInputTarget.value) || (this.hasEndInputTarget && this.endInputTarget.value)
+      : (this.hasHiddenInputTarget && this.hiddenInputTarget.value)
+
+    this.clearTarget.style.display = hasValue ? "" : "none"
+  }
+
+  formatDate(date, time = null) {
+    if (!date) return ""
+    if (!(date instanceof Date)) return String(date)
+
+    const picker = this.pickerValue || "date"
+
+    switch (picker) {
+      case "year":
+        return String(date.getFullYear())
+
+      case "month":
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`
+
+      case "week": {
+        const week = DateHelper.getISOWeek(date)
+        const weekYear = DateHelper.getISOWeekYear(date)
+        return `${weekYear}-W${String(week).padStart(2, "0")}`
+      }
+
+      case "quarter": {
+        const quarter = Math.floor(date.getMonth() / 3) + 1
+        return `Q${quarter} ${date.getFullYear()}`
+      }
+
+      default: {
+        const dateStr = DateHelper.formatDataDate(date)
+        if (time && this.showTimeValue) {
+          const timeStr = this.showSecondsValue
+            ? `${time.hour}:${time.minute}:${time.second}`
+            : `${time.hour}:${time.minute}`
+          return `${dateStr} ${timeStr}`
+        }
+        return dateStr
+      }
+    }
+  }
+
+  handleClickOutside(event) {
+    // If the clicked element is no longer in the DOM (was re-rendered),
+    // don't close because it was likely an internal interaction (e.g., calendar cell click
+    // that triggered a re-render before this handler ran)
+    if (!document.body.contains(event.target)) {
+      return
+    }
+
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  dispatchChangeEvent(detail) {
+    this.element.dispatchEvent(new CustomEvent("hakumi:date-picker:change", {
+      bubbles: true,
+      detail
+    }))
+  }
+
+  dispatchOpenChange(open) {
+    this.element.dispatchEvent(new CustomEvent("hakumi:date-picker:open-change", {
+      bubbles: true,
+      detail: { open }
+    }))
+  }
+
+  // DateTime methods (for show_time: true)
+  selectHour(event) {
+    this.selectedTime = this.selectedTime || { hour: "00", minute: "00", second: "00" }
+    this.selectedTime.hour = event.currentTarget.dataset.value
+    this.updateTimeSelection()
+  }
+
+  selectMinute(event) {
+    this.selectedTime = this.selectedTime || { hour: "00", minute: "00", second: "00" }
+    this.selectedTime.minute = event.currentTarget.dataset.value
+    this.updateTimeSelection()
+  }
+
+  selectSecond(event) {
+    this.selectedTime = this.selectedTime || { hour: "00", minute: "00", second: "00" }
+    this.selectedTime.second = event.currentTarget.dataset.value
+    this.updateTimeSelection()
+  }
+
+  selectPeriod(event) {
+    this.selectedTime = this.selectedTime || { hour: "12", minute: "00", second: "00" }
+    this.selectedTime.period = event.currentTarget.dataset.value
+    this.updateTimeSelection()
+  }
+
+  updateTimeSelection() {
+    if (!this.selectedTime) return
+
+    // Update selected state on time cells
+    this.hourOptionTargets.forEach((el) => {
+      el.classList.toggle("hakumi-time-picker-cell-selected", el.dataset.value === this.selectedTime.hour)
+    })
+
+    this.minuteOptionTargets.forEach((el) => {
+      el.classList.toggle("hakumi-time-picker-cell-selected", el.dataset.value === this.selectedTime.minute)
+    })
+
+    this.secondOptionTargets.forEach((el) => {
+      el.classList.toggle("hakumi-time-picker-cell-selected", el.dataset.value === this.selectedTime.second)
+    })
+
+    if (this.hasPeriodOptionTarget) {
+      this.periodOptionTargets.forEach((el) => {
+        el.classList.toggle("hakumi-time-picker-cell-selected", el.dataset.value === this.selectedTime.period)
+      })
+    }
+  }
+
+  setNow() {
+    const now = new Date()
+
+    // Set both selected date and time
+    this.selectedDate = now
+    this.selectedTime = {
+      hour: String(now.getHours()).padStart(2, "0"),
+      minute: String(now.getMinutes()).padStart(2, "0"),
+      second: String(now.getSeconds()).padStart(2, "0")
+    }
+
+    // Update calendar visual to show today
+    const dateStr = DateHelper.format(now, ISO_DATE_FORMAT)
+    const calendar = this.element.querySelector(".hakumi-calendar")
+    if (calendar && calendar.hakumiComponent) {
+      calendar.hakumiComponent.api.setValue(dateStr)
+    }
+
+    this.updateTimeSelection()
+    this.confirmDateTime()
+  }
+
+  confirmDateTime() {
+    // Get selected date from stored date or calendar
+    let date = this.selectedDate
+    if (!date) {
+      const calendar = this.element.querySelector(".hakumi-calendar")
+      if (!calendar || !calendar.hakumiComponent) return
+
+      const selectedDateStr = calendar.hakumiComponent.api.getValue()
+      if (!selectedDateStr) return
+      date = DateHelper.parseDataDate(selectedDateStr).toDate()
+    }
+
+    // Combine date and time
+    const time = this.selectedTime || { hour: "00", minute: "00", second: "00" }
+
+    // Convert 12-hour to 24-hour format if period is set
+    let hour24 = parseInt(time.hour, 10)
+    if (time.period) {
+      if (time.period === "PM" && hour24 < 12) {
+        hour24 += 12
+      } else if (time.period === "AM" && hour24 === 12) {
+        hour24 = 0
+      }
+    }
+
+    // Create datetime by setting hours/minutes/seconds on the date
+    const datetime = new Date(date)
+    datetime.setHours(hour24)
+    datetime.setMinutes(parseInt(time.minute, 10))
+    datetime.setSeconds(parseInt(time.second, 10))
+
+    // Format as ISO for hidden input
+    const isoFormat = this.getISOFormat()
+    const isoValue = DateHelper.format(datetime, isoFormat)
+
+    // Set value (this updates both hidden and display inputs)
+    this.setValue(isoValue)
+    this.close()
+  }
+}