@ministryofjustice/frontend 3.5.0 → 3.6.1

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

@@ -1,252 +1,242 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
-})(this, (function () { 'use strict';
-
-	function getDefaultExportFromCjs (x) {
-		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-	}
-
-	/**
-	 * Date picker config
-	 *
-	 * @typedef {object} DatePickerConfig
-	 * @property {string} [excludedDates] - Dates that cannot be selected
-	 * @property {string} [excludedDays] - Days that cannot be selected
-	 * @property {boolean} [leadingZeroes] - Whether to add leading zeroes when populating the field
-	 * @property {string} [minDate] - The earliest available date
-	 * @property {string} [maxDate] - The latest available date
-	 * @property {string} [weekStartDay] - First day of the week in calendar view
-	 */
-
-	var datePicker$1;
-	var hasRequiredDatePicker;
-
-	function requireDatePicker () {
-		if (hasRequiredDatePicker) return datePicker$1;
-		hasRequiredDatePicker = 1;
-		/**
-		 * @param {HTMLElement} $module - HTML element
-		 * @param {DatePickerConfig} config - config object
-		 * @class
-		 */
-		function DatePicker($module, config = {}) {
-		  if (!$module) {
-		    return this
-		  }
-
-		  const schema = Object.freeze({
-		    properties: {
-		      excludedDates: { type: 'string' },
-		      excludedDays: { type: 'string' },
-		      leadingZeros: { type: 'string' },
-		      maxDate: { type: 'string' },
-		      minDate: { type: 'string' },
-		      weekStartDay: { type: 'string' }
-		    }
-		  });
-
-		  const defaults = {
-		    leadingZeros: false,
-		    weekStartDay: 'monday'
-		  };
-
-		  // data attributes override JS config, which overrides defaults
-		  this.config = this.mergeConfigs(
-		    defaults,
-		    config,
-		    this.parseDataset(schema, $module.dataset)
-		  );
-
-		  this.dayLabels = [
-		    'Monday',
-		    'Tuesday',
-		    'Wednesday',
-		    'Thursday',
-		    'Friday',
-		    'Saturday',
-		    'Sunday'
-		  ];
-
-		  this.monthLabels = [
-		    'January',
-		    'February',
-		    'March',
-		    'April',
-		    'May',
-		    'June',
-		    'July',
-		    'August',
-		    'September',
-		    'October',
-		    'November',
-		    'December'
-		  ];
-
-		  this.currentDate = new Date();
-		  this.currentDate.setHours(0, 0, 0, 0);
-		  this.calendarDays = [];
-		  this.excludedDates = [];
-		  this.excludedDays = [];
-
-		  this.buttonClass = 'moj-datepicker__button';
-		  this.selectedDayButtonClass = 'moj-datepicker__button--selected';
-		  this.currentDayButtonClass = 'moj-datepicker__button--current';
-		  this.todayButtonClass = 'moj-datepicker__button--today';
-
-		  this.$module = $module;
-		  this.$input = $module.querySelector('.moj-js-datepicker-input');
-		}
-
-		DatePicker.prototype.init = function () {
-		  // Check that required elements are present
-		  if (!this.$input) {
-		    return
-		  }
-		  if (this.$module.dataset.initialized) {
-		    return
-		  }
-
-		  this.setOptions();
-		  this.initControls();
-		  this.$module.setAttribute('data-initialized', 'true');
-		};
-
-		DatePicker.prototype.initControls = function () {
-		  this.id = `datepicker-${this.$input.id}`;
-
-		  this.$dialog = this.createDialog();
-		  this.createCalendarHeaders();
-
-		  const $componentWrapper = document.createElement('div');
-		  const $inputWrapper = document.createElement('div');
-		  $componentWrapper.classList.add('moj-datepicker__wrapper');
-		  $inputWrapper.classList.add('govuk-input__wrapper');
-
-		  this.$input.parentNode.insertBefore($componentWrapper, this.$input);
-		  $componentWrapper.appendChild($inputWrapper);
-		  $inputWrapper.appendChild(this.$input);
-
-		  $inputWrapper.insertAdjacentHTML('beforeend', this.toggleTemplate());
-		  $componentWrapper.insertAdjacentElement('beforeend', this.$dialog);
-
-		  this.$calendarButton = this.$module.querySelector('.moj-js-datepicker-toggle');
-		  this.$dialogTitle = this.$dialog.querySelector(
-		    '.moj-js-datepicker-month-year'
-		  );
-
-		  this.createCalendar();
-
-		  this.$prevMonthButton = this.$dialog.querySelector(
-		    '.moj-js-datepicker-prev-month'
-		  );
-		  this.$prevYearButton = this.$dialog.querySelector(
-		    '.moj-js-datepicker-prev-year'
-		  );
-		  this.$nextMonthButton = this.$dialog.querySelector(
-		    '.moj-js-datepicker-next-month'
-		  );
-		  this.$nextYearButton = this.$dialog.querySelector(
-		    '.moj-js-datepicker-next-year'
-		  );
-		  this.$cancelButton = this.$dialog.querySelector('.moj-js-datepicker-cancel');
-		  this.$okButton = this.$dialog.querySelector('.moj-js-datepicker-ok');
-
-		  // add event listeners
-		  this.$prevMonthButton.addEventListener('click', (event) =>
-		    this.focusPreviousMonth(event, false)
-		  );
-		  this.$prevYearButton.addEventListener('click', (event) =>
-		    this.focusPreviousYear(event, false)
-		  );
-		  this.$nextMonthButton.addEventListener('click', (event) =>
-		    this.focusNextMonth(event, false)
-		  );
-		  this.$nextYearButton.addEventListener('click', (event) =>
-		    this.focusNextYear(event, false)
-		  );
-		  this.$cancelButton.addEventListener('click', (event) => {
-		    event.preventDefault();
-		    this.closeDialog(event);
-		  });
-		  this.$okButton.addEventListener('click', () => {
-		    this.selectDate(this.currentDate);
-		  });
-
-		  const dialogButtons = this.$dialog.querySelectorAll(
-		    'button:not([disabled="true"])'
-		  );
-		  // eslint-disable-next-line prefer-destructuring
-		  this.$firstButtonInDialog = dialogButtons[0];
-		  this.$lastButtonInDialog = dialogButtons[dialogButtons.length - 1];
-		  this.$firstButtonInDialog.addEventListener('keydown', (event) =>
-		    this.firstButtonKeydown(event)
-		  );
-		  this.$lastButtonInDialog.addEventListener('keydown', (event) =>
-		    this.lastButtonKeydown(event)
-		  );
-
-		  this.$calendarButton.addEventListener('click', (event) =>
-		    this.toggleDialog(event)
-		  );
-
-		  this.$dialog.addEventListener('keydown', (event) => {
-		    if (event.key === 'Escape') {
-		      this.closeDialog();
-		      event.preventDefault();
-		      event.stopPropagation();
-		    }
-		  });
-
-		  document.body.addEventListener('mouseup', (event) =>
-		    this.backgroundClick(event)
-		  );
-
-		  // populates calendar with initial dates, avoids Wave errors about null buttons
-		  this.updateCalendar();
-		};
-
-		DatePicker.prototype.createDialog = function () {
-		  const titleId = `datepicker-title-${this.$input.id}`;
-		  const $dialog = document.createElement('div');
-
-		  $dialog.id = this.id;
-		  $dialog.setAttribute('class', 'moj-datepicker__dialog');
-		  $dialog.setAttribute('role', 'dialog');
-		  $dialog.setAttribute('aria-modal', 'true');
-		  $dialog.setAttribute('aria-labelledby', titleId);
-		  $dialog.innerHTML = this.dialogTemplate(titleId);
-		  $dialog.hidden = true;
-
-		  return $dialog
-		};
-
-		DatePicker.prototype.createCalendar = function () {
-		  const $tbody = this.$dialog.querySelector('tbody');
-		  let dayCount = 0;
-		  for (let i = 0; i < 6; i++) {
-		    // create row
-		    const $row = $tbody.insertRow(i);
-
-		    for (let j = 0; j < 7; j++) {
-		      // create cell (day)
-		      const $cell = document.createElement('td');
-		      const $dateButton = document.createElement('button');
-
-		      $cell.appendChild($dateButton);
-		      $row.appendChild($cell);
-
-		      const calendarDay = new DSCalendarDay($dateButton, dayCount, i, j, this);
-		      calendarDay.init();
-		      this.calendarDays.push(calendarDay);
-		      dayCount++;
-		    }
-		  }
-		};
-
-		DatePicker.prototype.toggleTemplate = function () {
-		  return `<button class="moj-datepicker__toggle moj-js-datepicker-toggle" type="button" aria-haspopup="dialog" aria-controls="${this.id}" aria-expanded="false">
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * Date picker config
+   *
+   * @typedef {object} DatePickerConfig
+   * @property {string} [excludedDates] - Dates that cannot be selected
+   * @property {string} [excludedDays] - Days that cannot be selected
+   * @property {boolean} [leadingZeroes] - Whether to add leading zeroes when populating the field
+   * @property {string} [minDate] - The earliest available date
+   * @property {string} [maxDate] - The latest available date
+   * @property {string} [weekStartDay] - First day of the week in calendar view
+   */
+
+  /**
+   * @param {HTMLElement} $module - HTML element
+   * @param {DatePickerConfig} config - config object
+   * @class
+   */
+  function DatePicker($module, config = {}) {
+    if (!$module) {
+      return this
+    }
+
+    const schema = Object.freeze({
+      properties: {
+        excludedDates: { type: 'string' },
+        excludedDays: { type: 'string' },
+        leadingZeros: { type: 'string' },
+        maxDate: { type: 'string' },
+        minDate: { type: 'string' },
+        weekStartDay: { type: 'string' }
+      }
+    });
+
+    const defaults = {
+      leadingZeros: false,
+      weekStartDay: 'monday'
+    };
+
+    // data attributes override JS config, which overrides defaults
+    this.config = this.mergeConfigs(
+      defaults,
+      config,
+      this.parseDataset(schema, $module.dataset)
+    );
+
+    this.dayLabels = [
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+      'Sunday'
+    ];
+
+    this.monthLabels = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ];
+
+    this.currentDate = new Date();
+    this.currentDate.setHours(0, 0, 0, 0);
+    this.calendarDays = [];
+    this.excludedDates = [];
+    this.excludedDays = [];
+
+    this.buttonClass = 'moj-datepicker__button';
+    this.selectedDayButtonClass = 'moj-datepicker__button--selected';
+    this.currentDayButtonClass = 'moj-datepicker__button--current';
+    this.todayButtonClass = 'moj-datepicker__button--today';
+
+    this.$module = $module;
+    this.$input = $module.querySelector('.moj-js-datepicker-input');
+  }
+
+  DatePicker.prototype.init = function () {
+    // Check that required elements are present
+    if (!this.$input) {
+      return
+    }
+    if (this.$module.dataset.initialized) {
+      return
+    }
+
+    this.setOptions();
+    this.initControls();
+    this.$module.setAttribute('data-initialized', 'true');
+  };
+
+  DatePicker.prototype.initControls = function () {
+    this.id = `datepicker-${this.$input.id}`;
+
+    this.$dialog = this.createDialog();
+    this.createCalendarHeaders();
+
+    const $componentWrapper = document.createElement('div');
+    const $inputWrapper = document.createElement('div');
+    $componentWrapper.classList.add('moj-datepicker__wrapper');
+    $inputWrapper.classList.add('govuk-input__wrapper');
+
+    this.$input.parentNode.insertBefore($componentWrapper, this.$input);
+    $componentWrapper.appendChild($inputWrapper);
+    $inputWrapper.appendChild(this.$input);
+
+    $inputWrapper.insertAdjacentHTML('beforeend', this.toggleTemplate());
+    $componentWrapper.insertAdjacentElement('beforeend', this.$dialog);
+
+    this.$calendarButton = this.$module.querySelector('.moj-js-datepicker-toggle');
+    this.$dialogTitle = this.$dialog.querySelector(
+      '.moj-js-datepicker-month-year'
+    );
+
+    this.createCalendar();
+
+    this.$prevMonthButton = this.$dialog.querySelector(
+      '.moj-js-datepicker-prev-month'
+    );
+    this.$prevYearButton = this.$dialog.querySelector(
+      '.moj-js-datepicker-prev-year'
+    );
+    this.$nextMonthButton = this.$dialog.querySelector(
+      '.moj-js-datepicker-next-month'
+    );
+    this.$nextYearButton = this.$dialog.querySelector(
+      '.moj-js-datepicker-next-year'
+    );
+    this.$cancelButton = this.$dialog.querySelector('.moj-js-datepicker-cancel');
+    this.$okButton = this.$dialog.querySelector('.moj-js-datepicker-ok');
+
+    // add event listeners
+    this.$prevMonthButton.addEventListener('click', (event) =>
+      this.focusPreviousMonth(event, false)
+    );
+    this.$prevYearButton.addEventListener('click', (event) =>
+      this.focusPreviousYear(event, false)
+    );
+    this.$nextMonthButton.addEventListener('click', (event) =>
+      this.focusNextMonth(event, false)
+    );
+    this.$nextYearButton.addEventListener('click', (event) =>
+      this.focusNextYear(event, false)
+    );
+    this.$cancelButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.closeDialog(event);
+    });
+    this.$okButton.addEventListener('click', () => {
+      this.selectDate(this.currentDate);
+    });
+
+    const dialogButtons = this.$dialog.querySelectorAll(
+      'button:not([disabled="true"])'
+    );
+    // eslint-disable-next-line prefer-destructuring
+    this.$firstButtonInDialog = dialogButtons[0];
+    this.$lastButtonInDialog = dialogButtons[dialogButtons.length - 1];
+    this.$firstButtonInDialog.addEventListener('keydown', (event) =>
+      this.firstButtonKeydown(event)
+    );
+    this.$lastButtonInDialog.addEventListener('keydown', (event) =>
+      this.lastButtonKeydown(event)
+    );
+
+    this.$calendarButton.addEventListener('click', (event) =>
+      this.toggleDialog(event)
+    );
+
+    this.$dialog.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        this.closeDialog();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+
+    document.body.addEventListener('mouseup', (event) =>
+      this.backgroundClick(event)
+    );
+
+    // populates calendar with initial dates, avoids Wave errors about null buttons
+    this.updateCalendar();
+  };
+
+  DatePicker.prototype.createDialog = function () {
+    const titleId = `datepicker-title-${this.$input.id}`;
+    const $dialog = document.createElement('div');
+
+    $dialog.id = this.id;
+    $dialog.setAttribute('class', 'moj-datepicker__dialog');
+    $dialog.setAttribute('role', 'dialog');
+    $dialog.setAttribute('aria-modal', 'true');
+    $dialog.setAttribute('aria-labelledby', titleId);
+    $dialog.innerHTML = this.dialogTemplate(titleId);
+    $dialog.hidden = true;
+
+    return $dialog
+  };
+
+  DatePicker.prototype.createCalendar = function () {
+    const $tbody = this.$dialog.querySelector('tbody');
+    let dayCount = 0;
+    for (let i = 0; i < 6; i++) {
+      // create row
+      const $row = $tbody.insertRow(i);
+
+      for (let j = 0; j < 7; j++) {
+        // create cell (day)
+        const $cell = document.createElement('td');
+        const $dateButton = document.createElement('button');
+
+        $cell.appendChild($dateButton);
+        $row.appendChild($cell);
+
+        const calendarDay = new DSCalendarDay($dateButton, dayCount, i, j, this);
+        calendarDay.init();
+        this.calendarDays.push(calendarDay);
+        dayCount++;
+      }
+    }
+  };
+
+  DatePicker.prototype.toggleTemplate = function () {
+    return `<button class="moj-datepicker__toggle moj-js-datepicker-toggle" type="button" aria-haspopup="dialog" aria-controls="${this.id}" aria-expanded="false">
             <span class="govuk-visually-hidden">Choose date</span>
             <svg width="32" height="24" focusable="false" class="moj-datepicker-icon" aria-hidden="true" role="img" viewBox="0 0 22 22">
               <path
@@ -259,16 +249,16 @@
               <rect x="16.8667" width="1.46667" height="5.13333" rx="0.733333" fill="currentColor"></rect>
             </svg>
           </button>`
-		};
-
-		/**
-		 * HTML template for calendar dialog
-		 *
-		 * @param {string} [titleId] - Id attribute for dialog title
-		 * @returns {string}
-		 */
-		DatePicker.prototype.dialogTemplate = function (titleId) {
-		  return `<div class="moj-datepicker__dialog-header">
+  };
+
+  /**
+   * HTML template for calendar dialog
+   *
+   * @param {string} [titleId] - Id attribute for dialog title
+   * @returns {string}
+   */
+  DatePicker.prototype.dialogTemplate = function (titleId) {
+    return `<div class="moj-datepicker__dialog-header">
             <div class="moj-datepicker__dialog-navbuttons">
               <button class="moj-datepicker__button moj-js-datepicker-prev-year">
                 <span class="govuk-visually-hidden">Previous year</span>
@@ -318,669 +308,662 @@
             <button type="button" class="govuk-button moj-js-datepicker-ok">Select</button>
             <button type="button" class="govuk-button govuk-button--secondary moj-js-datepicker-cancel">Close</button>
           </div>`
-		};
-
-		DatePicker.prototype.createCalendarHeaders = function () {
-		  this.dayLabels.forEach((day) => {
-		    const html = `<th scope="col"><span aria-hidden="true">${day.substring(0, 3)}</span><span class="govuk-visually-hidden">${day}</span></th>`;
-		    const $headerRow = this.$dialog.querySelector('thead > tr');
-		    $headerRow.insertAdjacentHTML('beforeend', html);
-		  });
-		};
-
-		/**
-		 * Pads given number with leading zeros
-		 *
-		 * @param {number} value - The value to be padded
-		 * @param {number} length - The length in characters of the output
-		 * @returns {string}
-		 */
-		DatePicker.prototype.leadingZeros = function (value, length = 2) {
-		  let ret = value.toString();
-
-		  while (ret.length < length) {
-		    ret = `0${ret}`;
-		  }
-
-		  return ret
-		};
-
-		DatePicker.prototype.setOptions = function () {
-		  this.setMinAndMaxDatesOnCalendar();
-		  this.setExcludedDates();
-		  this.setExcludedDays();
-		  this.setLeadingZeros();
-		  this.setWeekStartDay();
-		};
-
-		DatePicker.prototype.setMinAndMaxDatesOnCalendar = function () {
-		  if (this.config.minDate) {
-		    this.minDate = this.formattedDateFromString(this.config.minDate, null);
-		    if (this.minDate && this.currentDate < this.minDate) {
-		      this.currentDate = this.minDate;
-		    }
-		  }
-
-		  if (this.config.maxDate) {
-		    this.maxDate = this.formattedDateFromString(this.config.maxDate, null);
-		    if (this.maxDate && this.currentDate > this.maxDate) {
-		      this.currentDate = this.maxDate;
-		    }
-		  }
-		};
-
-		DatePicker.prototype.setExcludedDates = function () {
-		  if (this.config.excludedDates) {
-		    this.excludedDates = this.config.excludedDates
-		      .replace(/\s+/, ' ')
-		      .split(' ')
-		      .map((item) => {
-		        return item.includes('-')
-		          ? this.parseDateRangeString(item)
-		          : this.formattedDateFromString(item)
-		      })
-		      .flat()
-		      .filter((item) => item);
-		  }
-		};
-
-		/*
-		 * Parses a daterange string into an array of dates
-		 * @param {String} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
-		 * @returns {Date[]}
-		 */
-		DatePicker.prototype.parseDateRangeString = function (datestring) {
-		  const dates = [];
-		  const [startDate, endDate] = datestring
-		    .split('-')
-		    .map((d) => this.formattedDateFromString(d, null));
-
-		  if (startDate && endDate) {
-		    const date = new Date(startDate.getTime());
-		    /* eslint-disable no-unmodified-loop-condition */
-		    while (date <= endDate) {
-		      dates.push(new Date(date));
-		      date.setDate(date.getDate() + 1);
-		    }
-		    /* eslint-enable no-unmodified-loop-condition */
-		  }
-		  return dates
-		};
-
-		DatePicker.prototype.setExcludedDays = function () {
-		  if (this.config.excludedDays) {
-		    // lowercase and arrange dayLabels to put indexOf sunday == 0 for comparison
-		    // with getDay() function
-		    const weekDays = this.dayLabels.map((item) => item.toLowerCase());
-		    if (this.config.weekStartDay === 'monday') {
-		      weekDays.unshift(weekDays.pop());
-		    }
-
-		    this.excludedDays = this.config.excludedDays
-		      .replace(/\s+/, ' ')
-		      .toLowerCase()
-		      .split(' ')
-		      .map((item) => weekDays.indexOf(item))
-		      .filter((item) => item !== -1);
-		  }
-		};
-
-		DatePicker.prototype.setLeadingZeros = function () {
-		  if (typeof this.config.leadingZeros !== 'boolean') {
-		    if (this.config.leadingZeros.toLowerCase() === 'true') {
-		      this.config.leadingZeros = true;
-		      return
-		    }
-		    if (this.config.leadingZeros.toLowerCase() === 'false') {
-		      this.config.leadingZeros = false;
-		    }
-		  }
-		};
-
-		DatePicker.prototype.setWeekStartDay = function () {
-		  const weekStartDayParam = this.config.weekStartDay;
-		  if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
-		    this.config.weekStartDay = 'sunday';
-		    // Rotate dayLabels array to put Sunday as the first item
-		    this.dayLabels.unshift(this.dayLabels.pop());
-		  } else {
-		    this.config.weekStartDay = 'monday';
-		  }
-		};
-
-		/**
-		 * Determine if a date is selecteable
-		 *
-		 * @param {Date} date - the date to check
-		 * @returns {boolean}
-		 */
-		DatePicker.prototype.isExcludedDate = function (date) {
-		  // This comparison does not work correctly - it will exclude the mindate itself
-		  // see: https://github.com/ministryofjustice/moj-frontend/issues/923
-		  if (this.minDate && this.minDate > date) {
-		    return true
-		  }
-
-		  // This comparison works as expected - the maxdate will not be excluded
-		  if (this.maxDate && this.maxDate < date) {
-		    return true
-		  }
-
-		  for (const excludedDate of this.excludedDates) {
-		    if (date.toDateString() === excludedDate.toDateString()) {
-		      return true
-		    }
-		  }
-
-		  if (this.excludedDays.includes(date.getDay())) {
-		    return true
-		  }
-
-		  return false
-		};
-
-		/**
-		 * Get a Date object from a string
-		 *
-		 * @param {string} dateString - string in the format d/m/yyyy dd/mm/yyyy
-		 * @param {Date} fallback - date object to return if formatting fails
-		 * @returns {Date}
-		 */
-		DatePicker.prototype.formattedDateFromString = function (
-		  dateString,
-		  fallback = new Date()
-		) {
-		  let formattedDate = null;
-		  // Accepts d/m/yyyy and dd/mm/yyyy
-		  const dateFormatPattern = /(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})/;
-
-		  if (!dateFormatPattern.test(dateString)) return fallback
-
-		  const match = dateString.match(dateFormatPattern);
-		  const day = match[1];
-		  const month = match[3];
-		  const year = match[4];
-
-		  formattedDate = new Date(`${year}-${month}-${day}`);
-		  if (formattedDate instanceof Date && !isNaN(formattedDate)) {
-		    return formattedDate
-		  }
-		  return fallback
-		};
-
-		/**
-		 * Get a formatted date string from a Date object
-		 *
-		 * @param {Date} date - date to format to a string
-		 * @returns {string}
-		 */
-		DatePicker.prototype.formattedDateFromDate = function (date) {
-		  if (this.config.leadingZeros) {
-		    return `${this.leadingZeros(date.getDate())}/${this.leadingZeros(date.getMonth() + 1)}/${date.getFullYear()}`
-		  }
-
-		  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
-		};
-
-		/**
-		 * Get a human readable date in the format Monday 2 March 2024
-		 *
-		 * @param {Date} date - date to format
-		 * @returns {string}
-		 */
-		DatePicker.prototype.formattedDateHuman = function (date) {
-		  return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`
-		};
-
-		DatePicker.prototype.backgroundClick = function (event) {
-		  if (
-		    this.isOpen() &&
-		    !this.$dialog.contains(event.target) &&
-		    !this.$input.contains(event.target) &&
-		    !this.$calendarButton.contains(event.target)
-		  ) {
-		    event.preventDefault();
-		    this.closeDialog();
-		  }
-		};
-
-		DatePicker.prototype.firstButtonKeydown = function (event) {
-		  if (event.key === 'Tab' && event.shiftKey) {
-		    this.$lastButtonInDialog.focus();
-		    event.preventDefault();
-		  }
-		};
-
-		DatePicker.prototype.lastButtonKeydown = function (event) {
-		  if (event.key === 'Tab' && !event.shiftKey) {
-		    this.$firstButtonInDialog.focus();
-		    event.preventDefault();
-		  }
-		};
-
-		// render calendar
-		DatePicker.prototype.updateCalendar = function () {
-		  this.$dialogTitle.innerHTML = `${this.monthLabels[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
-
-		  const day = this.currentDate;
-		  const firstOfMonth = new Date(day.getFullYear(), day.getMonth(), 1);
-		  let dayOfWeek;
-
-		  if (this.config.weekStartDay === 'monday') {
-		    dayOfWeek = firstOfMonth.getDay() === 0 ? 6 : firstOfMonth.getDay() - 1; // Change logic to make Monday first day of week, i.e. 0
-		  } else {
-		    dayOfWeek = firstOfMonth.getDay();
-		  }
-
-		  firstOfMonth.setDate(firstOfMonth.getDate() - dayOfWeek);
-
-		  const thisDay = new Date(firstOfMonth);
-
-		  // loop through our days
-		  for (let i = 0; i < this.calendarDays.length; i++) {
-		    const hidden = thisDay.getMonth() !== day.getMonth();
-		    const disabled = this.isExcludedDate(thisDay);
-
-		    this.calendarDays[i].update(thisDay, hidden, disabled);
-
-		    thisDay.setDate(thisDay.getDate() + 1);
-		  }
-		};
-
-		DatePicker.prototype.setCurrentDate = function (focus = true) {
-		  const { currentDate } = this;
-		  this.calendarDays.forEach((calendarDay) => {
-		    calendarDay.button.classList.add('moj-datepicker__button');
-		    calendarDay.button.classList.add('moj-datepicker__calendar-day');
-		    calendarDay.button.setAttribute('tabindex', -1);
-		    calendarDay.button.classList.remove(this.selectedDayButtonClass);
-		    const calendarDayDate = calendarDay.date;
-		    calendarDayDate.setHours(0, 0, 0, 0);
-
-		    const today = new Date();
-		    today.setHours(0, 0, 0, 0);
-
-		    if (
-		      calendarDayDate.getTime() ===
-		      currentDate.getTime() /* && !calendarDay.button.disabled */
-		    ) {
-		      if (focus) {
-		        calendarDay.button.setAttribute('tabindex', 0);
-		        calendarDay.button.focus();
-		        calendarDay.button.classList.add(this.selectedDayButtonClass);
-		      }
-		    }
-
-		    if (
-		      this.inputDate &&
-		      calendarDayDate.getTime() === this.inputDate.getTime()
-		    ) {
-		      calendarDay.button.classList.add(this.currentDayButtonClass);
-		      calendarDay.button.setAttribute('aria-current', 'date');
-		    } else {
-		      calendarDay.button.classList.remove(this.currentDayButtonClass);
-		      calendarDay.button.removeAttribute('aria-current');
-		    }
-
-		    if (calendarDayDate.getTime() === today.getTime()) {
-		      calendarDay.button.classList.add(this.todayButtonClass);
-		    } else {
-		      calendarDay.button.classList.remove(this.todayButtonClass);
-		    }
-		  });
-
-		  // if no date is tab-able, make the first non-disabled date tab-able
-		  if (!focus) {
-		    const enabledDays = this.calendarDays.filter((calendarDay) => {
-		      return (
-		        window.getComputedStyle(calendarDay.button).display === 'block' &&
-		        !calendarDay.button.disabled
-		      )
-		    });
-
-		    enabledDays[0].button.setAttribute('tabindex', 0);
-
-		    this.currentDate = enabledDays[0].date;
-		  }
-		};
-
-		DatePicker.prototype.selectDate = function (date) {
-		  if (this.isExcludedDate(date)) {
-		    return
-		  }
-
-		  this.$calendarButton.querySelector('span').innerText =
-		    `Choose date. Selected date is ${this.formattedDateHuman(date)}`;
-		  this.$input.value = this.formattedDateFromDate(date);
-
-		  const changeEvent = new Event('change', { bubbles: true, cancelable: true });
-		  this.$input.dispatchEvent(changeEvent);
-
-		  this.closeDialog();
-		};
-
-		DatePicker.prototype.isOpen = function () {
-		  return this.$dialog.classList.contains('moj-datepicker__dialog--open')
-		};
-
-		DatePicker.prototype.toggleDialog = function (event) {
-		  event.preventDefault();
-		  if (this.isOpen()) {
-		    this.closeDialog();
-		  } else {
-		    this.setMinAndMaxDatesOnCalendar();
-		    this.openDialog();
-		  }
-		};
-
-		DatePicker.prototype.openDialog = function () {
-		  this.$dialog.hidden = false;
-		  this.$dialog.classList.add('moj-datepicker__dialog--open');
-		  this.$calendarButton.setAttribute('aria-expanded', 'true');
-
-		  // position the dialog
-		  // if input is wider than dialog pin it to the right
-		  if (this.$input.offsetWidth > this.$dialog.offsetWidth) {
-		    this.$dialog.style.right = `0px`;
-		  }
-		  this.$dialog.style.top = `${this.$input.offsetHeight + 3}px`;
-
-		  // get the date from the input element
-		  this.inputDate = this.formattedDateFromString(this.$input.value);
-		  this.currentDate = this.inputDate;
-		  this.currentDate.setHours(0, 0, 0, 0);
-
-		  this.updateCalendar();
-		  this.setCurrentDate();
-		};
-
-		DatePicker.prototype.closeDialog = function () {
-		  this.$dialog.hidden = true;
-		  this.$dialog.classList.remove('moj-datepicker__dialog--open');
-		  this.$calendarButton.setAttribute('aria-expanded', 'false');
-		  this.$calendarButton.focus();
-		};
-
-		DatePicker.prototype.goToDate = function (date, focus) {
-		  const current = this.currentDate;
-		  this.currentDate = date;
-
-		  if (
-		    current.getMonth() !== this.currentDate.getMonth() ||
-		    current.getFullYear() !== this.currentDate.getFullYear()
-		  ) {
-		    this.updateCalendar();
-		  }
-
-		  this.setCurrentDate(focus);
-		};
-
-		// day navigation
-		DatePicker.prototype.focusNextDay = function () {
-		  const date = new Date(this.currentDate);
-		  date.setDate(date.getDate() + 1);
-		  this.goToDate(date);
-		};
-
-		DatePicker.prototype.focusPreviousDay = function () {
-		  const date = new Date(this.currentDate);
-		  date.setDate(date.getDate() - 1);
-		  this.goToDate(date);
-		};
-
-		// week navigation
-		DatePicker.prototype.focusNextWeek = function () {
-		  const date = new Date(this.currentDate);
-		  date.setDate(date.getDate() + 7);
-		  this.goToDate(date);
-		};
-
-		DatePicker.prototype.focusPreviousWeek = function () {
-		  const date = new Date(this.currentDate);
-		  date.setDate(date.getDate() - 7);
-		  this.goToDate(date);
-		};
-
-		DatePicker.prototype.focusFirstDayOfWeek = function () {
-		  const date = new Date(this.currentDate);
-		  const firstDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 0 : 1;
-		  const dayOfWeek = date.getDay();
-		  const diff =
-		    dayOfWeek >= firstDayOfWeekIndex
-		      ? dayOfWeek - firstDayOfWeekIndex
-		      : 6 - dayOfWeek;
-
-		  date.setDate(date.getDate() - diff);
-		  date.setHours(0, 0, 0, 0);
-
-		  this.goToDate(date);
-		};
-
-		DatePicker.prototype.focusLastDayOfWeek = function () {
-		  const date = new Date(this.currentDate);
-		  const lastDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 6 : 0;
-		  const dayOfWeek = date.getDay();
-		  const diff =
-		    dayOfWeek <= lastDayOfWeekIndex
-		      ? lastDayOfWeekIndex - dayOfWeek
-		      : 7 - dayOfWeek;
-
-		  date.setDate(date.getDate() + diff);
-		  date.setHours(0, 0, 0, 0);
-
-		  this.goToDate(date);
-		};
-
-		// month navigation
-		DatePicker.prototype.focusNextMonth = function (event, focus = true) {
-		  event.preventDefault();
-		  const date = new Date(this.currentDate);
-		  date.setMonth(date.getMonth() + 1, 1);
-		  this.goToDate(date, focus);
-		};
-
-		DatePicker.prototype.focusPreviousMonth = function (event, focus = true) {
-		  event.preventDefault();
-		  const date = new Date(this.currentDate);
-		  date.setMonth(date.getMonth() - 1, 1);
-		  this.goToDate(date, focus);
-		};
-
-		// year navigation
-		DatePicker.prototype.focusNextYear = function (event, focus = true) {
-		  event.preventDefault();
-		  const date = new Date(this.currentDate);
-		  date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1);
-		  this.goToDate(date, focus);
-		};
-
-		DatePicker.prototype.focusPreviousYear = function (event, focus = true) {
-		  event.preventDefault();
-		  const date = new Date(this.currentDate);
-		  date.setFullYear(date.getFullYear() - 1, date.getMonth(), 1);
-		  this.goToDate(date, focus);
-		};
-
-		/**
-		 * Parse dataset
-		 *
-		 * @param {Schema} schema - Component class
-		 * @param {DOMStringMap} dataset - HTML element dataset
-		 * @returns {object} Normalised dataset
-		 */
-		DatePicker.prototype.parseDataset = function (schema, dataset) {
-		  const parsed = {};
-
-		  for (const [field, ,] of Object.entries(schema.properties)) {
-		    if (field in dataset) {
-		      parsed[field] = dataset[field];
-		    }
-		  }
-
-		  return parsed
-		};
-
-		/**
-		 * Config merging function
-		 *
-		 * Takes any number of objects and combines them together, with
-		 * greatest priority on the LAST item passed in.
-		 *
-		 * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
-		 * @returns {{ [key: string]: unknown }} A merged config object
-		 */
-		DatePicker.prototype.mergeConfigs = function (...configObjects) {
-		  const formattedConfigObject = {};
-
-		  // Loop through each of the passed objects
-		  for (const configObject of configObjects) {
-		    for (const key of Object.keys(configObject)) {
-		      const option = formattedConfigObject[key];
-		      const override = configObject[key];
-
-		      // Push their keys one-by-one into formattedConfigObject. Any duplicate
-		      // keys with object values will be merged, otherwise the new value will
-		      // override the existing value.
-		      if (typeof option === 'object' && typeof override === 'object') {
-		        // @ts-expect-error Index signature for type 'string' is missing
-		        formattedConfigObject[key] = this.mergeConfigs(option, override);
-		      } else {
-		        formattedConfigObject[key] = override;
-		      }
-		    }
-		  }
-
-		  return formattedConfigObject
-		};
-
-		/**
-		 *
-		 * @param {HTMLElement} button
-		 * @param {number} index
-		 * @param {number} row
-		 * @param {number} column
-		 * @param {DatePicker} picker
-		 * @class
-		 */
-		function DSCalendarDay(button, index, row, column, picker) {
-		  this.index = index;
-		  this.row = row;
-		  this.column = column;
-		  this.button = button;
-		  this.picker = picker;
-
-		  this.date = new Date();
-		}
-
-		DSCalendarDay.prototype.init = function () {
-		  this.button.addEventListener('keydown', this.keyPress.bind(this));
-		  this.button.addEventListener('click', this.click.bind(this));
-		};
-
-		/**
-		 * @param {Date} day - the Date for the calendar day
-		 * @param {boolean} hidden - visibility of the day
-		 * @param {boolean} disabled - is the day selectable or excluded
-		 */
-		DSCalendarDay.prototype.update = function (day, hidden, disabled) {
-		  const label = day.getDate();
-		  let accessibleLabel = this.picker.formattedDateHuman(day);
-
-		  if (disabled) {
-		    this.button.setAttribute('aria-disabled', true);
-		    accessibleLabel = `Excluded date, ${accessibleLabel}`;
-		  } else {
-		    this.button.removeAttribute('aria-disabled');
-		  }
-
-		  if (hidden) {
-		    this.button.style.display = 'none';
-		  } else {
-		    this.button.style.display = 'block';
-		  }
-		  this.button.setAttribute(
-		    'data-testid',
-		    this.picker.formattedDateFromDate(day)
-		  );
-
-		  this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
-		  this.date = new Date(day);
-		};
-
-		DSCalendarDay.prototype.click = function (event) {
-		  this.picker.goToDate(this.date);
-		  this.picker.selectDate(this.date);
-
-		  event.stopPropagation();
-		  event.preventDefault();
-		};
-
-		DSCalendarDay.prototype.keyPress = function (event) {
-		  let calendarNavKey = true;
-
-		  switch (event.key) {
-		    case 'ArrowLeft':
-		      this.picker.focusPreviousDay();
-		      break
-		    case 'ArrowRight':
-		      this.picker.focusNextDay();
-		      break
-		    case 'ArrowUp':
-		      this.picker.focusPreviousWeek();
-		      break
-		    case 'ArrowDown':
-		      this.picker.focusNextWeek();
-		      break
-		    case 'Home':
-		      this.picker.focusFirstDayOfWeek();
-		      break
-		    case 'End':
-		      this.picker.focusLastDayOfWeek();
-		      break
-		    case 'PageUp':
-		      // eslint-disable-next-line no-unused-expressions
-		      event.shiftKey
-		        ? this.picker.focusPreviousYear(event)
-		        : this.picker.focusPreviousMonth(event);
-		      break
-		    case 'PageDown':
-		      // eslint-disable-next-line no-unused-expressions
-		      event.shiftKey
-		        ? this.picker.focusNextYear(event)
-		        : this.picker.focusNextMonth(event);
-		      break
-		    default:
-		      calendarNavKey = false;
-		      break
-		  }
-
-		  if (calendarNavKey) {
-		    event.preventDefault();
-		    event.stopPropagation();
-		  }
-		};
-
-		datePicker$1 = { DatePicker };
-
-		/**
-		 * Schema for component config
-		 *
-		 * @typedef {object} Schema
-		 * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
-		 */
-
-		/**
-		 * Schema property for component config
-		 *
-		 * @typedef {object} SchemaProperty
-		 * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
-		 */
-		return datePicker$1;
-	}
-
-	var datePickerExports = requireDatePicker();
-	var datePicker = /*@__PURE__*/getDefaultExportFromCjs(datePickerExports);
-
-	return datePicker;
+  };
+
+  DatePicker.prototype.createCalendarHeaders = function () {
+    this.dayLabels.forEach((day) => {
+      const html = `<th scope="col"><span aria-hidden="true">${day.substring(0, 3)}</span><span class="govuk-visually-hidden">${day}</span></th>`;
+      const $headerRow = this.$dialog.querySelector('thead > tr');
+      $headerRow.insertAdjacentHTML('beforeend', html);
+    });
+  };
+
+  /**
+   * Pads given number with leading zeros
+   *
+   * @param {number} value - The value to be padded
+   * @param {number} length - The length in characters of the output
+   * @returns {string}
+   */
+  DatePicker.prototype.leadingZeros = function (value, length = 2) {
+    let ret = value.toString();
+
+    while (ret.length < length) {
+      ret = `0${ret}`;
+    }
+
+    return ret
+  };
+
+  DatePicker.prototype.setOptions = function () {
+    this.setMinAndMaxDatesOnCalendar();
+    this.setExcludedDates();
+    this.setExcludedDays();
+    this.setLeadingZeros();
+    this.setWeekStartDay();
+  };
+
+  DatePicker.prototype.setMinAndMaxDatesOnCalendar = function () {
+    if (this.config.minDate) {
+      this.minDate = this.formattedDateFromString(this.config.minDate, null);
+      if (this.minDate && this.currentDate < this.minDate) {
+        this.currentDate = this.minDate;
+      }
+    }
+
+    if (this.config.maxDate) {
+      this.maxDate = this.formattedDateFromString(this.config.maxDate, null);
+      if (this.maxDate && this.currentDate > this.maxDate) {
+        this.currentDate = this.maxDate;
+      }
+    }
+  };
+
+  DatePicker.prototype.setExcludedDates = function () {
+    if (this.config.excludedDates) {
+      this.excludedDates = this.config.excludedDates
+        .replace(/\s+/, ' ')
+        .split(' ')
+        .map((item) => {
+          return item.includes('-')
+            ? this.parseDateRangeString(item)
+            : this.formattedDateFromString(item)
+        })
+        .flat()
+        .filter((item) => item);
+    }
+  };
+
+  /*
+   * Parses a daterange string into an array of dates
+   * @param {String} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
+   * @returns {Date[]}
+   */
+  DatePicker.prototype.parseDateRangeString = function (datestring) {
+    const dates = [];
+    const [startDate, endDate] = datestring
+      .split('-')
+      .map((d) => this.formattedDateFromString(d, null));
+
+    if (startDate && endDate) {
+      const date = new Date(startDate.getTime());
+      /* eslint-disable no-unmodified-loop-condition */
+      while (date <= endDate) {
+        dates.push(new Date(date));
+        date.setDate(date.getDate() + 1);
+      }
+      /* eslint-enable no-unmodified-loop-condition */
+    }
+    return dates
+  };
+
+  DatePicker.prototype.setExcludedDays = function () {
+    if (this.config.excludedDays) {
+      // lowercase and arrange dayLabels to put indexOf sunday == 0 for comparison
+      // with getDay() function
+      const weekDays = this.dayLabels.map((item) => item.toLowerCase());
+      if (this.config.weekStartDay === 'monday') {
+        weekDays.unshift(weekDays.pop());
+      }
+
+      this.excludedDays = this.config.excludedDays
+        .replace(/\s+/, ' ')
+        .toLowerCase()
+        .split(' ')
+        .map((item) => weekDays.indexOf(item))
+        .filter((item) => item !== -1);
+    }
+  };
+
+  DatePicker.prototype.setLeadingZeros = function () {
+    if (typeof this.config.leadingZeros !== 'boolean') {
+      if (this.config.leadingZeros.toLowerCase() === 'true') {
+        this.config.leadingZeros = true;
+        return
+      }
+      if (this.config.leadingZeros.toLowerCase() === 'false') {
+        this.config.leadingZeros = false;
+      }
+    }
+  };
+
+  DatePicker.prototype.setWeekStartDay = function () {
+    const weekStartDayParam = this.config.weekStartDay;
+    if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
+      this.config.weekStartDay = 'sunday';
+      // Rotate dayLabels array to put Sunday as the first item
+      this.dayLabels.unshift(this.dayLabels.pop());
+    } else {
+      this.config.weekStartDay = 'monday';
+    }
+  };
+
+  /**
+   * Determine if a date is selecteable
+   *
+   * @param {Date} date - the date to check
+   * @returns {boolean}
+   */
+  DatePicker.prototype.isExcludedDate = function (date) {
+    // This comparison does not work correctly - it will exclude the mindate itself
+    // see: https://github.com/ministryofjustice/moj-frontend/issues/923
+    if (this.minDate && this.minDate > date) {
+      return true
+    }
+
+    // This comparison works as expected - the maxdate will not be excluded
+    if (this.maxDate && this.maxDate < date) {
+      return true
+    }
+
+    for (const excludedDate of this.excludedDates) {
+      if (date.toDateString() === excludedDate.toDateString()) {
+        return true
+      }
+    }
+
+    if (this.excludedDays.includes(date.getDay())) {
+      return true
+    }
+
+    return false
+  };
+
+  /**
+   * Get a Date object from a string
+   *
+   * @param {string} dateString - string in the format d/m/yyyy dd/mm/yyyy
+   * @param {Date} fallback - date object to return if formatting fails
+   * @returns {Date}
+   */
+  DatePicker.prototype.formattedDateFromString = function (
+    dateString,
+    fallback = new Date()
+  ) {
+    let formattedDate = null;
+    // Accepts d/m/yyyy and dd/mm/yyyy
+    const dateFormatPattern = /(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})/;
+
+    if (!dateFormatPattern.test(dateString)) return fallback
+
+    const match = dateString.match(dateFormatPattern);
+    const day = match[1];
+    const month = match[3];
+    const year = match[4];
+
+    formattedDate = new Date(`${year}-${month}-${day}`);
+    if (formattedDate instanceof Date && !isNaN(formattedDate)) {
+      return formattedDate
+    }
+    return fallback
+  };
+
+  /**
+   * Get a formatted date string from a Date object
+   *
+   * @param {Date} date - date to format to a string
+   * @returns {string}
+   */
+  DatePicker.prototype.formattedDateFromDate = function (date) {
+    if (this.config.leadingZeros) {
+      return `${this.leadingZeros(date.getDate())}/${this.leadingZeros(date.getMonth() + 1)}/${date.getFullYear()}`
+    }
+
+    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
+  };
+
+  /**
+   * Get a human readable date in the format Monday 2 March 2024
+   *
+   * @param {Date} date - date to format
+   * @returns {string}
+   */
+  DatePicker.prototype.formattedDateHuman = function (date) {
+    return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`
+  };
+
+  DatePicker.prototype.backgroundClick = function (event) {
+    if (
+      this.isOpen() &&
+      !this.$dialog.contains(event.target) &&
+      !this.$input.contains(event.target) &&
+      !this.$calendarButton.contains(event.target)
+    ) {
+      event.preventDefault();
+      this.closeDialog();
+    }
+  };
+
+  DatePicker.prototype.firstButtonKeydown = function (event) {
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.$lastButtonInDialog.focus();
+      event.preventDefault();
+    }
+  };
+
+  DatePicker.prototype.lastButtonKeydown = function (event) {
+    if (event.key === 'Tab' && !event.shiftKey) {
+      this.$firstButtonInDialog.focus();
+      event.preventDefault();
+    }
+  };
+
+  // render calendar
+  DatePicker.prototype.updateCalendar = function () {
+    this.$dialogTitle.innerHTML = `${this.monthLabels[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
+
+    const day = this.currentDate;
+    const firstOfMonth = new Date(day.getFullYear(), day.getMonth(), 1);
+    let dayOfWeek;
+
+    if (this.config.weekStartDay === 'monday') {
+      dayOfWeek = firstOfMonth.getDay() === 0 ? 6 : firstOfMonth.getDay() - 1; // Change logic to make Monday first day of week, i.e. 0
+    } else {
+      dayOfWeek = firstOfMonth.getDay();
+    }
+
+    firstOfMonth.setDate(firstOfMonth.getDate() - dayOfWeek);
+
+    const thisDay = new Date(firstOfMonth);
+
+    // loop through our days
+    for (let i = 0; i < this.calendarDays.length; i++) {
+      const hidden = thisDay.getMonth() !== day.getMonth();
+      const disabled = this.isExcludedDate(thisDay);
+
+      this.calendarDays[i].update(thisDay, hidden, disabled);
+
+      thisDay.setDate(thisDay.getDate() + 1);
+    }
+  };
+
+  DatePicker.prototype.setCurrentDate = function (focus = true) {
+    const { currentDate } = this;
+    this.calendarDays.forEach((calendarDay) => {
+      calendarDay.button.classList.add('moj-datepicker__button');
+      calendarDay.button.classList.add('moj-datepicker__calendar-day');
+      calendarDay.button.setAttribute('tabindex', -1);
+      calendarDay.button.classList.remove(this.selectedDayButtonClass);
+      const calendarDayDate = calendarDay.date;
+      calendarDayDate.setHours(0, 0, 0, 0);
+
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      if (
+        calendarDayDate.getTime() ===
+        currentDate.getTime() /* && !calendarDay.button.disabled */
+      ) {
+        if (focus) {
+          calendarDay.button.setAttribute('tabindex', 0);
+          calendarDay.button.focus();
+          calendarDay.button.classList.add(this.selectedDayButtonClass);
+        }
+      }
+
+      if (
+        this.inputDate &&
+        calendarDayDate.getTime() === this.inputDate.getTime()
+      ) {
+        calendarDay.button.classList.add(this.currentDayButtonClass);
+        calendarDay.button.setAttribute('aria-current', 'date');
+      } else {
+        calendarDay.button.classList.remove(this.currentDayButtonClass);
+        calendarDay.button.removeAttribute('aria-current');
+      }
+
+      if (calendarDayDate.getTime() === today.getTime()) {
+        calendarDay.button.classList.add(this.todayButtonClass);
+      } else {
+        calendarDay.button.classList.remove(this.todayButtonClass);
+      }
+    });
+
+    // if no date is tab-able, make the first non-disabled date tab-able
+    if (!focus) {
+      const enabledDays = this.calendarDays.filter((calendarDay) => {
+        return (
+          window.getComputedStyle(calendarDay.button).display === 'block' &&
+          !calendarDay.button.disabled
+        )
+      });
+
+      enabledDays[0].button.setAttribute('tabindex', 0);
+
+      this.currentDate = enabledDays[0].date;
+    }
+  };
+
+  DatePicker.prototype.selectDate = function (date) {
+    if (this.isExcludedDate(date)) {
+      return
+    }
+
+    this.$calendarButton.querySelector('span').innerText =
+      `Choose date. Selected date is ${this.formattedDateHuman(date)}`;
+    this.$input.value = this.formattedDateFromDate(date);
+
+    const changeEvent = new Event('change', { bubbles: true, cancelable: true });
+    this.$input.dispatchEvent(changeEvent);
+
+    this.closeDialog();
+  };
+
+  DatePicker.prototype.isOpen = function () {
+    return this.$dialog.classList.contains('moj-datepicker__dialog--open')
+  };
+
+  DatePicker.prototype.toggleDialog = function (event) {
+    event.preventDefault();
+    if (this.isOpen()) {
+      this.closeDialog();
+    } else {
+      this.setMinAndMaxDatesOnCalendar();
+      this.openDialog();
+    }
+  };
+
+  DatePicker.prototype.openDialog = function () {
+    this.$dialog.hidden = false;
+    this.$dialog.classList.add('moj-datepicker__dialog--open');
+    this.$calendarButton.setAttribute('aria-expanded', 'true');
+
+    // position the dialog
+    // if input is wider than dialog pin it to the right
+    if (this.$input.offsetWidth > this.$dialog.offsetWidth) {
+      this.$dialog.style.right = `0px`;
+    }
+    this.$dialog.style.top = `${this.$input.offsetHeight + 3}px`;
+
+    // get the date from the input element
+    this.inputDate = this.formattedDateFromString(this.$input.value);
+    this.currentDate = this.inputDate;
+    this.currentDate.setHours(0, 0, 0, 0);
+
+    this.updateCalendar();
+    this.setCurrentDate();
+  };
+
+  DatePicker.prototype.closeDialog = function () {
+    this.$dialog.hidden = true;
+    this.$dialog.classList.remove('moj-datepicker__dialog--open');
+    this.$calendarButton.setAttribute('aria-expanded', 'false');
+    this.$calendarButton.focus();
+  };
+
+  DatePicker.prototype.goToDate = function (date, focus) {
+    const current = this.currentDate;
+    this.currentDate = date;
+
+    if (
+      current.getMonth() !== this.currentDate.getMonth() ||
+      current.getFullYear() !== this.currentDate.getFullYear()
+    ) {
+      this.updateCalendar();
+    }
+
+    this.setCurrentDate(focus);
+  };
+
+  // day navigation
+  DatePicker.prototype.focusNextDay = function () {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() + 1);
+    this.goToDate(date);
+  };
+
+  DatePicker.prototype.focusPreviousDay = function () {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() - 1);
+    this.goToDate(date);
+  };
+
+  // week navigation
+  DatePicker.prototype.focusNextWeek = function () {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() + 7);
+    this.goToDate(date);
+  };
+
+  DatePicker.prototype.focusPreviousWeek = function () {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() - 7);
+    this.goToDate(date);
+  };
+
+  DatePicker.prototype.focusFirstDayOfWeek = function () {
+    const date = new Date(this.currentDate);
+    const firstDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 0 : 1;
+    const dayOfWeek = date.getDay();
+    const diff =
+      dayOfWeek >= firstDayOfWeekIndex
+        ? dayOfWeek - firstDayOfWeekIndex
+        : 6 - dayOfWeek;
+
+    date.setDate(date.getDate() - diff);
+    date.setHours(0, 0, 0, 0);
+
+    this.goToDate(date);
+  };
+
+  DatePicker.prototype.focusLastDayOfWeek = function () {
+    const date = new Date(this.currentDate);
+    const lastDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 6 : 0;
+    const dayOfWeek = date.getDay();
+    const diff =
+      dayOfWeek <= lastDayOfWeekIndex
+        ? lastDayOfWeekIndex - dayOfWeek
+        : 7 - dayOfWeek;
+
+    date.setDate(date.getDate() + diff);
+    date.setHours(0, 0, 0, 0);
+
+    this.goToDate(date);
+  };
+
+  // month navigation
+  DatePicker.prototype.focusNextMonth = function (event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setMonth(date.getMonth() + 1, 1);
+    this.goToDate(date, focus);
+  };
+
+  DatePicker.prototype.focusPreviousMonth = function (event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setMonth(date.getMonth() - 1, 1);
+    this.goToDate(date, focus);
+  };
+
+  // year navigation
+  DatePicker.prototype.focusNextYear = function (event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1);
+    this.goToDate(date, focus);
+  };
+
+  DatePicker.prototype.focusPreviousYear = function (event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setFullYear(date.getFullYear() - 1, date.getMonth(), 1);
+    this.goToDate(date, focus);
+  };
+
+  /**
+   * Parse dataset
+   *
+   * @param {Schema} schema - Component class
+   * @param {DOMStringMap} dataset - HTML element dataset
+   * @returns {object} Normalised dataset
+   */
+  DatePicker.prototype.parseDataset = function (schema, dataset) {
+    const parsed = {};
+
+    for (const [field, ,] of Object.entries(schema.properties)) {
+      if (field in dataset) {
+        parsed[field] = dataset[field];
+      }
+    }
+
+    return parsed
+  };
+
+  /**
+   * Config merging function
+   *
+   * Takes any number of objects and combines them together, with
+   * greatest priority on the LAST item passed in.
+   *
+   * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+   * @returns {{ [key: string]: unknown }} A merged config object
+   */
+  DatePicker.prototype.mergeConfigs = function (...configObjects) {
+    const formattedConfigObject = {};
+
+    // Loop through each of the passed objects
+    for (const configObject of configObjects) {
+      for (const key of Object.keys(configObject)) {
+        const option = formattedConfigObject[key];
+        const override = configObject[key];
+
+        // Push their keys one-by-one into formattedConfigObject. Any duplicate
+        // keys with object values will be merged, otherwise the new value will
+        // override the existing value.
+        if (typeof option === 'object' && typeof override === 'object') {
+          // @ts-expect-error Index signature for type 'string' is missing
+          formattedConfigObject[key] = this.mergeConfigs(option, override);
+        } else {
+          formattedConfigObject[key] = override;
+        }
+      }
+    }
+
+    return formattedConfigObject
+  };
+
+  /**
+   *
+   * @param {HTMLElement} button
+   * @param {number} index
+   * @param {number} row
+   * @param {number} column
+   * @param {DatePicker} picker
+   * @class
+   */
+  function DSCalendarDay(button, index, row, column, picker) {
+    this.index = index;
+    this.row = row;
+    this.column = column;
+    this.button = button;
+    this.picker = picker;
+
+    this.date = new Date();
+  }
+
+  DSCalendarDay.prototype.init = function () {
+    this.button.addEventListener('keydown', this.keyPress.bind(this));
+    this.button.addEventListener('click', this.click.bind(this));
+  };
+
+  /**
+   * @param {Date} day - the Date for the calendar day
+   * @param {boolean} hidden - visibility of the day
+   * @param {boolean} disabled - is the day selectable or excluded
+   */
+  DSCalendarDay.prototype.update = function (day, hidden, disabled) {
+    const label = day.getDate();
+    let accessibleLabel = this.picker.formattedDateHuman(day);
+
+    if (disabled) {
+      this.button.setAttribute('aria-disabled', true);
+      accessibleLabel = `Excluded date, ${accessibleLabel}`;
+    } else {
+      this.button.removeAttribute('aria-disabled');
+    }
+
+    if (hidden) {
+      this.button.style.display = 'none';
+    } else {
+      this.button.style.display = 'block';
+    }
+    this.button.setAttribute(
+      'data-testid',
+      this.picker.formattedDateFromDate(day)
+    );
+
+    this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
+    this.date = new Date(day);
+  };
+
+  DSCalendarDay.prototype.click = function (event) {
+    this.picker.goToDate(this.date);
+    this.picker.selectDate(this.date);
+
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  DSCalendarDay.prototype.keyPress = function (event) {
+    let calendarNavKey = true;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.picker.focusPreviousDay();
+        break
+      case 'ArrowRight':
+        this.picker.focusNextDay();
+        break
+      case 'ArrowUp':
+        this.picker.focusPreviousWeek();
+        break
+      case 'ArrowDown':
+        this.picker.focusNextWeek();
+        break
+      case 'Home':
+        this.picker.focusFirstDayOfWeek();
+        break
+      case 'End':
+        this.picker.focusLastDayOfWeek();
+        break
+      case 'PageUp':
+        // eslint-disable-next-line no-unused-expressions
+        event.shiftKey
+          ? this.picker.focusPreviousYear(event)
+          : this.picker.focusPreviousMonth(event);
+        break
+      case 'PageDown':
+        // eslint-disable-next-line no-unused-expressions
+        event.shiftKey
+          ? this.picker.focusNextYear(event)
+          : this.picker.focusNextMonth(event);
+        break
+      default:
+        calendarNavKey = false;
+        break
+    }
+
+    if (calendarNavKey) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  /**
+   * Schema for component config
+   *
+   * @typedef {object} Schema
+   * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+   */
+
+  /**
+   * Schema property for component config
+   *
+   * @typedef {object} SchemaProperty
+   * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+   */
+
+  exports.DatePicker = DatePicker;
 
 }));