@erst-vg/dkfds-vite 8.0.1

package/src/js/components/date-picker.js

@@ -0,0 +1,2163 @@
+import {keymap} from 'receptor';
+const behavior = require("../utils/behavior");
+const select = require("../utils/select");
+const { prefix: PREFIX } = require("../config");
+const { CLICK } = require("../events");
+const activeElement = require("../utils/active-element");
+const isIosDevice = require("../utils/is-ios-device");
+
+const DATE_PICKER_CLASS = `date-picker`;
+const DATE_PICKER_WRAPPER_CLASS = `${DATE_PICKER_CLASS}__wrapper`;
+const DATE_PICKER_INITIALIZED_CLASS = `${DATE_PICKER_CLASS}--initialized`;
+const DATE_PICKER_ACTIVE_CLASS = `${DATE_PICKER_CLASS}--active`;
+const DATE_PICKER_INTERNAL_INPUT_CLASS = `${DATE_PICKER_CLASS}__internal-input`;
+const DATE_PICKER_EXTERNAL_INPUT_CLASS = `${DATE_PICKER_CLASS}__external-input`;
+const DATE_PICKER_BUTTON_CLASS = `${DATE_PICKER_CLASS}__button`;
+const DATE_PICKER_CALENDAR_CLASS = `${DATE_PICKER_CLASS}__calendar`;
+const DATE_PICKER_STATUS_CLASS = `${DATE_PICKER_CLASS}__status`;
+const CALENDAR_DATE_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__date`;
+
+const CALENDAR_DATE_FOCUSED_CLASS = `${CALENDAR_DATE_CLASS}--focused`;
+const CALENDAR_DATE_SELECTED_CLASS = `${CALENDAR_DATE_CLASS}--selected`;
+const CALENDAR_DATE_PREVIOUS_MONTH_CLASS = `${CALENDAR_DATE_CLASS}--previous-month`;
+const CALENDAR_DATE_CURRENT_MONTH_CLASS = `${CALENDAR_DATE_CLASS}--current-month`;
+const CALENDAR_DATE_NEXT_MONTH_CLASS = `${CALENDAR_DATE_CLASS}--next-month`;
+const CALENDAR_DATE_RANGE_DATE_CLASS = `${CALENDAR_DATE_CLASS}--range-date`;
+const CALENDAR_DATE_TODAY_CLASS = `${CALENDAR_DATE_CLASS}--today`;
+const CALENDAR_DATE_RANGE_DATE_START_CLASS = `${CALENDAR_DATE_CLASS}--range-date-start`;
+const CALENDAR_DATE_RANGE_DATE_END_CLASS = `${CALENDAR_DATE_CLASS}--range-date-end`;
+const CALENDAR_DATE_WITHIN_RANGE_CLASS = `${CALENDAR_DATE_CLASS}--within-range`;
+const CALENDAR_PREVIOUS_YEAR_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__previous-year`;
+const CALENDAR_PREVIOUS_MONTH_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__previous-month`;
+const CALENDAR_NEXT_YEAR_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__next-year`;
+const CALENDAR_NEXT_MONTH_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__next-month`;
+const CALENDAR_MONTH_SELECTION_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month-selection`;
+const CALENDAR_YEAR_SELECTION_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__year-selection`;
+const CALENDAR_MONTH_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month`;
+const CALENDAR_MONTH_FOCUSED_CLASS = `${CALENDAR_MONTH_CLASS}--focused`;
+const CALENDAR_MONTH_SELECTED_CLASS = `${CALENDAR_MONTH_CLASS}--selected`;
+const CALENDAR_YEAR_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__year`;
+const CALENDAR_YEAR_FOCUSED_CLASS = `${CALENDAR_YEAR_CLASS}--focused`;
+const CALENDAR_YEAR_SELECTED_CLASS = `${CALENDAR_YEAR_CLASS}--selected`;
+const CALENDAR_PREVIOUS_YEAR_CHUNK_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__previous-year-chunk`;
+const CALENDAR_NEXT_YEAR_CHUNK_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__next-year-chunk`;
+const CALENDAR_DATE_PICKER_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__date-picker`;
+const CALENDAR_MONTH_PICKER_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month-picker`;
+const CALENDAR_YEAR_PICKER_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__year-picker`;
+const CALENDAR_TABLE_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__table`;
+const CALENDAR_ROW_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__row`;
+const CALENDAR_CELL_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__cell`;
+const CALENDAR_CELL_CENTER_ITEMS_CLASS = `${CALENDAR_CELL_CLASS}--center-items`;
+const CALENDAR_MONTH_LABEL_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__month-label`;
+const CALENDAR_DAY_OF_WEEK_CLASS = `${DATE_PICKER_CALENDAR_CLASS}__day-of-week`;
+
+const DATE_PICKER = `.${DATE_PICKER_CLASS}`;
+const DATE_PICKER_BUTTON = `.${DATE_PICKER_BUTTON_CLASS}`;
+const DATE_PICKER_INTERNAL_INPUT = `.${DATE_PICKER_INTERNAL_INPUT_CLASS}`;
+const DATE_PICKER_EXTERNAL_INPUT = `.${DATE_PICKER_EXTERNAL_INPUT_CLASS}`;
+const DATE_PICKER_CALENDAR = `.${DATE_PICKER_CALENDAR_CLASS}`;
+const DATE_PICKER_STATUS = `.${DATE_PICKER_STATUS_CLASS}`;
+const CALENDAR_DATE = `.${CALENDAR_DATE_CLASS}`;
+const CALENDAR_DATE_FOCUSED = `.${CALENDAR_DATE_FOCUSED_CLASS}`;
+const CALENDAR_DATE_CURRENT_MONTH = `.${CALENDAR_DATE_CURRENT_MONTH_CLASS}`;
+const CALENDAR_PREVIOUS_YEAR = `.${CALENDAR_PREVIOUS_YEAR_CLASS}`;
+const CALENDAR_PREVIOUS_MONTH = `.${CALENDAR_PREVIOUS_MONTH_CLASS}`;
+const CALENDAR_NEXT_YEAR = `.${CALENDAR_NEXT_YEAR_CLASS}`;
+const CALENDAR_NEXT_MONTH = `.${CALENDAR_NEXT_MONTH_CLASS}`;
+const CALENDAR_YEAR_SELECTION = `.${CALENDAR_YEAR_SELECTION_CLASS}`;
+const CALENDAR_MONTH_SELECTION = `.${CALENDAR_MONTH_SELECTION_CLASS}`;
+const CALENDAR_MONTH = `.${CALENDAR_MONTH_CLASS}`;
+const CALENDAR_YEAR = `.${CALENDAR_YEAR_CLASS}`;
+const CALENDAR_PREVIOUS_YEAR_CHUNK = `.${CALENDAR_PREVIOUS_YEAR_CHUNK_CLASS}`;
+const CALENDAR_NEXT_YEAR_CHUNK = `.${CALENDAR_NEXT_YEAR_CHUNK_CLASS}`;
+const CALENDAR_DATE_PICKER = `.${CALENDAR_DATE_PICKER_CLASS}`;
+const CALENDAR_MONTH_PICKER = `.${CALENDAR_MONTH_PICKER_CLASS}`;
+const CALENDAR_YEAR_PICKER = `.${CALENDAR_YEAR_PICKER_CLASS}`;
+const CALENDAR_MONTH_FOCUSED = `.${CALENDAR_MONTH_FOCUSED_CLASS}`;
+const CALENDAR_YEAR_FOCUSED = `.${CALENDAR_YEAR_FOCUSED_CLASS}`;
+
+const VALIDATION_MESSAGE = "Indtast venligst en gyldig dato";
+
+const MONTH_LABELS = [
+  "Januar",
+  "Februar",
+  "Marts",
+  "April",
+  "Maj",
+  "Juni",
+  "Juli",
+  "August",
+  "September",
+  "Oktober",
+  "November",
+  "December",
+];
+
+const DAY_OF_WEEK_LABELS = [
+  "Mandag",
+  "Tirsdag",
+  "Onsdag",
+  "Torsdag",
+  "Fredag",
+  "Lørdag",
+  "Søndag",
+];
+
+const ENTER_KEYCODE = 13;
+
+const YEAR_CHUNK = 12;
+
+const DEFAULT_MIN_DATE = "0000-01-01";
+const DEFAULT_EXTERNAL_DATE_FORMAT = "DD/MM/YYYY";
+const INTERNAL_DATE_FORMAT = "YYYY-MM-DD";
+
+const NOT_DISABLED_SELECTOR = ":not([disabled])";
+
+const processFocusableSelectors = (...selectors) =>
+  selectors.map((query) => query + NOT_DISABLED_SELECTOR).join(", ");
+
+const DATE_PICKER_FOCUSABLE = processFocusableSelectors(
+  CALENDAR_PREVIOUS_YEAR,
+  CALENDAR_PREVIOUS_MONTH,
+  CALENDAR_YEAR_SELECTION,
+  CALENDAR_MONTH_SELECTION,
+  CALENDAR_NEXT_YEAR,
+  CALENDAR_NEXT_MONTH,
+  CALENDAR_DATE_FOCUSED
+);
+
+const MONTH_PICKER_FOCUSABLE = processFocusableSelectors(
+  CALENDAR_MONTH_FOCUSED
+);
+
+const YEAR_PICKER_FOCUSABLE = processFocusableSelectors(
+  CALENDAR_PREVIOUS_YEAR_CHUNK,
+  CALENDAR_NEXT_YEAR_CHUNK,
+  CALENDAR_YEAR_FOCUSED
+);
+
+// #region Date Manipulation Functions
+
+/**
+ * Keep date within month. Month would only be over by 1 to 3 days
+ *
+ * @param {Date} dateToCheck the date object to check
+ * @param {number} month the correct month
+ * @returns {Date} the date, corrected if needed
+ */
+const keepDateWithinMonth = (dateToCheck, month) => {
+  if (month !== dateToCheck.getMonth()) {
+    dateToCheck.setDate(0);
+  }
+
+  return dateToCheck;
+};
+
+/**
+ * Set date from month day year
+ *
+ * @param {number} year the year to set
+ * @param {number} month the month to set (zero-indexed)
+ * @param {number} date the date to set
+ * @returns {Date} the set date
+ */
+const setDate = (year, month, date) => {
+  const newDate = new Date(0);
+  newDate.setFullYear(year, month, date);
+  return newDate;
+};
+
+/**
+ * todays date
+ *
+ * @returns {Date} todays date
+ */
+const today = () => {
+  const newDate = new Date();
+  const day = newDate.getDate();
+  const month = newDate.getMonth();
+  const year = newDate.getFullYear();
+  return setDate(year, month, day);
+};
+
+/**
+ * Set date to first day of the month
+ *
+ * @param {number} date the date to adjust
+ * @returns {Date} the adjusted date
+ */
+const startOfMonth = (date) => {
+  const newDate = new Date(0);
+  newDate.setFullYear(date.getFullYear(), date.getMonth(), 1);
+  return newDate;
+};
+
+/**
+ * Set date to last day of the month
+ *
+ * @param {number} date the date to adjust
+ * @returns {Date} the adjusted date
+ */
+const lastDayOfMonth = (date) => {
+  const newDate = new Date(0);
+  newDate.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);
+  return newDate;
+};
+
+/**
+ * Add days to date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numDays the difference in days
+ * @returns {Date} the adjusted date
+ */
+const addDays = (_date, numDays) => {
+  const newDate = new Date(_date.getTime());
+  newDate.setDate(newDate.getDate() + numDays);
+  return newDate;
+};
+
+/**
+ * Subtract days from date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numDays the difference in days
+ * @returns {Date} the adjusted date
+ */
+const subDays = (_date, numDays) => addDays(_date, -numDays);
+
+/**
+ * Add weeks to date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numWeeks the difference in weeks
+ * @returns {Date} the adjusted date
+ */
+const addWeeks = (_date, numWeeks) => addDays(_date, numWeeks * 7);
+
+/**
+ * Subtract weeks from date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numWeeks the difference in weeks
+ * @returns {Date} the adjusted date
+ */
+const subWeeks = (_date, numWeeks) => addWeeks(_date, -numWeeks);
+
+/**
+ * Set date to the start of the week (Monday)
+ *
+ * @param {Date} _date the date to adjust
+ * @returns {Date} the adjusted date
+ */
+const startOfWeek = (_date) => {
+  let dayOfWeek = _date.getDay()-1;
+  if(dayOfWeek === -1){
+    dayOfWeek = 6;
+  }
+  return subDays(_date, dayOfWeek);
+};
+
+/**
+ * Set date to the end of the week (Sunday)
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numWeeks the difference in weeks
+ * @returns {Date} the adjusted date
+ */
+const endOfWeek = (_date) => {
+  const dayOfWeek = _date.getDay();
+  return addDays(_date, 7 - dayOfWeek);
+};
+
+/**
+ * Add months to date and keep date within month
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numMonths the difference in months
+ * @returns {Date} the adjusted date
+ */
+const addMonths = (_date, numMonths) => {
+  const newDate = new Date(_date.getTime());
+
+  const dateMonth = (newDate.getMonth() + 12 + numMonths) % 12;
+  newDate.setMonth(newDate.getMonth() + numMonths);
+  keepDateWithinMonth(newDate, dateMonth);
+
+  return newDate;
+};
+
+/**
+ * Subtract months from date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numMonths the difference in months
+ * @returns {Date} the adjusted date
+ */
+const subMonths = (_date, numMonths) => addMonths(_date, -numMonths);
+
+/**
+ * Add years to date and keep date within month
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numYears the difference in years
+ * @returns {Date} the adjusted date
+ */
+const addYears = (_date, numYears) => addMonths(_date, numYears * 12);
+
+/**
+ * Subtract years from date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} numYears the difference in years
+ * @returns {Date} the adjusted date
+ */
+const subYears = (_date, numYears) => addYears(_date, -numYears);
+
+/**
+ * Set months of date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} month zero-indexed month to set
+ * @returns {Date} the adjusted date
+ */
+const setMonth = (_date, month) => {
+  const newDate = new Date(_date.getTime());
+
+  newDate.setMonth(month);
+  keepDateWithinMonth(newDate, month);
+
+  return newDate;
+};
+
+/**
+ * Set year of date
+ *
+ * @param {Date} _date the date to adjust
+ * @param {number} year the year to set
+ * @returns {Date} the adjusted date
+ */
+const setYear = (_date, year) => {
+  const newDate = new Date(_date.getTime());
+
+  const month = newDate.getMonth();
+  newDate.setFullYear(year);
+  keepDateWithinMonth(newDate, month);
+
+  return newDate;
+};
+
+/**
+ * Return the earliest date
+ *
+ * @param {Date} dateA date to compare
+ * @param {Date} dateB date to compare
+ * @returns {Date} the earliest date
+ */
+const min = (dateA, dateB) => {
+  let newDate = dateA;
+
+  if (dateB < dateA) {
+    newDate = dateB;
+  }
+
+  return new Date(newDate.getTime());
+};
+
+/**
+ * Return the latest date
+ *
+ * @param {Date} dateA date to compare
+ * @param {Date} dateB date to compare
+ * @returns {Date} the latest date
+ */
+const max = (dateA, dateB) => {
+  let newDate = dateA;
+
+  if (dateB > dateA) {
+    newDate = dateB;
+  }
+
+  return new Date(newDate.getTime());
+};
+
+/**
+ * Check if dates are the in the same year
+ *
+ * @param {Date} dateA date to compare
+ * @param {Date} dateB date to compare
+ * @returns {boolean} are dates in the same year
+ */
+const isSameYear = (dateA, dateB) => {
+  return dateA && dateB && dateA.getFullYear() === dateB.getFullYear();
+};
+
+/**
+ * Check if dates are the in the same month
+ *
+ * @param {Date} dateA date to compare
+ * @param {Date} dateB date to compare
+ * @returns {boolean} are dates in the same month
+ */
+const isSameMonth = (dateA, dateB) => {
+  return isSameYear(dateA, dateB) && dateA.getMonth() === dateB.getMonth();
+};
+
+/**
+ * Check if dates are the same date
+ *
+ * @param {Date} dateA the date to compare
+ * @param {Date} dateA the date to compare
+ * @returns {boolean} are dates the same date
+ */
+const isSameDay = (dateA, dateB) => {
+  return isSameMonth(dateA, dateB) && dateA.getDate() === dateB.getDate();
+};
+
+/**
+ * return a new date within minimum and maximum date
+ *
+ * @param {Date} date date to check
+ * @param {Date} minDate minimum date to allow
+ * @param {Date} maxDate maximum date to allow
+ * @returns {Date} the date between min and max
+ */
+const keepDateBetweenMinAndMax = (date, minDate, maxDate) => {
+  let newDate = date;
+
+  if (date < minDate) {
+    newDate = minDate;
+  } else if (maxDate && date > maxDate) {
+    newDate = maxDate;
+  }
+
+  return new Date(newDate.getTime());
+};
+
+/**
+ * Check if dates is valid.
+ *
+ * @param {Date} date date to check
+ * @param {Date} minDate minimum date to allow
+ * @param {Date} maxDate maximum date to allow
+ * @return {boolean} is there a day within the month within min and max dates
+ */
+const isDateWithinMinAndMax = (date, minDate, maxDate) =>
+  date >= minDate && (!maxDate || date <= maxDate);
+
+/**
+ * Check if dates month is invalid.
+ *
+ * @param {Date} date date to check
+ * @param {Date} minDate minimum date to allow
+ * @param {Date} maxDate maximum date to allow
+ * @return {boolean} is the month outside min or max dates
+ */
+const isDatesMonthOutsideMinOrMax = (date, minDate, maxDate) => {
+  return (
+    lastDayOfMonth(date) < minDate || (maxDate && startOfMonth(date) > maxDate)
+  );
+};
+
+/**
+ * Check if dates year is invalid.
+ *
+ * @param {Date} date date to check
+ * @param {Date} minDate minimum date to allow
+ * @param {Date} maxDate maximum date to allow
+ * @return {boolean} is the month outside min or max dates
+ */
+const isDatesYearOutsideMinOrMax = (date, minDate, maxDate) => {
+  return (
+    lastDayOfMonth(setMonth(date, 11)) < minDate ||
+    (maxDate && startOfMonth(setMonth(date, 0)) > maxDate)
+  );
+};
+
+/**
+ * Parse a date with format D-M-YY
+ *
+ * @param {string} dateString the date string to parse
+ * @param {string} dateFormat the format of the date string
+ * @param {boolean} adjustDate should the date be adjusted
+ * @returns {Date} the parsed date
+ */
+const parseDateString = (
+  dateString,
+  dateFormat = INTERNAL_DATE_FORMAT,
+  adjustDate = false
+) => {
+  let date;
+  let month;
+  let day;
+  let year;
+  let parsed;
+
+  if (dateString) {
+    let monthStr, dayStr, yearStr;
+    if (dateFormat === DEFAULT_EXTERNAL_DATE_FORMAT) {
+      [dayStr, monthStr, yearStr] = dateString.split("/");
+    } else {
+      [yearStr, monthStr, dayStr] = dateString.split("-");
+    }
+
+    if (yearStr) {
+      parsed = parseInt(yearStr, 10);
+      if (!Number.isNaN(parsed)) {
+        year = parsed;
+        if (adjustDate) {
+          year = Math.max(0, year);
+          if (yearStr.length < 3) {
+            const currentYear = today().getFullYear();
+            const currentYearStub =
+              currentYear - (currentYear % 10 ** yearStr.length);
+            year = currentYearStub + parsed;
+          }
+        }
+      }
+    }
+
+    if (monthStr) {
+      parsed = parseInt(monthStr, 10);
+      if (!Number.isNaN(parsed)) {
+        month = parsed;
+        if (adjustDate) {
+          month = Math.max(1, month);
+          month = Math.min(12, month);
+        }
+      }
+    }
+
+    if (month && dayStr && year != null) {
+      parsed = parseInt(dayStr, 10);
+      if (!Number.isNaN(parsed)) {
+        day = parsed;
+        if (adjustDate) {
+          const lastDayOfTheMonth = setDate(year, month, 0).getDate();
+          day = Math.max(1, day);
+          day = Math.min(lastDayOfTheMonth, day);
+        }
+      }
+    }
+
+    if (month && day && year != null) {
+      date = setDate(year, month - 1, day);
+    }
+  }
+
+  return date;
+};
+
+/**
+ * Format a date to format MM-DD-YYYY
+ *
+ * @param {Date} date the date to format
+ * @param {string} dateFormat the format of the date string
+ * @returns {string} the formatted date string
+ */
+const formatDate = (date, dateFormat = INTERNAL_DATE_FORMAT) => {
+  const padZeros = (value, length) => {
+    return `0000${value}`.slice(-length);
+  };
+
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  if (dateFormat === DEFAULT_EXTERNAL_DATE_FORMAT) {
+    return [padZeros(day, 2), padZeros(month, 2), padZeros(year, 4)].join("/");
+  }
+
+  return [padZeros(year, 4), padZeros(month, 2), padZeros(day, 2)].join("-");
+};
+
+// #endregion Date Manipulation Functions
+
+/**
+ * Create a grid string from an array of html strings
+ *
+ * @param {string[]} htmlArray the array of html items
+ * @param {number} rowSize the length of a row
+ * @returns {string} the grid string
+ */
+const listToGridHtml = (htmlArray, rowSize) => {
+  const grid = [];
+  let row = [];
+
+  let i = 0;
+  while (i < htmlArray.length) {
+    row = [];
+    while (i < htmlArray.length && row.length < rowSize) {
+      row.push(`<td>${htmlArray[i]}</td>`);
+      i += 1;
+    }
+    grid.push(`<tr>${row.join("")}</tr>`);
+  }
+
+  return grid.join("");
+};
+
+/**
+ * set the value of the element and dispatch a change event
+ *
+ * @param {HTMLInputElement} el The element to update
+ * @param {string} value The new value of the element
+ */
+const changeElementValue = (el, value = "") => {
+  const elementToChange = el;
+  elementToChange.value = value;
+
+
+  var event = new Event('change');
+  elementToChange.dispatchEvent(event);
+};
+
+/**
+ * The properties and elements within the date picker.
+ * @typedef {Object} DatePickerContext
+ * @property {HTMLDivElement} calendarEl
+ * @property {HTMLElement} datePickerEl
+ * @property {HTMLInputElement} internalInputEl
+ * @property {HTMLInputElement} externalInputEl
+ * @property {HTMLDivElement} statusEl
+ * @property {HTMLDivElement} firstYearChunkEl
+ * @property {Date} calendarDate
+ * @property {Date} minDate
+ * @property {Date} maxDate
+ * @property {Date} selectedDate
+ * @property {Date} rangeDate
+ * @property {Date} defaultDate
+ */
+
+/**
+ * Get an object of the properties and elements belonging directly to the given
+ * date picker component.
+ *
+ * @param {HTMLElement} el the element within the date picker
+ * @returns {DatePickerContext} elements
+ */
+const getDatePickerContext = (el) => {
+  const datePickerEl = el.closest(DATE_PICKER);
+
+  if (!datePickerEl) {
+    throw new Error(`Element is missing outer ${DATE_PICKER}`);
+  }
+
+  const internalInputEl = datePickerEl.querySelector(
+    DATE_PICKER_INTERNAL_INPUT
+  );
+  const externalInputEl = datePickerEl.querySelector(
+    DATE_PICKER_EXTERNAL_INPUT
+  );
+  const calendarEl = datePickerEl.querySelector(DATE_PICKER_CALENDAR);
+  const toggleBtnEl = datePickerEl.querySelector(DATE_PICKER_BUTTON);
+  const statusEl = datePickerEl.querySelector(DATE_PICKER_STATUS);
+  const firstYearChunkEl = datePickerEl.querySelector(CALENDAR_YEAR);
+
+  const inputDate = parseDateString(
+    externalInputEl.value,
+    DEFAULT_EXTERNAL_DATE_FORMAT,
+    true
+  );
+  const selectedDate = parseDateString(internalInputEl.value);
+
+  const calendarDate = parseDateString(calendarEl.dataset.value);
+  const minDate = parseDateString(datePickerEl.dataset.minDate);
+  const maxDate = parseDateString(datePickerEl.dataset.maxDate);
+  const rangeDate = parseDateString(datePickerEl.dataset.rangeDate);
+  const defaultDate = parseDateString(datePickerEl.dataset.defaultDate);
+
+  if (minDate && maxDate && minDate > maxDate) {
+    throw new Error("Minimum date cannot be after maximum date");
+  }
+
+  return {
+    calendarDate,
+    minDate,
+    toggleBtnEl,
+    selectedDate,
+    maxDate,
+    firstYearChunkEl,
+    datePickerEl,
+    inputDate,
+    internalInputEl,
+    externalInputEl,
+    calendarEl,
+    rangeDate,
+    defaultDate,
+    statusEl,
+  };
+};
+
+/**
+ * Disable the date picker component
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ */
+const disable = (el) => {
+  const { externalInputEl, toggleBtnEl } = getDatePickerContext(el);
+
+  toggleBtnEl.disabled = true;
+  externalInputEl.disabled = true;
+};
+
+/**
+ * Enable the date picker component
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ */
+const enable = (el) => {
+  const { externalInputEl, toggleBtnEl } = getDatePickerContext(el);
+
+  toggleBtnEl.disabled = false;
+  externalInputEl.disabled = false;
+};
+
+// #region Validation
+
+/**
+ * Validate the value in the input as a valid date of format D/M/YYYY
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ */
+const isDateInputInvalid = (el) => {
+  const { externalInputEl, minDate, maxDate } = getDatePickerContext(el);
+
+  const dateString = externalInputEl.value;
+  let isInvalid = false;
+
+  if (dateString) {
+    isInvalid = true;
+
+    const dateStringParts = dateString.split("/");
+    const [day, month, year] = dateStringParts.map((str) => {
+      let value;
+      const parsed = parseInt(str, 10);
+      if (!Number.isNaN(parsed)) value = parsed;
+      return value;
+    });
+
+    if (month && day && year != null) {
+      const checkDate = setDate(year, month - 1, day);
+
+      if (
+        checkDate.getMonth() === month - 1 &&
+        checkDate.getDate() === day &&
+        checkDate.getFullYear() === year &&
+        dateStringParts[2].length === 4 &&
+        isDateWithinMinAndMax(checkDate, minDate, maxDate)
+      ) {
+        isInvalid = false;
+      }
+    }
+  }
+
+  return isInvalid;
+};
+
+/**
+ * Validate the value in the input as a valid date of format M/D/YYYY
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ */
+const validateDateInput = (el) => {
+  const { externalInputEl } = getDatePickerContext(el);
+  const isInvalid = isDateInputInvalid(externalInputEl);
+
+  if (isInvalid && !externalInputEl.validationMessage) {
+    externalInputEl.setCustomValidity(VALIDATION_MESSAGE);
+  }
+
+  if (!isInvalid && externalInputEl.validationMessage === VALIDATION_MESSAGE) {
+    externalInputEl.setCustomValidity("");
+  }
+};
+
+// #endregion Validation
+
+/**
+ * Enable the date picker component
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ */
+const reconcileInputValues = (el) => {
+  const { internalInputEl, inputDate } = getDatePickerContext(el);
+  let newValue = "";
+
+  if (inputDate && !isDateInputInvalid(el)) {
+    newValue = formatDate(inputDate);
+  }
+
+  if (internalInputEl.value !== newValue) {
+    changeElementValue(internalInputEl, newValue);
+  }
+};
+
+/**
+ * Select the value of the date picker inputs.
+ *
+ * @param {HTMLButtonElement} el An element within the date picker component
+ * @param {string} dateString The date string to update in YYYY-MM-DD format
+ */
+const setCalendarValue = (el, dateString) => {
+  const parsedDate = parseDateString(dateString);
+
+  if (parsedDate) {
+    const formattedDate = formatDate(parsedDate, DEFAULT_EXTERNAL_DATE_FORMAT);
+
+    const {
+      datePickerEl,
+      internalInputEl,
+      externalInputEl,
+    } = getDatePickerContext(el);
+
+    changeElementValue(internalInputEl, dateString);
+    changeElementValue(externalInputEl, formattedDate);
+
+    validateDateInput(datePickerEl);
+  }
+};
+
+/**
+ * Enhance an input with the date picker elements
+ *
+ * @param {HTMLElement} el The initial wrapping element of the date picker component
+ */
+const enhanceDatePicker = (el) => {
+  const datePickerEl = el.closest(DATE_PICKER);
+  const defaultValue = datePickerEl.dataset.defaultValue;
+
+  const internalInputEl = datePickerEl.querySelector(`input`);
+
+  if (!internalInputEl) {
+    throw new Error(`${DATE_PICKER} is missing inner input`);
+  }
+
+
+  const minDate = parseDateString(
+    datePickerEl.dataset.minDate || internalInputEl.getAttribute("min")
+  );
+  datePickerEl.dataset.minDate = minDate
+    ? formatDate(minDate)
+    : DEFAULT_MIN_DATE;
+
+  const maxDate = parseDateString(
+    datePickerEl.dataset.maxDate || internalInputEl.getAttribute("max")
+  );
+  if (maxDate) {
+    datePickerEl.dataset.maxDate = formatDate(maxDate);
+  }
+
+  const calendarWrapper = document.createElement("div");
+  calendarWrapper.classList.add(DATE_PICKER_WRAPPER_CLASS);
+  calendarWrapper.tabIndex = "-1";
+
+  const externalInputEl = internalInputEl.cloneNode();
+  externalInputEl.classList.add(DATE_PICKER_EXTERNAL_INPUT_CLASS);
+  externalInputEl.type = "text";
+  externalInputEl.name = "";
+
+  calendarWrapper.appendChild(externalInputEl);
+  calendarWrapper.insertAdjacentHTML(
+    "beforeend",
+    [
+      `<button type="button" class="${DATE_PICKER_BUTTON_CLASS}" aria-haspopup="true" aria-label="Åbn kalender">&nbsp;</button>`,
+      `<div class="${DATE_PICKER_CALENDAR_CLASS}" role="dialog" aria-modal="true" hidden></div>`,
+      `<div class="sr-only ${DATE_PICKER_STATUS_CLASS}" role="status" aria-live="polite"></div>`,
+    ].join("")
+  );
+
+  internalInputEl.setAttribute("aria-hidden", "true");
+  internalInputEl.setAttribute("tabindex", "-1");
+  internalInputEl.classList.add(
+    "sr-only",
+    DATE_PICKER_INTERNAL_INPUT_CLASS
+  );
+  internalInputEl.removeAttribute('id');
+  internalInputEl.required = false;
+
+  datePickerEl.appendChild(calendarWrapper);
+  datePickerEl.classList.add(DATE_PICKER_INITIALIZED_CLASS);
+
+  if (defaultValue) {
+    setCalendarValue(datePickerEl, defaultValue);
+  }
+
+  if (internalInputEl.disabled) {
+    disable(datePickerEl);
+    internalInputEl.disabled = false;
+  }
+  
+  if (externalInputEl.value) {
+    validateDateInput(externalInputEl);
+  }
+};
+
+// #region Calendar - Date Selection View
+
+/**
+ * render the calendar.
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ * @param {Date} _dateToDisplay a date to render on the calendar
+ * @returns {HTMLElement} a reference to the new calendar element
+ */
+const renderCalendar = (el, _dateToDisplay) => {
+  const {
+    datePickerEl,
+    calendarEl,
+    statusEl,
+    selectedDate,
+    maxDate,
+    minDate,
+    rangeDate,
+  } = getDatePickerContext(el);
+  const todaysDate = today();
+  let dateToDisplay = _dateToDisplay || todaysDate;
+
+  const calendarWasHidden = calendarEl.hidden;
+
+  const focusedDate = addDays(dateToDisplay, 0);
+  const focusedMonth = dateToDisplay.getMonth();
+  const focusedYear = dateToDisplay.getFullYear();
+
+  const prevMonth = subMonths(dateToDisplay, 1);
+  const nextMonth = addMonths(dateToDisplay, 1);
+
+  const currentFormattedDate = formatDate(dateToDisplay);
+
+  const firstOfMonth = startOfMonth(dateToDisplay);
+  const prevButtonsDisabled = isSameMonth(dateToDisplay, minDate);
+  const nextButtonsDisabled = isSameMonth(dateToDisplay, maxDate);
+
+  const rangeConclusionDate = selectedDate || dateToDisplay;
+  const rangeStartDate = rangeDate && min(rangeConclusionDate, rangeDate);
+  const rangeEndDate = rangeDate && max(rangeConclusionDate, rangeDate);
+
+  const withinRangeStartDate = rangeDate && addDays(rangeStartDate, 1);
+  const withinRangeEndDate = rangeDate && subDays(rangeEndDate, 1);
+
+  const monthLabel = MONTH_LABELS[focusedMonth];
+
+  const generateDateHtml = (dateToRender) => {
+    const classes = [CALENDAR_DATE_CLASS];
+    const day = dateToRender.getDate();
+    const month = dateToRender.getMonth();
+    const year = dateToRender.getFullYear();
+    const dayOfWeek = dateToRender.getDay();
+
+    const formattedDate = formatDate(dateToRender);
+
+    let tabindex = "-1";
+
+    const isDisabled = !isDateWithinMinAndMax(dateToRender, minDate, maxDate);
+    const isSelected = isSameDay(dateToRender, selectedDate);
+
+    if (isSameMonth(dateToRender, prevMonth)) {
+      classes.push(CALENDAR_DATE_PREVIOUS_MONTH_CLASS);
+    }
+
+    if (isSameMonth(dateToRender, focusedDate)) {
+      classes.push(CALENDAR_DATE_CURRENT_MONTH_CLASS);
+    }
+
+    if (isSameMonth(dateToRender, nextMonth)) {
+      classes.push(CALENDAR_DATE_NEXT_MONTH_CLASS);
+    }
+
+    if (isSelected) {
+      classes.push(CALENDAR_DATE_SELECTED_CLASS);
+    }
+
+    if (isSameDay(dateToRender, todaysDate)) {
+      classes.push(CALENDAR_DATE_TODAY_CLASS);
+    }
+
+    if (rangeDate) {
+      if (isSameDay(dateToRender, rangeDate)) {
+        classes.push(CALENDAR_DATE_RANGE_DATE_CLASS);
+      }
+
+      if (isSameDay(dateToRender, rangeStartDate)) {
+        classes.push(CALENDAR_DATE_RANGE_DATE_START_CLASS);
+      }
+
+      if (isSameDay(dateToRender, rangeEndDate)) {
+        classes.push(CALENDAR_DATE_RANGE_DATE_END_CLASS);
+      }
+
+      if (
+        isDateWithinMinAndMax(
+          dateToRender,
+          withinRangeStartDate,
+          withinRangeEndDate
+        )
+      ) {
+        classes.push(CALENDAR_DATE_WITHIN_RANGE_CLASS);
+      }
+    }
+
+    if (isSameDay(dateToRender, focusedDate)) {
+      tabindex = "0";
+      classes.push(CALENDAR_DATE_FOCUSED_CLASS);
+    }
+
+    const monthStr = MONTH_LABELS[month];
+    const dayStr = DAY_OF_WEEK_LABELS[dayOfWeek];
+
+    return `<button
+      type="button"
+      tabindex="${tabindex}"
+      class="${classes.join(" ")}" 
+      data-day="${day}" 
+      data-month="${month + 1}" 
+      data-year="${year}" 
+      data-value="${formattedDate}"
+      aria-label="${dayStr} den ${day} ${monthStr} ${year} "
+      aria-selected="${isSelected ? "true" : "false"}"
+      ${isDisabled ? `disabled="disabled"` : ""}
+    >${day}</button>`;
+  };
+  // set date to first rendered day
+  dateToDisplay = startOfWeek(firstOfMonth);
+
+  const days = [];
+
+  while (
+    days.length < 28 ||
+    dateToDisplay.getMonth() === focusedMonth ||
+    days.length % 7 !== 0
+  ) {
+    days.push(generateDateHtml(dateToDisplay));
+    dateToDisplay = addDays(dateToDisplay, 1);    
+  }
+  const datesHtml = listToGridHtml(days, 7);
+
+  const newCalendar = calendarEl.cloneNode();
+  newCalendar.dataset.value = currentFormattedDate;
+  newCalendar.style.top = `${datePickerEl.offsetHeight}px`;
+  newCalendar.hidden = false;
+  let content = `<div tabindex="-1" class="${CALENDAR_DATE_PICKER_CLASS}">
+      <div class="${CALENDAR_ROW_CLASS}">
+        <div class="${CALENDAR_CELL_CLASS} ${CALENDAR_CELL_CENTER_ITEMS_CLASS}">
+          <button 
+            type="button"
+            class="${CALENDAR_PREVIOUS_YEAR_CLASS}"
+            aria-label="Navigér ét år tilbage"
+            ${prevButtonsDisabled ? `disabled="disabled"` : ""}
+          >&nbsp;</button>
+        </div>
+        <div class="${CALENDAR_CELL_CLASS} ${CALENDAR_CELL_CENTER_ITEMS_CLASS}">
+          <button 
+            type="button"
+            class="${CALENDAR_PREVIOUS_MONTH_CLASS}"
+            aria-label="Navigér én måned tilbage"
+            ${prevButtonsDisabled ? `disabled="disabled"` : ""}
+          >&nbsp;</button>
+        </div>
+        <div class="${CALENDAR_CELL_CLASS} ${CALENDAR_MONTH_LABEL_CLASS}">
+          <button 
+            type="button"
+            class="${CALENDAR_MONTH_SELECTION_CLASS}" aria-label="${monthLabel}. Vælg måned."
+          >${monthLabel}</button>
+          <button 
+            type="button"
+            class="${CALENDAR_YEAR_SELECTION_CLASS}" aria-label="${focusedYear}. Vælg år."
+          >${focusedYear}</button>
+        </div>
+        <div class="${CALENDAR_CELL_CLASS} ${CALENDAR_CELL_CENTER_ITEMS_CLASS}">
+          <button 
+            type="button"
+            class="${CALENDAR_NEXT_MONTH_CLASS}"
+            aria-label="Navigér én måned frem"
+            ${nextButtonsDisabled ? `disabled="disabled"` : ""}
+          >&nbsp;</button>
+        </div>
+        <div class="${CALENDAR_CELL_CLASS} ${CALENDAR_CELL_CENTER_ITEMS_CLASS}">
+          <button 
+            type="button"
+            class="${CALENDAR_NEXT_YEAR_CLASS}"
+            aria-label="Navigér ét år frem"
+            ${nextButtonsDisabled ? `disabled="disabled"` : ""}
+          >&nbsp;</button>
+        </div>
+      </div>
+      <table class="${CALENDAR_TABLE_CLASS}" role="presentation">
+        <thead>
+          <tr>`;
+  for(let d in DAY_OF_WEEK_LABELS){
+    content += `<th class="${CALENDAR_DAY_OF_WEEK_CLASS}" scope="col" aria-label="${DAY_OF_WEEK_LABELS[d]}">${DAY_OF_WEEK_LABELS[d].charAt(0)}</th>`;
+  }
+  content += `</tr>
+        </thead>
+        <tbody>
+          ${datesHtml}
+        </tbody>
+      </table>
+    </div>`;
+  newCalendar.innerHTML = content;
+  calendarEl.parentNode.replaceChild(newCalendar, calendarEl);
+
+  datePickerEl.classList.add(DATE_PICKER_ACTIVE_CLASS);
+
+  const statuses = [];
+
+  if (isSameDay(selectedDate, focusedDate)) {
+    statuses.push("Selected date");
+  }
+
+  if (calendarWasHidden) {
+    statuses.push(
+      "Du kan navigere mellem dage ved at bruge højre og venstre piltaster, ",
+      "uger ved at bruge op og ned piltaster, ",
+      "måneder ved ta bruge page up og page down tasterne ",
+      "og år ved at at taste shift og page up eller ned.",
+      "Home og end tasten navigerer til start eller slutning af en uge."
+    );
+    statusEl.textContent = "";
+  } else {
+    statuses.push(`${monthLabel} ${focusedYear}`);
+  }
+  statusEl.textContent = statuses.join(". ");
+
+  return newCalendar;
+};
+
+/**
+ * Navigate back one year and display the calendar.
+ *
+ * @param {HTMLButtonElement} _buttonEl An element within the date picker component
+ */
+const displayPreviousYear = (_buttonEl) => {
+  if (_buttonEl.disabled) return;
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    _buttonEl
+  );
+  let date = subYears(calendarDate, 1);
+  date = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = renderCalendar(calendarEl, date);
+
+  let nextToFocus = newCalendar.querySelector(CALENDAR_PREVIOUS_YEAR);
+  if (nextToFocus.disabled) {
+    nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER);
+  }
+  nextToFocus.focus();
+};
+
+/**
+ * Navigate back one month and display the calendar.
+ *
+ * @param {HTMLButtonElement} _buttonEl An element within the date picker component
+ */
+const displayPreviousMonth = (_buttonEl) => {
+  if (_buttonEl.disabled) return;
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    _buttonEl
+  );
+  let date = subMonths(calendarDate, 1);
+  date = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = renderCalendar(calendarEl, date);
+
+  let nextToFocus = newCalendar.querySelector(CALENDAR_PREVIOUS_MONTH);
+  if (nextToFocus.disabled) {
+    nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER);
+  }
+  nextToFocus.focus();
+};
+
+/**
+ * Navigate forward one month and display the calendar.
+ *
+ * @param {HTMLButtonElement} _buttonEl An element within the date picker component
+ */
+const displayNextMonth = (_buttonEl) => {
+  if (_buttonEl.disabled) return;
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    _buttonEl
+  );
+  let date = addMonths(calendarDate, 1);
+  date = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = renderCalendar(calendarEl, date);
+
+  let nextToFocus = newCalendar.querySelector(CALENDAR_NEXT_MONTH);
+  if (nextToFocus.disabled) {
+    nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER);
+  }
+  nextToFocus.focus();
+};
+
+/**
+ * Navigate forward one year and display the calendar.
+ *
+ * @param {HTMLButtonElement} _buttonEl An element within the date picker component
+ */
+const displayNextYear = (_buttonEl) => {
+  if (_buttonEl.disabled) return;
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    _buttonEl
+  );
+  let date = addYears(calendarDate, 1);
+  date = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = renderCalendar(calendarEl, date);
+
+  let nextToFocus = newCalendar.querySelector(CALENDAR_NEXT_YEAR);
+  if (nextToFocus.disabled) {
+    nextToFocus = newCalendar.querySelector(CALENDAR_DATE_PICKER);
+  }
+  nextToFocus.focus();
+};
+
+/**
+ * Hide the calendar of a date picker component.
+ *
+ * @param {HTMLElement} el An element within the date picker component
+ */
+const hideCalendar = (el) => {
+  const { datePickerEl, calendarEl, statusEl } = getDatePickerContext(el);
+
+  datePickerEl.classList.remove(DATE_PICKER_ACTIVE_CLASS);
+  calendarEl.hidden = true;
+  statusEl.textContent = "";
+};
+
+/**
+ * Select a date within the date picker component.
+ *
+ * @param {HTMLButtonElement} calendarDateEl A date element within the date picker component
+ */
+const selectDate = (calendarDateEl) => {
+  if (calendarDateEl.disabled) return;
+
+  const { datePickerEl, externalInputEl } = getDatePickerContext(
+    calendarDateEl
+  );
+  setCalendarValue(calendarDateEl, calendarDateEl.dataset.value);
+  hideCalendar(datePickerEl);
+
+  externalInputEl.focus();
+};
+
+/**
+ * Toggle the calendar.
+ *
+ * @param {HTMLButtonElement} el An element within the date picker component
+ */
+const toggleCalendar = (el) => {
+  if (el.disabled) return;
+  const {
+    calendarEl,
+    inputDate,
+    minDate,
+    maxDate,
+    defaultDate,
+  } = getDatePickerContext(el);
+
+  if (calendarEl.hidden) {
+    const dateToDisplay = keepDateBetweenMinAndMax(
+      inputDate || defaultDate || today(),
+      minDate,
+      maxDate
+    );
+    const newCalendar = renderCalendar(calendarEl, dateToDisplay);
+    newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus();
+  } else {
+    hideCalendar(el);
+  }
+};
+
+/**
+ * Update the calendar when visible.
+ *
+ * @param {HTMLElement} el an element within the date picker
+ */
+const updateCalendarIfVisible = (el) => {
+  const { calendarEl, inputDate, minDate, maxDate } = getDatePickerContext(el);
+  const calendarShown = !calendarEl.hidden;
+
+  if (calendarShown && inputDate) {
+    const dateToDisplay = keepDateBetweenMinAndMax(inputDate, minDate, maxDate);
+    renderCalendar(calendarEl, dateToDisplay);
+  }
+};
+
+// #endregion Calendar - Date Selection View
+
+// #region Calendar - Month Selection View
+/**
+ * Display the month selection screen in the date picker.
+ *
+ * @param {HTMLButtonElement} el An element within the date picker component
+ * @returns {HTMLElement} a reference to the new calendar element
+ */
+const displayMonthSelection = (el, monthToDisplay) => {
+  const {
+    calendarEl,
+    statusEl,
+    calendarDate,
+    minDate,
+    maxDate,
+  } = getDatePickerContext(el);
+
+  const selectedMonth = calendarDate.getMonth();
+  const focusedMonth = monthToDisplay == null ? selectedMonth : monthToDisplay;
+
+  const months = MONTH_LABELS.map((month, index) => {
+    const monthToCheck = setMonth(calendarDate, index);
+
+    const isDisabled = isDatesMonthOutsideMinOrMax(
+      monthToCheck,
+      minDate,
+      maxDate
+    );
+
+    let tabindex = "-1";
+
+    const classes = [CALENDAR_MONTH_CLASS];
+    const isSelected = index === selectedMonth;
+
+    if (index === focusedMonth) {
+      tabindex = "0";
+      classes.push(CALENDAR_MONTH_FOCUSED_CLASS);
+    }
+
+    if (isSelected) {
+      classes.push(CALENDAR_MONTH_SELECTED_CLASS);
+    }
+
+    return `<button 
+        type="button"
+        tabindex="${tabindex}"
+        class="${classes.join(" ")}" 
+        data-value="${index}"
+        data-label="${month}"
+        aria-selected="${isSelected ? "true" : "false"}"
+        ${isDisabled ? `disabled="disabled"` : ""}
+      >${month}</button>`;
+  });
+
+  const monthsHtml = `<div tabindex="-1" class="${CALENDAR_MONTH_PICKER_CLASS}">
+    <table class="${CALENDAR_TABLE_CLASS}" role="presentation">
+      <tbody>
+        ${listToGridHtml(months, 3)}
+      </tbody>
+    </table>
+  </div>`;
+
+  const newCalendar = calendarEl.cloneNode();
+  newCalendar.innerHTML = monthsHtml;
+  calendarEl.parentNode.replaceChild(newCalendar, calendarEl);
+
+  statusEl.textContent = "Select a month.";
+
+  return newCalendar;
+};
+
+/**
+ * Select a month in the date picker component.
+ *
+ * @param {HTMLButtonElement} monthEl An month element within the date picker component
+ */
+const selectMonth = (monthEl) => {
+  if (monthEl.disabled) return;
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    monthEl
+  );
+  const selectedMonth = parseInt(monthEl.dataset.value, 10);
+  let date = setMonth(calendarDate, selectedMonth);
+  date = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = renderCalendar(calendarEl, date);
+  newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus();
+};
+
+// #endregion Calendar - Month Selection View
+
+// #region Calendar - Year Selection View
+
+/**
+ * Display the year selection screen in the date picker.
+ *
+ * @param {HTMLButtonElement} el An element within the date picker component
+ * @param {number} yearToDisplay year to display in year selection
+ * @returns {HTMLElement} a reference to the new calendar element
+ */
+const displayYearSelection = (el, yearToDisplay) => {
+  const {
+    calendarEl,
+    statusEl,
+    calendarDate,
+    minDate,
+    maxDate,
+  } = getDatePickerContext(el);
+
+  const selectedYear = calendarDate.getFullYear();
+  const focusedYear = yearToDisplay == null ? selectedYear : yearToDisplay;
+
+  let yearToChunk = focusedYear;
+  yearToChunk -= yearToChunk % YEAR_CHUNK;
+  yearToChunk = Math.max(0, yearToChunk);
+
+  const prevYearChunkDisabled = isDatesYearOutsideMinOrMax(
+    setYear(calendarDate, yearToChunk - 1),
+    minDate,
+    maxDate
+  );
+
+  const nextYearChunkDisabled = isDatesYearOutsideMinOrMax(
+    setYear(calendarDate, yearToChunk + YEAR_CHUNK),
+    minDate,
+    maxDate
+  );
+
+  const years = [];
+  let yearIndex = yearToChunk;
+  while (years.length < YEAR_CHUNK) {
+    const isDisabled = isDatesYearOutsideMinOrMax(
+      setYear(calendarDate, yearIndex),
+      minDate,
+      maxDate
+    );
+
+    let tabindex = "-1";
+
+    const classes = [CALENDAR_YEAR_CLASS];
+    const isSelected = yearIndex === selectedYear;
+
+    if (yearIndex === focusedYear) {
+      tabindex = "0";
+      classes.push(CALENDAR_YEAR_FOCUSED_CLASS);
+    }
+
+    if (isSelected) {
+      classes.push(CALENDAR_YEAR_SELECTED_CLASS);
+    }
+
+    years.push(
+      `<button 
+        type="button"
+        tabindex="${tabindex}"
+        class="${classes.join(" ")}" 
+        data-value="${yearIndex}"
+        aria-selected="${isSelected ? "true" : "false"}"
+        ${isDisabled ? `disabled="disabled"` : ""}
+      >${yearIndex}</button>`
+    );
+    yearIndex += 1;
+  }
+
+  const yearsHtml = listToGridHtml(years, 3);
+
+  const newCalendar = calendarEl.cloneNode();
+  newCalendar.innerHTML = `<div tabindex="-1" class="${CALENDAR_YEAR_PICKER_CLASS}">
+    <table class="${CALENDAR_TABLE_CLASS}" role="presentation">
+        <tbody>
+          <tr>
+            <td>
+              <button
+                type="button"
+                class="${CALENDAR_PREVIOUS_YEAR_CHUNK_CLASS}" 
+                aria-label="Navigér ${YEAR_CHUNK} år tilbage"
+                ${prevYearChunkDisabled ? `disabled="disabled"` : ""}
+              >&nbsp;</button>
+            </td>
+            <td colspan="3">
+              <table class="${CALENDAR_TABLE_CLASS}" role="presentation">
+                <tbody>
+                  ${yearsHtml}
+                </tbody>
+              </table>
+            </td>
+            <td>
+              <button
+                type="button"
+                class="${CALENDAR_NEXT_YEAR_CHUNK_CLASS}" 
+                aria-label="Navigér ${YEAR_CHUNK} år frem"
+                ${nextYearChunkDisabled ? `disabled="disabled"` : ""}
+              >&nbsp;</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>`;
+  calendarEl.parentNode.replaceChild(newCalendar, calendarEl);
+
+  statusEl.textContent = `Showing years ${yearToChunk} to ${
+    yearToChunk + YEAR_CHUNK - 1
+  }. Select a year.`;
+
+  return newCalendar;
+};
+
+/**
+ * Navigate back by years and display the year selection screen.
+ *
+ * @param {HTMLButtonElement} el An element within the date picker component
+ */
+const displayPreviousYearChunk = (el) => {
+  if (el.disabled) return;
+
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    el
+  );
+  const yearEl = calendarEl.querySelector(CALENDAR_YEAR_FOCUSED);
+  const selectedYear = parseInt(yearEl.textContent, 10);
+
+  let adjustedYear = selectedYear - YEAR_CHUNK;
+  adjustedYear = Math.max(0, adjustedYear);
+
+  const date = setYear(calendarDate, adjustedYear);
+  const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = displayYearSelection(
+    calendarEl,
+    cappedDate.getFullYear()
+  );
+
+  let nextToFocus = newCalendar.querySelector(CALENDAR_PREVIOUS_YEAR_CHUNK);
+  if (nextToFocus.disabled) {
+    nextToFocus = newCalendar.querySelector(CALENDAR_YEAR_PICKER);
+  }
+  nextToFocus.focus();
+};
+
+/**
+ * Navigate forward by years and display the year selection screen.
+ *
+ * @param {HTMLButtonElement} el An element within the date picker component
+ */
+const displayNextYearChunk = (el) => {
+  if (el.disabled) return;
+
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    el
+  );
+  const yearEl = calendarEl.querySelector(CALENDAR_YEAR_FOCUSED);
+  const selectedYear = parseInt(yearEl.textContent, 10);
+
+  let adjustedYear = selectedYear + YEAR_CHUNK;
+  adjustedYear = Math.max(0, adjustedYear);
+
+  const date = setYear(calendarDate, adjustedYear);
+  const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = displayYearSelection(
+    calendarEl,
+    cappedDate.getFullYear()
+  );
+
+  let nextToFocus = newCalendar.querySelector(CALENDAR_NEXT_YEAR_CHUNK);
+  if (nextToFocus.disabled) {
+    nextToFocus = newCalendar.querySelector(CALENDAR_YEAR_PICKER);
+  }
+  nextToFocus.focus();
+};
+
+/**
+ * Select a year in the date picker component.
+ *
+ * @param {HTMLButtonElement} yearEl A year element within the date picker component
+ */
+const selectYear = (yearEl) => {
+  if (yearEl.disabled) return;
+  const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+    yearEl
+  );
+  const selectedYear = parseInt(yearEl.innerHTML, 10);
+  let date = setYear(calendarDate, selectedYear);
+  date = keepDateBetweenMinAndMax(date, minDate, maxDate);
+  const newCalendar = renderCalendar(calendarEl, date);
+  newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus();
+};
+
+// #endregion Calendar - Year Selection View
+
+// #region Calendar Event Handling
+
+/**
+ * Hide the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleEscapeFromCalendar = (event) => {
+  const { datePickerEl, externalInputEl } = getDatePickerContext(event.target);
+
+  hideCalendar(datePickerEl);
+  externalInputEl.focus();
+
+  event.preventDefault();
+};
+
+// #endregion Calendar Event Handling
+
+// #region Calendar Date Event Handling
+
+/**
+ * Adjust the date and display the calendar if needed.
+ *
+ * @param {function} adjustDateFn function that returns the adjusted date
+ */
+const adjustCalendar = (adjustDateFn) => {
+  return (event) => {
+    const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+      event.target
+    );
+
+    const date = adjustDateFn(calendarDate);
+
+    const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate);
+    if (!isSameDay(calendarDate, cappedDate)) {
+      const newCalendar = renderCalendar(calendarEl, cappedDate);
+      newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus();
+    }
+    event.preventDefault();
+  };
+};
+
+/**
+ * Navigate back one week and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleUpFromDate = adjustCalendar((date) => subWeeks(date, 1));
+
+/**
+ * Navigate forward one week and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleDownFromDate = adjustCalendar((date) => addWeeks(date, 1));
+
+/**
+ * Navigate back one day and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleLeftFromDate = adjustCalendar((date) => subDays(date, 1));
+
+/**
+ * Navigate forward one day and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleRightFromDate = adjustCalendar((date) => addDays(date, 1));
+
+/**
+ * Navigate to the start of the week and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleHomeFromDate = adjustCalendar((date) => startOfWeek(date));
+
+/**
+ * Navigate to the end of the week and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleEndFromDate = adjustCalendar((date) => endOfWeek(date));
+
+/**
+ * Navigate forward one month and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handlePageDownFromDate = adjustCalendar((date) => addMonths(date, 1));
+
+/**
+ * Navigate back one month and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handlePageUpFromDate = adjustCalendar((date) => subMonths(date, 1));
+
+/**
+ * Navigate forward one year and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleShiftPageDownFromDate = adjustCalendar((date) => addYears(date, 1));
+
+/**
+ * Navigate back one year and display the calendar.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleShiftPageUpFromDate = adjustCalendar((date) => subYears(date, 1));
+
+/**
+ * display the calendar for the mousemove date.
+ *
+ * @param {MouseEvent} event The mousemove event
+ * @param {HTMLButtonElement} dateEl A date element within the date picker component
+ */
+const handleMousemoveFromDate = (dateEl) => {
+  if (dateEl.disabled) return;
+
+  const calendarEl = dateEl.closest(DATE_PICKER_CALENDAR);
+
+  const currentCalendarDate = calendarEl.dataset.value;
+  const hoverDate = dateEl.dataset.value;
+
+  if (hoverDate === currentCalendarDate) return;
+
+  const dateToDisplay = parseDateString(hoverDate);
+  const newCalendar = renderCalendar(calendarEl, dateToDisplay);
+  newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus();
+};
+
+// #endregion Calendar Date Event Handling
+
+// #region Calendar Month Event Handling
+
+/**
+ * Adjust the month and display the month selection screen if needed.
+ *
+ * @param {function} adjustMonthFn function that returns the adjusted month
+ */
+const adjustMonthSelectionScreen = (adjustMonthFn) => {
+  return (event) => {
+    const monthEl = event.target;
+    const selectedMonth = parseInt(monthEl.dataset.value, 10);
+    const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+      monthEl
+    );
+    const currentDate = setMonth(calendarDate, selectedMonth);
+
+    let adjustedMonth = adjustMonthFn(selectedMonth);
+    adjustedMonth = Math.max(0, Math.min(11, adjustedMonth));
+
+    const date = setMonth(calendarDate, adjustedMonth);
+    const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate);
+    if (!isSameMonth(currentDate, cappedDate)) {
+      const newCalendar = displayMonthSelection(
+        calendarEl,
+        cappedDate.getMonth()
+      );
+      newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus();
+    }
+    event.preventDefault();
+  };
+};
+
+/**
+ * Navigate back three months and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleUpFromMonth = adjustMonthSelectionScreen((month) => month - 3);
+
+/**
+ * Navigate forward three months and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleDownFromMonth = adjustMonthSelectionScreen((month) => month + 3);
+
+/**
+ * Navigate back one month and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleLeftFromMonth = adjustMonthSelectionScreen((month) => month - 1);
+
+/**
+ * Navigate forward one month and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleRightFromMonth = adjustMonthSelectionScreen((month) => month + 1);
+
+/**
+ * Navigate to the start of the row of months and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleHomeFromMonth = adjustMonthSelectionScreen(
+  (month) => month - (month % 3)
+);
+
+/**
+ * Navigate to the end of the row of months and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleEndFromMonth = adjustMonthSelectionScreen(
+  (month) => month + 2 - (month % 3)
+);
+
+/**
+ * Navigate to the last month (December) and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handlePageDownFromMonth = adjustMonthSelectionScreen(() => 11);
+
+/**
+ * Navigate to the first month (January) and display the month selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handlePageUpFromMonth = adjustMonthSelectionScreen(() => 0);
+
+/**
+ * update the focus on a month when the mouse moves.
+ *
+ * @param {MouseEvent} event The mousemove event
+ * @param {HTMLButtonElement} monthEl A month element within the date picker component
+ */
+const handleMousemoveFromMonth = (monthEl) => {
+  if (monthEl.disabled) return;
+  if (monthEl.classList.contains(CALENDAR_MONTH_FOCUSED_CLASS)) return;
+
+  const focusMonth = parseInt(monthEl.dataset.value, 10);
+
+  const newCalendar = displayMonthSelection(monthEl, focusMonth);
+  newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus();
+};
+
+// #endregion Calendar Month Event Handling
+
+// #region Calendar Year Event Handling
+
+/**
+ * Adjust the year and display the year selection screen if needed.
+ *
+ * @param {function} adjustYearFn function that returns the adjusted year
+ */
+const adjustYearSelectionScreen = (adjustYearFn) => {
+  return (event) => {
+    const yearEl = event.target;
+    const selectedYear = parseInt(yearEl.dataset.value, 10);
+    const { calendarEl, calendarDate, minDate, maxDate } = getDatePickerContext(
+      yearEl
+    );
+    const currentDate = setYear(calendarDate, selectedYear);
+
+    let adjustedYear = adjustYearFn(selectedYear);
+    adjustedYear = Math.max(0, adjustedYear);
+
+    const date = setYear(calendarDate, adjustedYear);
+    const cappedDate = keepDateBetweenMinAndMax(date, minDate, maxDate);
+    if (!isSameYear(currentDate, cappedDate)) {
+      const newCalendar = displayYearSelection(
+        calendarEl,
+        cappedDate.getFullYear()
+      );
+      newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus();
+    }
+    event.preventDefault();
+  };
+};
+
+/**
+ * Navigate back three years and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleUpFromYear = adjustYearSelectionScreen((year) => year - 3);
+
+/**
+ * Navigate forward three years and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleDownFromYear = adjustYearSelectionScreen((year) => year + 3);
+
+/**
+ * Navigate back one year and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleLeftFromYear = adjustYearSelectionScreen((year) => year - 1);
+
+/**
+ * Navigate forward one year and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleRightFromYear = adjustYearSelectionScreen((year) => year + 1);
+
+/**
+ * Navigate to the start of the row of years and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleHomeFromYear = adjustYearSelectionScreen(
+  (year) => year - (year % 3)
+);
+
+/**
+ * Navigate to the end of the row of years and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handleEndFromYear = adjustYearSelectionScreen(
+  (year) => year + 2 - (year % 3)
+);
+
+/**
+ * Navigate to back 12 years and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handlePageUpFromYear = adjustYearSelectionScreen(
+  (year) => year - YEAR_CHUNK
+);
+
+/**
+ * Navigate forward 12 years and display the year selection screen.
+ *
+ * @param {KeyboardEvent} event the keydown event
+ */
+const handlePageDownFromYear = adjustYearSelectionScreen(
+  (year) => year + YEAR_CHUNK
+);
+
+/**
+ * update the focus on a year when the mouse moves.
+ *
+ * @param {MouseEvent} event The mousemove event
+ * @param {HTMLButtonElement} dateEl A year element within the date picker component
+ */
+const handleMousemoveFromYear = (yearEl) => {
+  if (yearEl.disabled) return;
+  if (yearEl.classList.contains(CALENDAR_YEAR_FOCUSED_CLASS)) return;
+
+  const focusYear = parseInt(yearEl.dataset.value, 10);
+
+  const newCalendar = displayYearSelection(yearEl, focusYear);
+  newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus();
+};
+
+// #endregion Calendar Year Event Handling
+
+// #region Focus Handling Event Handling
+
+const tabHandler = (focusable) => {
+  const getFocusableContext = (el) => {
+    const { calendarEl } = getDatePickerContext(el);
+    const focusableElements = select(focusable, calendarEl);
+
+    const firstTabIndex = 0;
+    const lastTabIndex = focusableElements.length - 1;
+    const firstTabStop = focusableElements[firstTabIndex];
+    const lastTabStop = focusableElements[lastTabIndex];
+    const focusIndex = focusableElements.indexOf(activeElement());
+
+    const isLastTab = focusIndex === lastTabIndex;
+    const isFirstTab = focusIndex === firstTabIndex;
+    const isNotFound = focusIndex === -1;
+
+    return {
+      focusableElements,
+      isNotFound,
+      firstTabStop,
+      isFirstTab,
+      lastTabStop,
+      isLastTab,
+    };
+  };
+
+  return {
+    tabAhead(event) {
+      const { firstTabStop, isLastTab, isNotFound } = getFocusableContext(
+        event.target
+      );
+
+      if (isLastTab || isNotFound) {
+        event.preventDefault();
+        firstTabStop.focus();
+      }
+    },
+    tabBack(event) {
+      const { lastTabStop, isFirstTab, isNotFound } = getFocusableContext(
+        event.target
+      );
+
+      if (isFirstTab || isNotFound) {
+        event.preventDefault();
+        lastTabStop.focus();
+      }
+    },
+  };
+};
+
+const datePickerTabEventHandler = tabHandler(DATE_PICKER_FOCUSABLE);
+const monthPickerTabEventHandler = tabHandler(MONTH_PICKER_FOCUSABLE);
+const yearPickerTabEventHandler = tabHandler(YEAR_PICKER_FOCUSABLE);
+
+// #endregion Focus Handling Event Handling
+
+// #region Date Picker Event Delegation Registration / Component
+
+const datePickerEvents = {
+  [CLICK]: {
+    [DATE_PICKER_BUTTON]() {
+      toggleCalendar(this);
+    },
+    [CALENDAR_DATE]() {
+      selectDate(this);
+    },
+    [CALENDAR_MONTH]() {
+      selectMonth(this);
+    },
+    [CALENDAR_YEAR]() {
+      selectYear(this);
+    },
+    [CALENDAR_PREVIOUS_MONTH]() {
+      displayPreviousMonth(this);
+    },
+    [CALENDAR_NEXT_MONTH]() {
+      displayNextMonth(this);
+    },
+    [CALENDAR_PREVIOUS_YEAR]() {
+      displayPreviousYear(this);
+    },
+    [CALENDAR_NEXT_YEAR]() {
+      displayNextYear(this);
+    },
+    [CALENDAR_PREVIOUS_YEAR_CHUNK]() {
+      displayPreviousYearChunk(this);
+    },
+    [CALENDAR_NEXT_YEAR_CHUNK]() {
+      displayNextYearChunk(this);
+    },
+    [CALENDAR_MONTH_SELECTION]() {
+      const newCalendar = displayMonthSelection(this);
+      newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus();
+    },
+    [CALENDAR_YEAR_SELECTION]() {
+      const newCalendar = displayYearSelection(this);
+      newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus();
+    },
+  },
+  keyup: {
+    [DATE_PICKER_CALENDAR](event) {
+      const keydown = this.dataset.keydownKeyCode;
+      if (`${event.keyCode}` !== keydown) {
+        event.preventDefault();
+      }
+    },
+  },
+  keydown: {
+    [DATE_PICKER_EXTERNAL_INPUT](event) {
+      if (event.keyCode === ENTER_KEYCODE) {
+        validateDateInput(this);
+      }
+    },
+    [CALENDAR_DATE]: keymap({
+      Up: handleUpFromDate,
+      ArrowUp: handleUpFromDate,
+      Down: handleDownFromDate,
+      ArrowDown: handleDownFromDate,
+      Left: handleLeftFromDate,
+      ArrowLeft: handleLeftFromDate,
+      Right: handleRightFromDate,
+      ArrowRight: handleRightFromDate,
+      Home: handleHomeFromDate,
+      End: handleEndFromDate,
+      PageDown: handlePageDownFromDate,
+      PageUp: handlePageUpFromDate,
+      "Shift+PageDown": handleShiftPageDownFromDate,
+      "Shift+PageUp": handleShiftPageUpFromDate,
+    }),
+    [CALENDAR_DATE_PICKER]: keymap({
+      Tab: datePickerTabEventHandler.tabAhead,
+      "Shift+Tab": datePickerTabEventHandler.tabBack,
+    }),
+    [CALENDAR_MONTH]: keymap({
+      Up: handleUpFromMonth,
+      ArrowUp: handleUpFromMonth,
+      Down: handleDownFromMonth,
+      ArrowDown: handleDownFromMonth,
+      Left: handleLeftFromMonth,
+      ArrowLeft: handleLeftFromMonth,
+      Right: handleRightFromMonth,
+      ArrowRight: handleRightFromMonth,
+      Home: handleHomeFromMonth,
+      End: handleEndFromMonth,
+      PageDown: handlePageDownFromMonth,
+      PageUp: handlePageUpFromMonth,
+    }),
+    [CALENDAR_MONTH_PICKER]: keymap({
+      Tab: monthPickerTabEventHandler.tabAhead,
+      "Shift+Tab": monthPickerTabEventHandler.tabBack,
+    }),
+    [CALENDAR_YEAR]: keymap({
+      Up: handleUpFromYear,
+      ArrowUp: handleUpFromYear,
+      Down: handleDownFromYear,
+      ArrowDown: handleDownFromYear,
+      Left: handleLeftFromYear,
+      ArrowLeft: handleLeftFromYear,
+      Right: handleRightFromYear,
+      ArrowRight: handleRightFromYear,
+      Home: handleHomeFromYear,
+      End: handleEndFromYear,
+      PageDown: handlePageDownFromYear,
+      PageUp: handlePageUpFromYear,
+    }),
+    [CALENDAR_YEAR_PICKER]: keymap({
+      Tab: yearPickerTabEventHandler.tabAhead,
+      "Shift+Tab": yearPickerTabEventHandler.tabBack,
+    }),
+    [DATE_PICKER_CALENDAR](event) {
+      this.dataset.keydownKeyCode = event.keyCode;
+    },
+    [DATE_PICKER](event) {
+      const keyMap = keymap({
+        Escape: handleEscapeFromCalendar,
+      });
+
+      keyMap(event);
+    },
+  },
+  focusout: {
+    [DATE_PICKER_EXTERNAL_INPUT]() {
+      validateDateInput(this);
+    },
+    [DATE_PICKER](event) {
+      if (!this.contains(event.relatedTarget)) {
+        hideCalendar(this);
+      }
+    },
+  },
+  input: {
+    [DATE_PICKER_EXTERNAL_INPUT]() {
+      reconcileInputValues(this);
+      updateCalendarIfVisible(this);
+    },
+  },
+};
+
+if (!isIosDevice()) {
+  datePickerEvents.mousemove = {
+    [CALENDAR_DATE_CURRENT_MONTH]() {
+      handleMousemoveFromDate(this);
+    },
+    [CALENDAR_MONTH]() {
+      handleMousemoveFromMonth(this);
+    },
+    [CALENDAR_YEAR]() {
+      handleMousemoveFromYear(this);
+    },
+  };
+}
+
+const datePicker = behavior(datePickerEvents, {
+  init(root) {
+    select(DATE_PICKER, root).forEach((datePickerEl) => {
+      if(!datePickerEl.classList.contains(DATE_PICKER_INITIALIZED_CLASS)){
+        enhanceDatePicker(datePickerEl);
+      }
+    });
+  },
+  getDatePickerContext,
+  disable,
+  enable,
+  isDateInputInvalid,
+  setCalendarValue,
+  validateDateInput,
+  renderCalendar,
+  updateCalendarIfVisible,
+});
+
+// #endregion Date Picker Event Delegation Registration / Component
+
+module.exports = datePicker;