Date Picker with Cally & Daisy & Stimulus

cally_controller.js

// Make sure to install cally via npm, CDN or importmap.
// Example usage: <input type="date" class="input" name="dob" data-controller="cally">

import { Controller } from "@hotwired/stimulus";
import "cally";

export default class extends Controller {
  connect() {
    this.element.addEventListener("click", this.open.bind(this));
  }

  open(event) {
    event.preventDefault();

    let { datePickerContainer, datePicker } = this.#buildDatePickerContainer();
    this.#appendPopoverToBody(datePickerContainer);
    this.#listenToChangeTo(datePicker, datePickerContainer);

    datePickerContainer.togglePopover();
  }

  #buildDatePickerContainer() {
    let datePickerContainer = document.createElement("div");
    const { bottom, left } = this.element.getBoundingClientRect();

    datePickerContainer.className =
      "dropdown bg-base-100 rounded-box shadow-lg absolute";
    datePickerContainer.setAttribute("popover", "");
    datePickerContainer.style.top = `${bottom + window.scrollY}px`;
    datePickerContainer.style.left = `${left + window.scrollY}px`;
    datePickerContainer.innerHTML = this.#buildDatePicker();

    return {
      datePickerContainer: datePickerContainer,
      datePicker: datePickerContainer.children[0],
    };
  }

  #appendPopoverToBody(popover) {
    document.body.appendChild(popover);
    this.element.popovertarget = popover;
  }

  #listenToChangeTo(datePicker, datePickerContainer) {
    datePicker.addEventListener("change", (e) => {
      this.#selectValue(datePicker, datePickerContainer);
    });
  }

  #selectValue(datePicker, datePickerContainer) {
    this.element.value = datePicker.value;
    datePickerContainer.togglePopover();

    setTimeout(() => {
      datePicker.remove();
    }, 200);
  }

  #buildDatePicker() {
    return `
    <calendar-date class="cally">
      <svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
      <svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
      <calendar-month></calendar-month>
    </calendar-date>
    `;
  }
}

Screen.Recording.2025-03-21.at.6.24.46.PM.mp4

Reference:

• https://daisyui.com/components/calendar/#cally-calendar-example