django-npdatetime 0.1.0__py3-none-any.whl

npdatetime_django/static/npdatetime_django/js/date_picker.min.js

@@ -0,0 +1,1381 @@
+import init, { NepaliDate } from "./pkg/npdatetime_wasm.js";
+
+export class NepaliDatePicker {
+  static initialized = false;
+  static instances = new Map();
+  static daysCache = new Map();
+
+  constructor(element, options = {}) {
+    if (typeof element === "string") {
+      element = document.querySelector(element);
+    }
+
+    if (!element) {
+      throw new Error("Invalid element provided to NepaliDatePicker");
+    }
+
+    this.input = element;
+    this.id = `npd-${Math.random().toString(36).substr(2, 9)}`;
+
+    this.options = {
+      mode: (element.dataset.mode || options.mode || "BS").toUpperCase(),
+      language: (
+        element.dataset.language ||
+        options.language ||
+        "en"
+      ).toLowerCase(),
+      format: options.format || "%Y-%m-%d",
+      minDate: options.minDate || null,
+      maxDate: options.maxDate || null,
+      disabledDates: options.disabledDates || [],
+      theme: element.dataset.theme || options.theme || "auto",
+      position: options.position || "auto",
+      closeOnSelect: options.closeOnSelect !== false,
+      showTodayButton: options.showTodayButton !== false,
+      showClearButton: options.showClearButton !== false,
+      onChange: options.onChange || null,
+      onOpen: options.onOpen || null,
+      onClose: options.onClose || null,
+      ...options,
+    };
+
+    this.selectedDate = null;
+    this.rangeStart = null;
+    this.rangeEnd = null;
+
+    const now = new Date();
+    this.selectedTime = {
+      hour:
+        options.defaultHour !== undefined
+          ? options.defaultHour
+          : now.getHours(),
+      minute:
+        options.defaultMinute !== undefined
+          ? options.defaultMinute
+          : now.getMinutes(),
+    };
+    this.viewDate = { year: 2081, month: 1 };
+    this.viewMode = "days";
+    this.isOpen = false;
+    this.switchRequest = null;
+    this.renderRequest = null;
+
+    this.init();
+    NepaliDatePicker.instances.set(element, this);
+  }
+
+  async init() {
+    if (!NepaliDatePicker.initialized) {
+      await init();
+      NepaliDatePicker.initialized = true;
+    }
+
+    this.setupInput();
+    this.createPicker();
+    this.attachEvents();
+    this.parseInitialValue();
+
+    if (!this.selectedDate) {
+      this.setDetailsFromToday();
+    }
+  }
+
+  setupInput() {
+    this.input.setAttribute("autocomplete", "off");
+    this.input.setAttribute("data-npd-id", this.id);
+    this.input.classList.add("npd-input");
+
+    if (!this.input.placeholder) {
+      this.input.placeholder =
+        this.options.mode === "BS" ? "Select Nepali Date" : "Select Date";
+    }
+  }
+
+  createPicker() {
+    const picker = document.createElement("div");
+    picker.className = "npd-picker";
+    picker.id = this.id;
+    picker.setAttribute("role", "dialog");
+    picker.setAttribute("aria-modal", "true");
+    picker.innerHTML = `
+      <div class="npd-header">
+        <button type="button" class="npd-title" aria-label="Change view">
+          <span class="npd-title-text"></span>
+          <svg class="npd-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+        <div class="npd-nav">
+          <button type="button" class="npd-nav-btn npd-prev" aria-label="Previous">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+          </button>
+          <button type="button" class="npd-nav-btn npd-next" aria-label="Next">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </button>
+        </div>
+      </div>
+      
+      <div class="npd-body">
+        <div class="npd-view npd-view-days"></div>
+        <div class="npd-view npd-view-months"></div>
+        <div class="npd-view npd-view-years"></div>
+      </div>
+      
+      <div class="npd-footer">
+        <div class="npd-mode-toggle">
+          <button type="button" class="npd-mode-btn ${this.options.mode === "BS" ? "active" : ""}" data-mode="BS">
+            <span>BS</span>
+          </button>
+          <button type="button" class="npd-mode-btn ${this.options.mode === "AD" ? "active" : ""}" data-mode="AD">
+            <span>AD</span>
+          </button>
+        </div>
+        <div class="npd-actions">
+          ${this.options.showClearButton ? '<button type="button" class="npd-btn npd-clear">Clear</button>' : ""}
+          <button type="button" class="npd-btn npd-yesterday">Yesterday</button>
+          ${this.options.showTodayButton ? '<button type="button" class="npd-btn npd-today">Today</button>' : ""}
+          <button type="button" class="npd-btn npd-tomorrow">Tomorrow</button>
+        </div>
+
+        <div class="npd-time-picker">
+          <div class="npd-time-field">
+            <label>Time</label>
+            <div class="npd-time-inputs">
+              <input type="number" class="npd-time-input npd-hour" min="0" max="23" value="${this.selectedTime.hour}" placeholder="HH">
+              <span>:</span>
+              <input type="number" class="npd-time-input npd-minute" min="0" max="59" value="${this.selectedTime.minute}" placeholder="mm">
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(picker);
+    this.picker = picker;
+    this.elements = {
+      title: picker.querySelector(".npd-title-text"),
+      daysView: picker.querySelector(".npd-view-days"),
+      monthsView: picker.querySelector(".npd-view-months"),
+      yearsView: picker.querySelector(".npd-view-years"),
+    };
+
+    this.createTooltip(); // Create tooltip element
+  }
+
+  createTooltip() {
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = "npd-tooltip";
+    this.picker.appendChild(this.tooltip);
+    this.longPressTimer = null;
+  }
+
+  showTooltip(element, text) {
+    if (!this.tooltip || !text) return;
+    this.tooltip.textContent = text;
+
+    // Position tooltip
+    const rect = element.getBoundingClientRect();
+    const pickerRect = this.picker.getBoundingClientRect();
+
+    // Calculate relative position within picker
+    const top = rect.top - pickerRect.top - this.tooltip.offsetHeight - 8;
+    const left =
+      rect.left - pickerRect.left + (rect.width - this.tooltip.offsetWidth) / 2;
+
+    this.tooltip.style.top = `${top}px`;
+    this.tooltip.style.left = `${left}px`;
+    this.tooltip.classList.add("active");
+  }
+
+  hideTooltip() {
+    if (this.tooltip) {
+      this.tooltip.classList.remove("active");
+    }
+  }
+
+  attachEvents() {
+    this.input.addEventListener("focus", () => this.open());
+    this.input.addEventListener("click", () => this.open());
+    this.input.addEventListener("keydown", (e) => this.handleInputKeydown(e));
+    this.input.addEventListener("input", (e) => this.handleInputChange(e));
+    this.input.addEventListener("blur", () => this.handleInputBlur());
+
+    this.picker
+      .querySelector(".npd-title")
+      .addEventListener("click", () => this.changeViewMode());
+    this.picker
+      .querySelector(".npd-prev")
+      .addEventListener("click", () => this.navigate(-1));
+    this.picker
+      .querySelector(".npd-next")
+      .addEventListener("click", () => this.navigate(1));
+
+    this.picker.querySelectorAll(".npd-mode-btn").forEach((btn) => {
+      btn.addEventListener("click", () => this.switchMode(btn.dataset.mode));
+    });
+
+    if (this.options.showTodayButton) {
+      this.picker
+        .querySelector(".npd-today")
+        .addEventListener("click", () => this.selectToday());
+    }
+
+    if (this.options.showClearButton) {
+      this.picker
+        .querySelector(".npd-clear")
+        .addEventListener("click", () => this.clear());
+    }
+
+    this.picker
+      .querySelector(".npd-yesterday")
+      .addEventListener("click", () => this.selectYesterday());
+    this.picker
+      .querySelector(".npd-tomorrow")
+      .addEventListener("click", () => this.selectTomorrow());
+
+    this.picker.querySelector(".npd-hour").addEventListener("input", (e) => {
+      let val = parseInt(e.target.value);
+      if (isNaN(val)) val = 0;
+      if (val < 0) val = 0;
+      if (val > 23) val = 23;
+      this.selectedTime.hour = val;
+      this.updateInput();
+    });
+
+    this.picker.querySelector(".npd-minute").addEventListener("input", (e) => {
+      let val = parseInt(e.target.value);
+      if (isNaN(val)) val = 0;
+      if (val < 0) val = 0;
+      if (val > 59) val = 59;
+      this.selectedTime.minute = val;
+      this.updateInput();
+    });
+
+    document.addEventListener("click", (e) => {
+      if (!this.picker.contains(e.target) && e.target !== this.input) {
+        this.close();
+      }
+    });
+
+    window.addEventListener("resize", () => {
+      if (this.isOpen) this.position();
+    });
+
+    window.addEventListener(
+      "scroll",
+      () => {
+        if (this.isOpen) this.position();
+      },
+      true,
+    );
+  }
+
+  handleInputKeydown(e) {
+    if (e.key === "Escape") {
+      this.close();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      this.open();
+    }
+  }
+
+  handleInputChange(e) {
+    // Prevent infinite loop if the event was triggered by our own updateInput
+    if (e.isTrusted === false && e.detail?.origin === "datepicker") return;
+
+    const value = e.target.value.trim();
+    if (!value) {
+      this.selectedDate = null;
+      this.render();
+      return;
+    }
+
+    try {
+      const [datePart, timePart] = value.split(" ");
+      let year, month, day;
+
+      // Try YYYY-MM-DD
+      if (datePart.includes("-")) {
+        [year, month, day] = datePart.split("-").map(Number);
+      } else if (datePart.length === 10) {
+        // Handle 2081/01/01 if user types slashes, though format option usually controls this
+        // For now let's assume standard format matches options.
+        // But simple split is safest for demo.
+        // If manual typing, we should be forgiving or strict.
+        // Let's reuse the parsing logic slightly.
+        [year, month, day] = datePart
+          .replace(/\//g, "-")
+          .split("-")
+          .map(Number);
+      }
+
+      if (!year || !month || !day) return; // Incomplete
+
+      // Parse Time
+      if (timePart) {
+        const [h, m] = timePart.split(":").map(Number);
+        if (!isNaN(h)) this.selectedTime.hour = h;
+        if (!isNaN(m)) this.selectedTime.minute = m;
+      }
+
+      let newDate;
+      if (this.options.mode === "BS") {
+        newDate = new NepaliDate(year, month, day);
+      } else {
+        newDate = NepaliDate.fromGregorian(year, month, day);
+      }
+
+      this.selectedDate = newDate;
+      this.viewDate = {
+        year: this.selectedDate.year,
+        month: this.selectedDate.month,
+      };
+
+      // Update time inputs in picker UI
+      const hourInput = this.picker.querySelector(".npd-hour");
+      const minInput = this.picker.querySelector(".npd-minute");
+      if (hourInput) hourInput.value = this.selectedTime.hour;
+      if (minInput) minInput.value = this.selectedTime.minute;
+
+      this.render();
+    } catch (err) {
+      // incomplete or invalid date, ignore until valid
+    }
+  }
+
+  parseInitialValue() {
+    const value = this.input.value.trim();
+    if (!value) return;
+
+    try {
+      // Split date and time
+      const [datePart, timePart] = value.split(" ");
+
+      let year, month, day;
+      if (datePart.includes("-")) {
+        [year, month, day] = datePart.split("-").map(Number);
+      } else {
+        // fallback or other format? assume YYYY-MM-DD for now
+        [year, month, day] = datePart.split("-").map(Number);
+      }
+
+      if (timePart) {
+        const [h, m] = timePart.split(":").map(Number);
+        this.selectedTime = {
+          hour: isNaN(h) ? 0 : h,
+          minute: isNaN(m) ? 0 : m,
+        };
+      }
+
+      if (this.options.mode === "BS") {
+        this.selectedDate = new NepaliDate(year, month, day);
+      } else {
+        this.selectedDate = NepaliDate.fromGregorian(year, month, day);
+      }
+      this.viewDate = {
+        year: this.selectedDate.year,
+        month: this.selectedDate.month,
+      };
+    } catch (e) {
+      console.warn("Invalid initial date value:", value);
+    }
+  }
+
+  setDetailsFromToday() {
+    try {
+      const today = NepaliDate.today();
+      if (this.options.mode === "BS") {
+        this.viewDate = { year: today.year, month: today.month };
+      } else {
+        const [y, m] = today.toGregorian();
+        this.viewDate = { year: y, month: m };
+      }
+    } catch (e) {
+      console.error("Failed to set default today date:", e);
+    }
+  }
+
+  open() {
+    if (this.isOpen) return;
+
+    this.isOpen = true;
+    this.picker.classList.add("active");
+    this.position();
+    this.render();
+
+    if (this.options.onOpen) {
+      this.options.onOpen(this);
+    }
+  }
+
+  close() {
+    if (!this.isOpen) return;
+
+    this.isOpen = false;
+    this.picker.classList.remove("active");
+
+    if (this.options.onClose) {
+      this.options.onClose(this);
+    }
+  }
+
+  position() {
+    const inputRect = this.input.getBoundingClientRect();
+    const pickerHeight = this.picker.offsetHeight || 400;
+    const spaceBelow = window.innerHeight - inputRect.bottom;
+    const spaceAbove = inputRect.top;
+
+    this.picker.style.left = `${inputRect.left}px`;
+    // Set picker width with a reasonable max-width instead of matching input width
+    // Min: 320px, Max: 400px to prevent overly wide pickers on full-width inputs
+    this.picker.style.width = `${Math.min(Math.max(inputRect.width, 320), 400)}px`;
+
+    if (
+      this.options.position === "top" ||
+      (this.options.position === "auto" &&
+        spaceBelow < pickerHeight &&
+        spaceAbove > spaceBelow)
+    ) {
+      this.picker.style.bottom = `${window.innerHeight - inputRect.top + 8}px`;
+      this.picker.style.top = "auto";
+      this.picker.classList.add("npd-position-top");
+    } else {
+      this.picker.style.top = `${inputRect.bottom + 8}px`;
+      this.picker.style.bottom = "auto";
+      this.picker.classList.remove("npd-position-top");
+    }
+  }
+
+  switchMode(mode) {
+    if (this.options.mode === mode) return;
+
+    // pending switch
+    if (this.switchRequest) {
+      cancelAnimationFrame(this.switchRequest);
+    }
+
+    this.switchRequest = requestAnimationFrame(() => {
+      this._performSwitchMode(mode);
+      this.switchRequest = null;
+    });
+  }
+
+  _performSwitchMode(mode) {
+    if (this.options.mode === mode) return;
+
+    this.options.mode = mode;
+    this.picker.querySelectorAll(".npd-mode-btn").forEach((btn) => {
+      btn.classList.toggle("active", btn.dataset.mode === mode);
+    });
+
+    try {
+      if (this.selectedDate) {
+        if (mode === "AD") {
+          const [y, m] = this.selectedDate.toGregorian();
+          this.viewDate = { year: y, month: m };
+        } else {
+          this.viewDate = {
+            year: this.selectedDate.year,
+            month: this.selectedDate.month,
+          };
+        }
+      } else {
+        // If no date is selected, convert the current view date
+        try {
+          if (mode === "AD") {
+            // BS -> AD: Use Day 15 to avoid backward drift (Day 1 usually maps to previous month)
+            const bsDate = new NepaliDate(
+              this.viewDate.year,
+              this.viewDate.month,
+              15,
+            );
+            const [y, m] = bsDate.toGregorian();
+            this.viewDate = { year: y, month: m };
+          } else {
+            // AD -> BS: Use Day 15
+            const bsDate = NepaliDate.fromGregorian(
+              this.viewDate.year,
+              this.viewDate.month,
+              15,
+            );
+            this.viewDate = { year: bsDate.year, month: bsDate.month };
+          }
+        } catch (e) {
+          console.error("Failed to convert view date on mode switch:", e);
+          this.setDetailsFromToday();
+        }
+      }
+    } catch (err) {
+      console.error("Switch mode error:", err);
+      this.setDetailsFromToday();
+    }
+
+    this.render();
+  }
+
+  changeViewMode() {
+    const modes = ["days", "months", "years"];
+    const currentIndex = modes.indexOf(this.viewMode);
+    this.viewMode = modes[(currentIndex + 1) % modes.length];
+    this.render();
+  }
+
+  navigate(direction) {
+    if (this.viewMode === "days") {
+      this.viewDate.month += direction;
+      if (this.viewDate.month > 12) {
+        this.viewDate.month = 1;
+        this.viewDate.year++;
+      } else if (this.viewDate.month < 1) {
+        this.viewDate.month = 12;
+        this.viewDate.year--;
+      }
+    } else if (this.viewMode === "months") {
+      this.viewDate.year += direction;
+    } else {
+      this.viewDate.year += direction * 12;
+    }
+    this.render();
+  }
+
+  render() {
+    if (this.renderRequest) {
+      cancelAnimationFrame(this.renderRequest);
+    }
+
+    this.renderRequest = requestAnimationFrame(() => {
+      this._performRender();
+      this.renderRequest = null;
+    });
+  }
+
+  _performRender() {
+    this.picker
+      .querySelectorAll(".npd-view")
+      .forEach((v) => v.classList.remove("active"));
+
+    if (this.viewMode === "days") {
+      this.renderDays();
+    } else if (this.viewMode === "months") {
+      this.renderMonths();
+    } else {
+      this.renderYears();
+    }
+  }
+
+  renderDays() {
+    let months;
+    if (this.options.mode === "BS") {
+      months =
+        this.options.language === "np"
+          ? [
+              "बैशाख",
+              "जेठ",
+              "असार",
+              "साउन",
+              "भदौ",
+              "असोज",
+              "कात्तिक",
+              "मंसिर",
+              "पुस",
+              "माघ",
+              "फागुन",
+              "चैत",
+            ]
+          : [
+              "Baisakh",
+              "Jestha",
+              "Ashadh",
+              "Shrawan",
+              "Bhadra",
+              "Ashwin",
+              "Kartik",
+              "Mangshir",
+              "Poush",
+              "Magh",
+              "Falgun",
+              "Chaitra",
+            ];
+    } else {
+      months = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ];
+    }
+
+    const weekdays =
+      this.options.language === "np"
+        ? ["आइत", "सोम", "मंगल", "बुध", "बिहि", "शुक्र", "शनि"]
+        : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+    if (this.options.mode === "BS") {
+      const year =
+        this.options.language === "np"
+          ? this.toNepaliNum(this.viewDate.year)
+          : this.viewDate.year;
+      this.elements.title.textContent = `${months[this.viewDate.month - 1]} ${year}`;
+    } else {
+      const date = new Date(this.viewDate.year, this.viewDate.month - 1);
+      this.elements.title.textContent = date.toLocaleDateString("en-US", {
+        month: "long",
+        year: "numeric",
+      });
+    }
+
+    let html = '<div class="npd-days-grid">';
+    weekdays.forEach((day, index) => {
+      let isHoliday = false;
+      if (this.options.mode === "BS") {
+        isHoliday = index === 6; // Saturday
+      } else {
+        isHoliday = index === 0; // Sunday
+      }
+      html += `<div class="npd-weekday ${isHoliday ? "holiday" : ""}">${day}</div>`;
+    });
+
+    if (this.options.mode === "BS") {
+      const firstDate = new NepaliDate(
+        this.viewDate.year,
+        this.viewDate.month,
+        1,
+      );
+      const [gy, gm, gd] = firstDate.toGregorian();
+      const startWeekday = new Date(gy, gm - 1, gd).getDay();
+      const daysInMonth = this.getDaysInMonth(
+        this.viewDate.year,
+        this.viewDate.month,
+      );
+
+      const prevMonth =
+        this.viewDate.month === 1 ? 12 : this.viewDate.month - 1;
+      const prevYear =
+        this.viewDate.month === 1 ? this.viewDate.year - 1 : this.viewDate.year;
+      const daysInPrevMonth = this.getDaysInMonth(prevYear, prevMonth);
+
+      for (let i = startWeekday - 1; i >= 0; i--) {
+        const day = daysInPrevMonth - i;
+        const currentWeekday = (startWeekday - 1 - i) % 7;
+        // Actually, we are counting down.
+        // startWeekday is the first day of CURRENT month.
+        // So the day before is startWeekday-1.
+        // If startWeekday is 0 (Sunday), loops runs for i=-1 which is false? No startWeekday=0 means loop doesn't run.
+        // If startWeekday is 3 (Wed), i runs 2,1,0.
+        // i=2: day before start
+        // Wait, startWeekday is 0..6.
+        // The cell index for "day before start" is `startWeekday - 1`.
+        // The cell index relative to 0 is `startWeekday - 1 - i`?
+        // Let's count forward positions in the grid.
+        // The grid fills 0 to startWeekday-1 with prev month.
+        // So cell position is `startWeekday - 1 - i`.
+        // If startWeekday is 3 (Wed, index 3). i=2. 3-1-2 = 0 (Sunday). Correct.
+        // i=1. 3-1-1 = 1 (Monday).
+        // i=0. 3-1-0 = 2 (Tuesday).
+
+        // Wait, startWeekday comes from .getDay(). 0=Sun, 6=Sat.
+        // In BS mode, holiday is 6 (Sat).
+        // So we just check if the cell position % 7 === 6.
+
+        const cellIndex = startWeekday - 1 - i;
+        const isHoliday = cellIndex % 7 === 6;
+
+        const dayText =
+          this.options.language === "np" ? this.toNepaliNum(day) : day;
+        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="-1">${dayText}</button>`;
+      }
+
+      const todayBS = NepaliDate.today();
+      const isCurrentYear = this.viewDate.year === todayBS.year;
+      const isCurrentMonth = this.viewDate.month === todayBS.month;
+
+      for (let day = 1; day <= daysInMonth; day++) {
+        let isSelected = false;
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        let isInRange = false;
+
+        const currentDayDate = new NepaliDate(
+          this.viewDate.year,
+          this.viewDate.month,
+          day,
+        );
+
+        if (this.options.isRange) {
+          isRangeStart = this.isSameDate(currentDayDate, this.rangeStart);
+          isRangeEnd = this.isSameDate(currentDayDate, this.rangeEnd);
+          isInRange = this.isDateInRange(currentDayDate);
+          isSelected = isRangeStart || isRangeEnd;
+        } else {
+          isSelected =
+            this.selectedDate?.year === this.viewDate.year &&
+            this.selectedDate?.month === this.viewDate.month &&
+            this.selectedDate?.day === day;
+        }
+
+        const isToday = isCurrentYear && isCurrentMonth && day === todayBS.day;
+
+        const currentWeekday = (startWeekday + day - 1) % 7;
+        const isHoliday = currentWeekday === 6; // Saturday in Nepal
+
+        const dayText =
+          this.options.language === "np" ? this.toNepaliNum(day) : day;
+
+        let classes = `npd-day ${isSelected ? "selected" : ""} ${isToday ? "today" : ""} ${isHoliday ? "holiday" : ""}`;
+        if (this.options.isRange) {
+          if (isRangeStart) classes += " range-start";
+          if (isRangeEnd) classes += " range-end";
+          if (isInRange) classes += " in-range";
+          if (isRangeStart && !this.rangeEnd) classes += " range-only";
+        }
+
+        const fullDate =
+          this.options.mode == "BS"
+            ? `${currentDayDate.year}-${String(currentDayDate.month).padStart(2, "0")}-${String(currentDayDate.day).padStart(2, "0")}`
+            : `${currentDayDate.year}-${String(currentDayDate.month).padStart(2, "0")}-${String(currentDayDate.day).padStart(2, "0")}`;
+
+        let details = fullDate;
+        try {
+          if (typeof currentDayDate.tithi === "function") {
+            const tithi = currentDayDate.tithi();
+            if (tithi) {
+              details += `\n${tithi}`;
+            }
+          }
+        } catch (e) {
+          // Tithi calculation failed or feature disabled
+        }
+
+        html += `<button type="button" class="${classes}" data-day="${day}" data-month-offset="0" data-details="${details}">${dayText}</button>`;
+      }
+
+      // Next month overflow
+      const totalCells = 42;
+      const currentCells = startWeekday + daysInMonth;
+      for (let day = 1; day <= totalCells - currentCells; day++) {
+        const cellIndex = currentCells + day - 1;
+        const isHoliday = cellIndex % 7 === 6;
+
+        const dayText =
+          this.options.language === "np" ? this.toNepaliNum(day) : day;
+        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="1">${dayText}</button>`;
+      }
+    } else {
+      const date = new Date(this.viewDate.year, this.viewDate.month - 1, 1);
+      const startWeekday = date.getDay();
+      const daysInMonth = new Date(
+        this.viewDate.year,
+        this.viewDate.month,
+        0,
+      ).getDate();
+
+      const daysInPrevMonth = new Date(
+        this.viewDate.year,
+        this.viewDate.month - 1,
+        0,
+      ).getDate();
+
+      for (let i = startWeekday - 1; i >= 0; i--) {
+        const cellIndex = startWeekday - 1 - i;
+        const isHoliday = cellIndex % 7 === 0; // Sunday logic for AD
+        const day = daysInPrevMonth - i;
+        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="-1">${day}</button>`;
+      }
+
+      const [selY, selM, selD] = this.selectedDate
+        ? this.selectedDate.toGregorian()
+        : [null, null, null];
+
+      const today = new Date();
+      const isCurrentYear = this.viewDate.year === today.getFullYear();
+      const isCurrentMonth = this.viewDate.month === today.getMonth() + 1;
+
+      for (let day = 1; day <= daysInMonth; day++) {
+        let isSelected = false;
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        let isInRange = false;
+
+        // Construct comparable object for AD (using existing helper logic or simple object)
+        // Since we store rangeStart/End as NepaliDate objects or wrappers?
+        // Wait, rangeStart is a NepaliDate object from selectDate.
+        // But in AD mode, selectDate creates a NepaliDate wrapper around the AD date via .fromGregorian().
+        // So comparison logic `isSameDate` works if `currentDayDate` is also a NepaliDate.
+
+        const currentAdDate = new Date(
+          this.viewDate.year,
+          this.viewDate.month - 1,
+          day,
+        );
+        const currentDayDate = NepaliDate.fromGregorian(
+          currentAdDate.getFullYear(),
+          currentAdDate.getMonth() + 1,
+          currentAdDate.getDate(),
+        );
+
+        if (this.options.isRange) {
+          isRangeStart = this.isSameDate(currentDayDate, this.rangeStart);
+          isRangeEnd = this.isSameDate(currentDayDate, this.rangeEnd);
+          isInRange = this.isDateInRange(currentDayDate);
+          isSelected = isRangeStart || isRangeEnd;
+        } else {
+          isSelected =
+            selY === this.viewDate.year &&
+            selM === this.viewDate.month &&
+            selD === day;
+        }
+
+        const isToday =
+          isCurrentYear && isCurrentMonth && day === today.getDate();
+
+        const currentWeekday = (startWeekday + day - 1) % 7;
+        const isHoliday = currentWeekday === 0; // Sunday for AD
+
+        let classes = `npd-day ${isSelected ? "selected" : ""} ${isToday ? "today" : ""} ${isHoliday ? "holiday" : ""}`;
+        if (this.options.isRange) {
+          if (isRangeStart) classes += " range-start";
+          if (isRangeEnd) classes += " range-end";
+          if (isInRange) classes += " in-range";
+        }
+
+        html += `<button type="button" class="${classes}" data-day="${day}" data-month-offset="0">${day}</button>`;
+      }
+
+      // Next month overflow
+      const totalCells = 42;
+      const currentCells = startWeekday + daysInMonth;
+      for (let day = 1; day <= totalCells - currentCells; day++) {
+        const cellIndex = currentCells + day - 1;
+        const isHoliday = cellIndex % 7 === 0; // Sunday for AD
+        html += `<button type="button" class="npd-day npd-overflow ${isHoliday ? "holiday" : ""}" data-day="${day}" data-month-offset="1">${day}</button>`;
+      }
+    }
+
+    html += "</div>";
+    this.elements.daysView.innerHTML = html;
+    this.elements.daysView.classList.add("active");
+
+    this.elements.daysView
+      .querySelectorAll(".npd-day[data-day]")
+      .forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          const day = parseInt(btn.dataset.day);
+          const offset = parseInt(btn.dataset.monthOffset || "0");
+
+          if (offset !== 0) {
+            let newMonth = this.viewDate.month + offset;
+            let newYear = this.viewDate.year;
+
+            if (newMonth > 12) {
+              newMonth = 1;
+              newYear++;
+            } else if (newMonth < 1) {
+              newMonth = 12;
+              newYear--;
+            }
+
+            this.viewDate = { year: newYear, month: newMonth };
+            this.render();
+          } else {
+            this.selectDate(day);
+          }
+        });
+
+        // Tooltip Events
+        this.elements.daysView
+          .querySelectorAll(".npd-day[data-details]")
+          .forEach((btn) => {
+            // Desktop Hover
+            btn.addEventListener("mouseenter", () => {
+              this.showTooltip(btn, btn.dataset.details);
+            });
+
+            btn.addEventListener("mouseleave", () => {
+              this.hideTooltip();
+            });
+
+            // Mobile Long Press
+            btn.addEventListener(
+              "touchstart",
+              (e) => {
+                // e.preventDefault(); // Don't block click
+                this.longPressTimer = setTimeout(() => {
+                  this.showTooltip(btn, btn.dataset.details);
+                }, 500); // 500ms long press
+              },
+              { passive: true },
+            );
+
+            btn.addEventListener("touchend", () => {
+              if (this.longPressTimer) clearTimeout(this.longPressTimer);
+              this.hideTooltip();
+            });
+
+            btn.addEventListener("touchmove", () => {
+              if (this.longPressTimer) clearTimeout(this.longPressTimer);
+              this.hideTooltip();
+            });
+          });
+      });
+  }
+
+  renderMonths() {
+    let months;
+    if (this.options.mode === "BS") {
+      months =
+        this.options.language === "np"
+          ? [
+              "बैशाख",
+              "जेठ",
+              "असार",
+              "साउन",
+              "भदौ",
+              "असोज",
+              "कात्तिक",
+              "मंसिर",
+              "पुस",
+              "माघ",
+              "फागुन",
+              "चैत",
+            ]
+          : [
+              "Baisakh",
+              "Jestha",
+              "Ashadh",
+              "Shrawan",
+              "Bhadra",
+              "Ashwin",
+              "Kartik",
+              "Mangshir",
+              "Poush",
+              "Magh",
+              "Falgun",
+              "Chaitra",
+            ];
+    } else {
+      months = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ];
+    }
+
+    const year =
+      this.options.language === "np"
+        ? this.toNepaliNum(this.viewDate.year)
+        : this.viewDate.year;
+    this.elements.title.textContent = year;
+
+    let html = '<div class="npd-months-grid">';
+    months.forEach((month, index) => {
+      const isSelected =
+        this.selectedDate?.year === this.viewDate.year &&
+        this.selectedDate?.month === index + 1;
+      html += `<button type="button" class="npd-month ${isSelected ? "selected" : ""}" data-month="${index + 1}">${month}</button>`;
+    });
+    html += "</div>";
+
+    this.elements.monthsView.innerHTML = html;
+    this.elements.monthsView.classList.add("active");
+
+    this.elements.monthsView.querySelectorAll(".npd-month").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.viewDate.month = parseInt(btn.dataset.month);
+        this.viewMode = "days";
+        this.render();
+      });
+    });
+  }
+
+  renderYears() {
+    const startYear = Math.floor(this.viewDate.year / 12) * 12;
+    this.elements.title.textContent = `${startYear} - ${startYear + 11}`;
+
+    let html = '<div class="npd-years-grid">';
+    for (let i = 0; i < 12; i++) {
+      const year = startYear + i;
+      const isSelected = this.selectedDate?.year === year;
+      const yearText =
+        this.options.language === "np" ? this.toNepaliNum(year) : year;
+      html += `<button type="button" class="npd-year ${isSelected ? "selected" : ""}" data-year="${year}">${yearText}</button>`;
+    }
+    html += "</div>";
+
+    this.elements.yearsView.innerHTML = html;
+    this.elements.yearsView.classList.add("active");
+
+    this.elements.yearsView.querySelectorAll(".npd-year").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.viewDate.year = parseInt(btn.dataset.year);
+        this.viewMode = "months";
+        this.render();
+      });
+    });
+  }
+
+  isSameDate(d1, d2) {
+    if (!d1 || !d2) return false;
+    return d1.year === d2.year && d1.month === d2.month && d1.day === d2.day;
+  }
+
+  compareDates(d1, d2) {
+    if (!d1 || !d2) return 0;
+    if (d1.year !== d2.year) return d1.year - d2.year;
+    if (d1.month !== d2.month) return d1.month - d2.month;
+    return d1.day - d2.day;
+  }
+
+  isDateInRange(date) {
+    if (!this.rangeStart || !this.rangeEnd || !date) return false;
+    return (
+      this.compareDates(date, this.rangeStart) > 0 &&
+      this.compareDates(date, this.rangeEnd) < 0
+    );
+  }
+
+  selectDate(day) {
+    try {
+      let selected;
+      if (this.options.mode === "BS") {
+        selected = new NepaliDate(this.viewDate.year, this.viewDate.month, day);
+      } else {
+        selected = NepaliDate.fromGregorian(
+          this.viewDate.year,
+          this.viewDate.month,
+          day,
+        );
+      }
+
+      if (this.options.isRange) {
+        if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
+          this.rangeStart = selected;
+          this.rangeEnd = null;
+        } else {
+          if (this.compareDates(selected, this.rangeStart) < 0) {
+            this.rangeEnd = this.rangeStart;
+            this.rangeStart = selected;
+          } else {
+            this.rangeEnd = selected;
+          }
+          if (this.options.closeOnSelect) {
+            this.close();
+          }
+        }
+
+        // Update view to maintain visibility if range spans months?
+        // Actually typically we don't jump view on second click unless necessary.
+
+        this.updateInput();
+        this.render();
+
+        if (this.options.onChange) {
+          this.options.onChange(
+            { start: this.rangeStart, end: this.rangeEnd },
+            this,
+          );
+        }
+      } else {
+        this.selectedDate = selected;
+        this.updateInput();
+        if (this.options.closeOnSelect) {
+          this.close();
+        } else {
+          this.render();
+        }
+
+        if (this.options.onChange) {
+          this.options.onChange(this.selectedDate, this);
+        }
+      }
+    } catch (e) {
+      console.error("Invalid date selection:", e);
+    }
+  }
+
+  selectToday() {
+    this.selectedDate = NepaliDate.today();
+    this.viewDate = {
+      year: this.selectedDate.year,
+      month: this.selectedDate.month,
+    };
+    this.updateInput();
+    this.close();
+
+    if (this.options.onChange) {
+      this.options.onChange(this.selectedDate, this);
+    }
+  }
+
+  selectYesterday() {
+    const today = NepaliDate.today();
+    this.selectedDate = today.addDays(-1);
+    this.viewDate = {
+      year: this.selectedDate.year,
+      month: this.selectedDate.month,
+    };
+    this.updateInput();
+    this.close();
+
+    if (this.options.onChange) {
+      this.options.onChange(this.selectedDate, this);
+    }
+  }
+
+  selectTomorrow() {
+    const today = NepaliDate.today();
+    this.selectedDate = today.addDays(1);
+    this.viewDate = {
+      year: this.selectedDate.year,
+      month: this.selectedDate.month,
+    };
+    this.updateInput();
+    this.close();
+
+    if (this.options.onChange) {
+      this.options.onChange(this.selectedDate, this);
+    }
+  }
+
+  clear() {
+    this.selectedDate = null;
+    this.input.value = "";
+    this.close();
+
+    if (this.options.onChange) {
+      this.options.onChange(null, this);
+    }
+  }
+
+  updateInput() {
+    if (this.options.isRange) {
+      if (!this.rangeStart) {
+        this.input.value = "";
+        return;
+      }
+
+      let startStr = "";
+      let endStr = "";
+
+      if (this.options.mode === "BS") {
+        startStr = this.rangeStart.format(this.options.format);
+        if (this.rangeEnd) endStr = this.rangeEnd.format(this.options.format);
+      } else {
+        const [y1, m1, d1] = this.rangeStart.toGregorian();
+        startStr = `${y1}-${String(m1).padStart(2, "0")}-${String(d1).padStart(2, "0")}`;
+
+        if (this.rangeEnd) {
+          const [y2, m2, d2] = this.rangeEnd.toGregorian();
+          endStr = `${y2}-${String(m2).padStart(2, "0")}-${String(d2).padStart(2, "0")}`;
+        }
+      }
+
+      this.input.value = endStr ? `${startStr} to ${endStr}` : startStr;
+    } else {
+      if (!this.selectedDate) {
+        this.input.value = "";
+        return;
+      }
+
+      const timeStr = `${String(this.selectedTime.hour).padStart(2, "0")}:${String(this.selectedTime.minute).padStart(2, "0")}`;
+
+      if (this.options.mode === "BS") {
+        let value = this.selectedDate.format(this.options.format);
+        // Always append time for now if not present, because our format engine is simple
+        // and user expects time if they see the picker
+        if (!value.match(/\d{2}:\d{2}/)) {
+          value += ` ${timeStr}`;
+        }
+        this.input.value = value;
+      } else {
+        const [y, m, d] = this.selectedDate.toGregorian();
+        this.input.value = `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")} ${timeStr}`;
+      }
+    }
+
+    this.input.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        detail: { origin: "datepicker" },
+      }),
+    );
+    this.input.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        detail: { origin: "datepicker" },
+      }),
+    );
+  }
+
+  getDaysInMonth(year, month) {
+    const key = `${year}-${month}`;
+    if (NepaliDatePicker.daysCache.has(key)) {
+      return NepaliDatePicker.daysCache.get(key);
+    }
+
+    try {
+      for (let d = 32; d >= 27; d--) {
+        try {
+          new NepaliDate(year, month, d);
+          NepaliDatePicker.daysCache.set(key, d);
+          return d;
+        } catch (e) {}
+      }
+    } catch (e) {}
+    return 30;
+  }
+
+  toNepaliNum(num) {
+    const map = ["०", "१", "२", "३", "४", "५", "६", "७", "८", "९"];
+    return String(num).replace(/\d/g, (d) => map[+d]);
+  }
+
+  destroy() {
+    this.close();
+    this.picker.remove();
+    this.input.classList.remove("npd-input");
+    this.input.removeAttribute("data-npd-id");
+    NepaliDatePicker.instances.delete(this.input);
+  }
+
+  handleInputBlur() {
+    const value = this.input.value.trim();
+    if (!value) {
+      this.updateInput();
+      return;
+    }
+
+    try {
+      const [datePart, timePart] = value.split(" ");
+      let year, month, day;
+
+      if (datePart.includes("-")) {
+        [year, month, day] = datePart.split("-").map(Number);
+      } else {
+        [year, month, day] = datePart
+          .replace(/\//g, "-")
+          .split("-")
+          .map(Number);
+      }
+
+      if (!year || !month || !day) {
+        this.updateInput();
+        return;
+      }
+
+      // Smart Rollover Logic
+      let yearOffset = 0;
+      let monthOffset = 0;
+
+      // Handle Month Overflow first (e.g. Month 13 -> Year + 1, Month 1)
+      while (month > 12) {
+        month -= 12;
+        yearOffset++;
+      }
+      while (month < 1) {
+        month += 12;
+        yearOffset--;
+      }
+      year += yearOffset;
+
+      // Handle Day Overflow
+      // We need loop because adding days might push us through multiple months (e.g. day 90)
+      // But for simple "32", one check is usually enough. Let's do a robust loop.
+      let maxDays = 32; // safe upper bound to start checking
+      let safety = 0;
+
+      while (true && safety < 12) {
+        // limit 1 year rollover to prevent infinite loops
+        // Get max days for current Year/Month
+        if (this.options.mode === "BS") {
+          maxDays = this.getDaysInMonth(year, month);
+        } else {
+          maxDays = new Date(year, month, 0).getDate();
+        }
+
+        if (day <= maxDays) break;
+
+        day -= maxDays;
+        month++;
+        if (month > 12) {
+          month = 1;
+          year++;
+        }
+        safety++;
+      }
+
+      // Parse Time (preserve existing logic)
+      if (timePart) {
+        const [h, m] = timePart.split(":").map(Number);
+        if (!isNaN(h)) this.selectedTime.hour = h;
+        if (!isNaN(m)) this.selectedTime.minute = m;
+      }
+
+      let newDate;
+      if (this.options.mode === "BS") {
+        newDate = new NepaliDate(year, month, day);
+      } else {
+        newDate = NepaliDate.fromGregorian(year, month, day);
+      }
+
+      this.selectedDate = newDate;
+      this.viewDate = {
+        year: this.selectedDate.year,
+        month: this.selectedDate.month,
+      };
+      this.render();
+      this.updateInput(); // Format it nicely
+    } catch (e) {
+      // If totally invalid, revert
+      this.updateInput();
+    }
+  }
+
+  static init(
+    selector = 'input[type="npdate"], input[data-npdate]',
+    options = {},
+  ) {
+    const inputs = document.querySelectorAll(selector);
+    inputs.forEach((input) => {
+      if (!NepaliDatePicker.instances.has(input)) {
+        new NepaliDatePicker(input, options);
+      }
+    });
+  }
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () =>
+      NepaliDatePicker.init(),
+    );
+  } else {
+    NepaliDatePicker.init();
+  }
+}
+
+export default NepaliDatePicker;
+
+
+