https://ironhorse.sassnet.com/assets/controllers/date_selector_controller-0854299d.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["dateDisplay"]
5  static values = { 
6    currentDate: String,
7    reportType: String, // "day" or "month"
8    basePath: String 
9  }
10
11  connect() {
12    this.createDatePicker()
13  }
14
15  createDatePicker() {
16    // Create the hidden input
17    this.input = document.createElement('input')
18    this.input.type = this.reportTypeValue === "month" ? "month" : "date"
19    this.input.value = this.formatDateForInput()
20    this.input.style.position = 'absolute'
21    this.input.style.opacity = '0'
22    this.input.style.pointerEvents = 'none'
23    
24    // Add picker to the controller element
25    this.element.appendChild(this.input)
26    
27    // Add event listener for when date changes
28    this.input.addEventListener('change', (e) => {
29      this.navigateToDate(e.target.value)
30    })
31  }
32
33  formatDateForInput() {
34    const date = new Date(this.currentDateValue)
35    if (this.reportTypeValue === "month") {
36      return date.toISOString().slice(0, 7)
37    } else {
38      return date.toISOString().slice(0, 10)
39    }
40  }
41
42  showDatePicker() {
43    // Try showPicker first (newer browsers)
44    if (typeof this.input.showPicker === 'function') {
45      try {
46        this.input.showPicker()
47      } catch (e) {
48        // Fallback to click if showPicker fails
49        this.input.click()
50      }
51    } else {
52      // Fallback for older browsers
53      this.input.click()
54    }
55  }
56
57  navigateToDate(dateString) {
58    if (!dateString) return
59    
60    // Preserve existing URL parameters
61    const url = new URL(window.location)
62    const params = new URLSearchParams(url.search)
63    
64    if (this.reportTypeValue === "month") {
65      // Convert month (YYYY-MM) to full date (YYYY-MM-DD) by adding first day of month
66      const fullDate = dateString + '-01'
67      params.set('date', fullDate)
68    } else {
69      params.set('date', dateString)
70    }
71    
72    // Navigate to the new URL
73    window.location.href = `${this.basePathValue}?${params.toString()}`
74  }
75}