shadcn-ui 0.0.13 → 0.0.15

data/app/javascript/controllers/ui/date-picker_controller.js

@@ -0,0 +1,766 @@
+// Imported from:  https://github.com/airblade/stimulus-datepicker/blob/main/src/datepicker.js
+
+import { Controller } from "@hotwired/stimulus";
+import IsoDate from "utils/iso_date";
+import { useClickOutside } from "stimulus-use";
+
+// All dates are local, not UTC.
+export default class UIDatePickerController extends Controller {
+  static targets = [
+    "input",
+    "hidden",
+    "toggle",
+    "calendar",
+    "month",
+    "year",
+    "prevMonth",
+    "today",
+    "nextMonth",
+    "days",
+  ];
+
+  static values = {
+    date: String,
+    month: String,
+    year: String,
+    min: String,
+    max: String,
+    isCalendarOpen: { type: Boolean, default: false },
+    isSelectOpen: { type: Boolean, default: false },
+    format: { type: String, default: "%Y-%m-%d" },
+    firstDayOfWeek: { type: Number, default: 1 },
+    dayNameLength: { type: Number, default: 2 },
+    allowWeekends: { type: Boolean, default: true },
+    monthJump: { type: String, default: "dayOfMonth" },
+    disallow: Array,
+    text: Object,
+    locales: { type: Array, default: ["default"] },
+  };
+
+  static defaultTextValue = {
+    underflow: "",
+    overflow: "",
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    today: "Today",
+    chooseDate: "Choose Date",
+    changeDate: "Change Date",
+  };
+
+  text(key) {
+    return { ...this.constructor.defaultTextValue, ...this.textValue }[key];
+  }
+
+  connect() {
+    useClickOutside(this);
+    if (!this.hasHiddenTarget) this.addHiddenInput();
+    this.addInputAction();
+    this.addToggleAction();
+    this.setToggleAriaLabel();
+    this.dateValue = this.validate(this.inputTarget.textContent)
+      ? ""
+      : this.inputTarget.textContent;
+  }
+
+  disconnect() {
+    this.isCalendarOpenValue = false;
+  }
+
+  dateValueChanged(value, previousValue) {
+    if (!this.hasHiddenTarget) return;
+    const dispatchChangeEvent = value != this.hiddenTarget.value;
+    this.hiddenTarget.value = value;
+    // this.inputTarget.value = this.format(value)
+    this.inputTarget.textContent = value || "Pick a date";
+    // Trigger change event on input when user selects date from picker.
+    // http://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+    if (dispatchChangeEvent) this.inputTarget.dispatchEvent(new Event("change"));
+    this.validate(value);
+  }
+
+  validate(dateStr) {
+    this.validationMessage(dateStr);
+  }
+
+  validationMessage(dateStr) {
+    if (!dateStr) return "";
+    const isoDate = new IsoDate(dateStr);
+    return this.rangeUnderflow(isoDate)
+      ? this.underflowMessage()
+      : this.rangeOverflow(isoDate)
+      ? this.overflowMessage()
+      : "";
+  }
+
+  underflowMessage() {
+    return this.text("underflow").replace("%s", this.format(this.minValue));
+  }
+
+  overflowMessage() {
+    return this.text("overflow").replace("%s", this.format(this.maxValue));
+  }
+
+  addHiddenInput() {
+    this.inputTarget.insertAdjacentHTML(
+      "afterend",
+      `
+      <input type="hidden"
+            name="${this.inputTarget.getAttribute("name")}"
+            value="${this.inputTarget.textContent}"
+            data-ui--date-picker-target="hidden"/>
+    `,
+    );
+  }
+
+  addInputAction() {
+    this.addAction(this.inputTarget, "ui--date-picker#update");
+  }
+
+  addToggleAction() {
+    if (!this.hasToggleTarget) return;
+
+    let action = "click->ui--date-picker#toggle";
+    if (!(this.toggleTarget instanceof HTMLButtonElement))
+      action += " keydown->ui--date-picker#toggle";
+
+    this.addAction(this.toggleTarget, action);
+  }
+
+  addAction(element, action) {
+    if ("action" in element.dataset) {
+      element.dataset.action += ` ${action}`;
+    } else {
+      element.dataset.action = action;
+    }
+  }
+
+  setToggleAriaLabel(value = this.text("chooseDate")) {
+    if (!this.hasToggleTarget) return;
+    this.toggleTarget.setAttribute("aria-label", value);
+  }
+
+  update() {
+    const dateStr = this.parse(this.inputTarget.value);
+    if (dateStr != "") this.dateValue = dateStr;
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.type == "keydown" && ![" ", "Enter"].includes(event.key)) return;
+    this.hasCalendarTarget ? this.close(true) : this.open(true);
+  }
+
+  close(animate) {
+    if (animate) {
+      this.calendarTarget.classList.add("fade-out");
+      if (this.hasCssAnimation(this.calendarTarget)) {
+        this.calendarTarget.onanimationend = (e) => e.target.remove();
+      } else {
+        this.calendarTarget.remove();
+      }
+    } else {
+      this.calendarTarget.remove();
+    }
+    this.isCalendarOpenValue = false;
+    this.toggleTarget.focus();
+  }
+
+  open(animate, isoDate = this.initialIsoDate()) {
+    this.isCalendarOpenValue = true;
+    this.render(isoDate, animate);
+    this.focusDate(isoDate);
+  }
+
+  // Returns the date to focus on initially.  This is `dateValue` if given
+  // or today.  Whichever is used, it is clamped to `minValue` and/or `maxValue`
+  // dates if given.
+  initialIsoDate() {
+    return this.clamp(new IsoDate(this.dateValue));
+  }
+
+  clamp(isoDate) {
+    return this.rangeUnderflow(isoDate)
+      ? new IsoDate(this.minValue)
+      : this.rangeOverflow(isoDate)
+      ? new IsoDate(this.maxValue)
+      : isoDate;
+  }
+
+  rangeUnderflow(isoDate) {
+    return this.hasMinValue && isoDate.before(new IsoDate(this.minValue));
+  }
+
+  rangeOverflow(isoDate) {
+    return this.hasMaxValue && isoDate.after(new IsoDate(this.maxValue));
+  }
+
+  isOutOfRange(isoDate) {
+    return this.rangeUnderflow(isoDate) || this.rangeOverflow(isoDate);
+  }
+
+  clickOutside(event) {
+    if (this.isCalendarOpenValue) event.preventDefault();
+    if (!this.isCalendarOpenValue) return;
+    if (event.target.closest('[data-ui--date-picker-target="calendar"]')) return;
+    if (this.isSelectOpenValue) return;
+    this.close(true);
+  }
+
+  // To track option is clicked
+  clickOption() {
+    this.isSelectOpenValue = true;
+  }
+
+  monthSelect(event) {
+    this.monthValue = event.target.textContent;
+    this.redraw();
+    setTimeout(() => {
+      this.isSelectOpenValue = false;
+    }, 500);
+  }
+
+  yearSelect(event) {
+    this.yearValue = event.target.textContent;
+    this.redraw();
+    setTimeout(() => {
+      this.isSelectOpenValue = false;
+    }, 500);
+  }
+
+  redraw() {
+    const isoDate = this.dateFromMonthYearSelectsAndDayGrid();
+    this.close(false);
+    this.open(false, isoDate);
+  }
+
+  gotoPrevMonth() {
+    const isoDate = this.dateFromMonthYearSelectsAndDayGrid();
+    const previousMonthDate = isoDate.previousMonth(this.monthJumpValue == "dayOfMonth");
+    this.monthValue = previousMonthDate.mm;
+    this.yearValue = previousMonthDate.yyyy;
+    this.close(false);
+    this.open(false, previousMonthDate);
+    this.prevMonthTarget.focus();
+  }
+
+  gotoNextMonth() {
+    const isoDate = this.dateFromMonthYearSelectsAndDayGrid();
+    const nextMonthDate = isoDate.nextMonth(this.monthJumpValue == "dayOfMonth");
+    this.monthValue = nextMonthDate.mm;
+    this.yearValue = nextMonthDate.yyyy;
+    this.close(false);
+    this.open(false, nextMonthDate);
+    this.nextMonthTarget.focus();
+  }
+
+  gotoToday() {
+    this.close(false);
+    this.open(false, new IsoDate());
+    this.todayTarget.focus();
+  }
+
+  // Returns a date where the month and year come from the dropdowns
+  // and the day of the month from the grid.
+  // @return [IsoDate]
+  dateFromMonthYearSelectsAndDayGrid() {
+    const isoDate = this.initialIsoDate();
+    this.yearValue ||= isoDate.yyyy;
+    this.monthValue ||= isoDate.mm;
+
+    let day = this.daysTarget.querySelector('button[tabindex="0"] time').textContent;
+
+    const daysInMonth = IsoDate.daysInMonth(+this.monthValue, +this.yearValue);
+    if (day > daysInMonth) day = daysInMonth;
+
+    return new IsoDate(this.yearValue, this.monthValue, day);
+  }
+
+  // Generates the HTML for the calendar and inserts it into the DOM.
+  //
+  // Does not focus the given date.
+  //
+  // @param isoDate [IsoDate] the date of interest
+  render(isoDate, animate) {
+    const cal = `<div class="absolute z-10 p-3 rounded-md border bg-white" data-ui--date-picker-target="calendar" data-action="keydown->ui--date-picker#key" role="dialog" aria-modal="true" aria-label="${this.text(
+      "chooseDate",
+    )}">
+      <div class="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 overscroll-contain">
+        <div class="space-y-4">
+          <div class="flex justify-center relative items-center">
+            <div class="flex items-center">
+              <button data-ui--date-picker-target="prevMonth" data-action="ui--date-picker#gotoPrevMonth" title="${this.text(
+                "previousMonth",
+              )}" aria-label="${this.text("previousMonth")}"
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left h-4 w-4"><path d="m15 18-6-6 6-6"></path></svg>
+              </button>
+            </div>
+            <div class="flex">
+              <div data-controller="ui--select" data-ui--select-target="wrapper" data-action="keydown->ui--select#key keydown.enter->ui--date-picker#clickOption click->ui--date-picker#clickOption change->ui--date-picker#monthSelect">
+                <div class="relative">
+                  <button data-action="ui--select#toggle" data-ui--date-picker-target="month" class="py-2 px-3 rounded-md flex items-center justify-between w-full text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+                    <span data-ui--select-target="value">${isoDate.getMonthName()}</span>
+                    <svg class="w-4 h-4 mt-1 stroke-slate-400" fill="none"  viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                  </button>
+                  <div data-ui--select-target="menu" data-action="click->ui--select#select"
+                    class="absolute z-10 bg-white rounded-md shadow-lg mt-2 w-30 py-1 hidden overflow-auto overscroll-contain max-h-60">
+                    ${this.monthOptions(+isoDate.mm)}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex">
+              <div data-controller="ui--select" data-ui--select-target="wrapper" data-action="keydown->ui--select#key keydown.enter->ui--date-picker#clickOption click->ui--date-picker#clickOption change->ui--date-picker#yearSelect">
+                <div class="relative">
+                  <button data-action="ui--select#toggle" data-ui--date-picker-target="year" class="py-2 px-3 rounded-md flex items-center justify-between w-full text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+                    <span data-ui--select-target="value">${isoDate.yyyy}</span>
+                    <svg class="w-4 h-4 mt-1 stroke-slate-400" fill="none"  viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                  </button>
+                  <div data-ui--select-target="menu" data-action="click->ui--select#select"
+                    class="absolute z-10 bg-white rounded-md shadow-lg mt-2 w-20 py-1 hidden overflow-auto overscroll-contain max-h-60 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded">
+                    ${this.yearOptions(+isoDate.yyyy)}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <button data-ui--date-picker-target="nextMonth" data-action="ui--date-picker#gotoNextMonth" title="${this.text(
+                "nextMonth",
+              )}" aria-label="${this.text("nextMonth")}"
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4"><path d="m9 18 6-6-6-6"></path></svg>
+              </button>
+            </div>
+          </div>
+          <div class="sdp-days-of-week grid grid-cols-7 text-center">
+            ${this.daysOfWeek()}
+          </div>
+          <div class="sdp-days grid grid-cols-7 text-center" role="grid" data-ui--date-picker-target="days" data-action="click->ui--date-picker#pick">
+            ${this.days(isoDate)}
+          </div>
+          <div class="flex items-center justify-center">
+            <button data-ui--date-picker-target="today" data-action="ui--date-picker#gotoToday"
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground bg-transparent opacity-50 hover:opacity-100 py-1 px-2"
+              title="${this.text("today")}" aria-label="${this.text("today")}">
+              Today
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>`;
+    this.element.insertAdjacentHTML("beforeend", cal);
+  }
+
+  pick(event) {
+    event.preventDefault();
+
+    let button, time;
+    switch (event.target.constructor) {
+      case HTMLTimeElement:
+        time = event.target;
+        button = time.parentElement;
+        break;
+      case HTMLButtonElement:
+        button = event.target;
+        time = button.children[0];
+        break;
+      default:
+        return;
+    }
+
+    if (button.hasAttribute("aria-disabled")) return;
+    const dateStr = time.getAttribute("datetime");
+    this.selectDate(new IsoDate(dateStr));
+  }
+
+  key(event) {
+    // if(this.isSelectOpenValue){return}
+    switch (event.key) {
+      case "Escape":
+        this.close(true);
+        return;
+      case "Tab":
+        if (event.shiftKey) {
+          if (document.activeElement == this.firstTabStop()) {
+            event.preventDefault();
+            this.lastTabStop().focus();
+          }
+        } else {
+          if (document.activeElement == this.lastTabStop()) {
+            event.preventDefault();
+            this.firstTabStop().focus();
+          }
+        }
+        return;
+    }
+
+    const button = event.target;
+    if (!this.daysTarget.contains(button)) return;
+
+    const dateStr = button.children[0].getAttribute("datetime");
+    const isoDate = new IsoDate(dateStr);
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (!button.hasAttribute("aria-disabled")) this.selectDate(isoDate);
+        break;
+      case "ArrowUp":
+      case "k":
+        this.focusDate(isoDate.previousWeek());
+        break;
+      case "ArrowDown":
+      case "j":
+        this.focusDate(isoDate.nextWeek());
+        break;
+      case "ArrowLeft":
+      case "h":
+        this.focusDate(isoDate.previousDay());
+        break;
+      case "ArrowRight":
+      case "l":
+        this.focusDate(isoDate.nextDay());
+        break;
+      case "Home":
+      case "0":
+      case "^":
+        this.focusDate(isoDate.firstDayOfWeek(this.firstDayOfWeekValue));
+        break;
+      case "End":
+      case "$":
+        this.focusDate(isoDate.lastDayOfWeek(this.firstDayOfWeekValue));
+        break;
+      case "PageUp":
+        event.shiftKey
+          ? this.focusDate(isoDate.previousYear())
+          : this.focusDate(isoDate.previousMonth(this.monthJumpIsDayOfMonth()));
+        break;
+      case "PageDown":
+        event.shiftKey
+          ? this.focusDate(isoDate.nextYear())
+          : this.focusDate(isoDate.nextMonth(this.monthJumpIsDayOfMonth()));
+        break;
+      case "b":
+        this.focusDate(isoDate.previousMonth(this.monthJumpIsDayOfMonth()));
+        break;
+      case "B":
+        this.focusDate(isoDate.previousYear());
+        break;
+      case "w":
+        this.focusDate(isoDate.nextMonth(this.monthJumpIsDayOfMonth()));
+        break;
+      case "W":
+        this.focusDate(isoDate.nextYear());
+        break;
+    }
+  }
+
+  firstTabStop() {
+    return this.prevMonthTarget;
+  }
+
+  lastTabStop() {
+    return this.todayTarget;
+  }
+
+  monthJumpIsDayOfMonth() {
+    return this.monthJumpValue == "dayOfMonth";
+  }
+
+  // @param isoDate [isoDate] the date to select
+  selectDate(isoDate) {
+    if (this.isSelectOpenValue) return;
+
+    this.close(true);
+    this.toggleTarget.focus();
+    this.dateValue = isoDate.toString();
+  }
+
+  // Focuses the given date in the calendar.
+  // If the date is not visible because it is in the hidden part of the previous or
+  // next month, the calendar is updated to show the corresponding month.
+  //
+  // @param isoDate [IsoDate] the date to focus on in the calendar
+  focusDate(isoDate) {
+    const time = this.daysTarget.querySelectorAll(`time[datetime="${isoDate.toString()}"]`)[0];
+
+    if (!time) {
+      const leadingDatetime = this.daysTarget.querySelectorAll("time")[0].getAttribute("datetime");
+      if (isoDate.before(new IsoDate(leadingDatetime))) {
+        this.gotoPrevMonth();
+      } else {
+        this.gotoNextMonth();
+      }
+      this.focusDate(isoDate);
+      return;
+    }
+
+    const currentFocus = this.daysTarget.querySelectorAll('button[tabindex="0"]')[0];
+    if (currentFocus) currentFocus.setAttribute("tabindex", -1);
+
+    const button = time.parentElement;
+    button.setAttribute("tabindex", 0);
+    button.focus();
+
+    if (!button.hasAttribute("aria-disabled")) {
+      this.setToggleAriaLabel(`${this.text("changeDate")}, ${this.format(isoDate.toString())}`);
+    }
+  }
+
+  // @param selected [Number] the selected month (January is 1)
+  monthOptions(selected) {
+    const klass = "hover:bg-gray-100 cursor-pointer py-2 px-4";
+    return this.monthNames("long")
+      .map(
+        (name, i) =>
+          `<div class="${klass}" value="${i + 1}" ${
+            i + 1 == selected ? "selected" : ""
+          }>${name}</div>`,
+      )
+      .join("");
+  }
+
+  // @param selected [Number] the selected year
+  yearOptions(selected) {
+    const years = [];
+    const extent = 10;
+    const klass = "hover:bg-gray-100 cursor-pointer py-2 px-4";
+
+    for (let y = selected - extent; y <= selected + extent; y++) years.push(y);
+    return years
+      .map(
+        (year) =>
+          `<div class="${klass}" value=${year} ${year == selected ? "selected" : ""}>${year}</div>`,
+      )
+      .join("");
+  }
+
+  daysOfWeek() {
+    return this.dayNames("long")
+      .map(
+        (
+          name,
+        ) => `<div scope="col" class="text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]" aria-label="${name}">
+            ${name.slice(0, this.dayNameLengthValue)} </div>`,
+      )
+      .join("");
+  }
+
+  // Generates the day grid for the given date's month.
+  // The end of the previous month and the start of the next month
+  // are shown if there is space in the grid.
+  //
+  // Does not focus on the given date.
+  //
+  // @param isoDate [IsoDate] the month of interest
+  // @return [String] HTML for the day grid
+  days(isoDate) {
+    let days = [];
+    const selected = new IsoDate(this.dateValue);
+    let date = isoDate.setDayOfMonth(1).firstDayOfWeek(this.firstDayOfWeekValue);
+
+    while (true) {
+      const isPreviousMonth = date.mm != isoDate.mm && date.before(isoDate);
+      const isNextMonth = date.mm != isoDate.mm && date.after(isoDate);
+
+      if (isNextMonth && date.isFirstDayOfWeek(this.firstDayOfWeekValue)) break;
+
+      const outsideMonthClass =
+        "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30";
+      const klass = this.classAttribute(
+        "sdp-day inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9 p-0 font-normal aria-selected:opacity-100 text-accent-foreground",
+        isPreviousMonth ? outsideMonthClass : "text-accent-foreground",
+        isNextMonth ? outsideMonthClass : "text-accent-foreground",
+        date.isToday() ? "sdp-today bg-accent" : "",
+        date.isWeekend() ? "sdp-weekend" : "",
+        date.equals(selected)
+          ? "sdp-selected bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
+          : "",
+      );
+
+      days.push(`
+          <button type="button"
+                  tabindex="-1"
+                  ${klass}
+                  ${date.equals(selected) ? 'aria-selected="true"' : ""}
+                  ${this.isDisabled(date) ? 'aria-disabled="true"' : ""}
+          >
+            <time datetime="${date.toString()}">${+date.dd}</time>
+          </button>
+      `);
+      date = date.nextDay();
+    }
+
+    return days.join("");
+  }
+
+  classAttribute(...classes) {
+    const presentClasses = classes.filter((c) => c);
+    if (presentClasses.length == 0) return "";
+    return `class="${presentClasses.join(" ")}"`;
+  }
+
+  isDisabled(isoDate) {
+    return (
+      this.isOutOfRange(isoDate) ||
+      (isoDate.isWeekend() && !this.allowWeekendsValue) ||
+      this.disallowValue.includes(isoDate.toString())
+    );
+  }
+
+  // Formats an ISO8601 date, using the `format` value, for display to the user.
+  // Returns an empty string if `str` cannot be formatted.
+  //
+  // @param str [String] a date in YYYY-MM-DD format
+  // @return [String] the date in a user-facing format, or an empty string if the
+  //   given date cannot be formatted
+  format(str) {
+    if (!IsoDate.isValidStr(str)) return "";
+
+    const [yyyy, mm, dd] = str.split("-");
+
+    return this.formatValue
+      .replace("%d", dd)
+      .replace("%-d", +dd)
+      .replace("%m", this.zeroPad(mm))
+      .replace("%-m", +mm)
+      .replace("%B", this.localisedMonth(mm, "long"))
+      .replace("%b", this.localisedMonth(mm, "short"))
+      .replace("%Y", yyyy)
+      .replace("%y", +yyyy % 100);
+  }
+
+  // Returns a two-digit zero-padded string.
+  zeroPad(num) {
+    return num.toString().padStart(2, "0");
+  }
+
+  // Parses a date from the user, using the `format` value, into an ISO8601 date.
+  // Returns an empty string if `str` cannot be parsed.
+  //
+  // @param str [String] a user-facing date, e.g. 19/03/2022
+  // @return [String] the date in ISO8601 format, e.g. 2022-03-19; or an empty string
+  //   if the given date cannot be parsed
+  parse(str) {
+    const directives = {
+      d: [
+        "\\d{2}",
+        function (match) {
+          this.day = +match;
+        },
+      ],
+      "-d": [
+        "\\d{1,2}",
+        function (match) {
+          this.day = +match;
+        },
+      ],
+      m: [
+        "\\d{2}",
+        function (match) {
+          this.month = +match;
+        },
+      ],
+      "-m": [
+        "\\d{1,2}",
+        function (match) {
+          this.month = +match;
+        },
+      ],
+      B: [
+        "\\w+",
+        function (match, controller) {
+          this.month = controller.monthNumber(match, "long");
+        },
+      ],
+      b: [
+        "\\w{3}",
+        function (match, controller) {
+          this.month = controller.monthNumber(match, "short");
+        },
+      ],
+      Y: [
+        "\\d{4}",
+        function (match) {
+          this.year = +match;
+        },
+      ],
+      y: [
+        "\\d{2}",
+        function (match) {
+          this.year = 2000 + +match;
+        },
+      ],
+    };
+    const funcs = [];
+    const re = new RegExp(
+      this.formatValue.replace(/%(d|-d|m|-m|B|b|Y|y)/g, function (_, p) {
+        const directive = directives[p];
+        funcs.push(directive[1]);
+        return `(${directive[0]})`;
+      }),
+    );
+    const matches = str.match(re);
+    if (!matches) return "";
+
+    const parts = {};
+    for (let i = 0, len = funcs.length; i < len; i++) {
+      funcs[i].call(parts, matches[i + 1], this);
+    }
+
+    if (!IsoDate.isValidDate(parts.year, parts.month, parts.day)) return "";
+    return new IsoDate(parts.year, parts.month, parts.day).toString();
+  }
+
+  // Returns the name of the month in the configured locale.
+  //
+  // @param month [Number] the month number (January is 1)
+  // @param monthFormat [String] "long" (January) | "short" (Jan)
+  // @return [String] the localised month name
+  localisedMonth(month, monthFormat) {
+    // Use the middle of the month to avoid timezone edge cases
+    return new Date(`2022-${month}-15`).toLocaleString(this.localesValue, { month: monthFormat });
+  }
+
+  // Returns the number of the month (January is 1).
+  //
+  // @param name [String] the name of the month in the current locale (e.g. January or Jan)
+  // @param monthFormat [String] "long" (January) | "short" (Jan)
+  // @return [Number] the number of the month, or 0 if name is not recognised
+  monthNumber(name, monthFormat) {
+    return this.monthNames(monthFormat).findIndex((m) => name.includes(m)) + 1;
+  }
+
+  // Returns the month names in the configured locale.
+  //
+  // @param format [String] "long" (January) | "short" (Jan)
+  // @return [Array] localised month names
+  monthNames(format) {
+    const formatter = new Intl.DateTimeFormat(this.localesValue, { month: format });
+    return ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"].map((mm) =>
+      // Use the middle of the month to avoid timezone edge cases
+      formatter.format(new Date(`2022-${mm}-15`)),
+    );
+  }
+
+  // Returns the day names in the configured locale, starting with the
+  // firstDayOfTheWeekValue.
+  //
+  // @param format [String] "long" (Monday) | "short" (Mon) | "narrow" (M)
+  // @return [Array] localised day names
+  dayNames(format) {
+    const formatter = new Intl.DateTimeFormat(this.localesValue, { weekday: format });
+    const names = [];
+    // Ensure date in month is two digits. 2022-04-10 is a Sunday
+    for (let i = this.firstDayOfWeekValue + 10, n = i + 7; i < n; i++) {
+      names.push(formatter.format(new Date(`2022-04-${i}T00:00:00`)));
+    }
+    return names;
+  }
+
+  hasCssAnimation(el) {
+    return window.getComputedStyle(el).getPropertyValue("animation-name") !== "none";
+  }
+}