@ohos-ports/flowbite-datepicker 2.0.0-beta.0

package/dist/DateRangePicker.cjs.js

@@ -0,0 +1,2996 @@
+'use strict';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
+}
+function _get() {
+  return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) {
+    var p = _superPropBase(e, t);
+    if (p) {
+      var n = Object.getOwnPropertyDescriptor(p, t);
+      return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value;
+    }
+  }, _get.apply(null, arguments);
+}
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: !0,
+      configurable: !0
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: !1
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _superPropBase(t, o) {
+  for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););
+  return t;
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var listenerRegistry = new WeakMap();
+var _EventTarget$prototyp = EventTarget.prototype,
+  addEventListener = _EventTarget$prototyp.addEventListener,
+  removeEventListener = _EventTarget$prototyp.removeEventListener;
+
+// Register event listeners to a key object
+// listeners: array of listener definitions;
+//   - each definition must be a flat array of event target and the arguments
+//     used to call addEventListener() on the target
+function registerListeners(keyObj, listeners) {
+  var registered = listenerRegistry.get(keyObj);
+  if (!registered) {
+    registered = [];
+    listenerRegistry.set(keyObj, registered);
+  }
+  listeners.forEach(function (listener) {
+    addEventListener.call.apply(addEventListener, _toConsumableArray(listener));
+    registered.push(listener);
+  });
+}
+function unregisterListeners(keyObj) {
+  var listeners = listenerRegistry.get(keyObj);
+  if (!listeners) {
+    return;
+  }
+  listeners.forEach(function (listener) {
+    removeEventListener.call.apply(removeEventListener, _toConsumableArray(listener));
+  });
+  listenerRegistry["delete"](keyObj);
+}
+
+// Event.composedPath() polyfill for Edge
+// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec
+if (!Event.prototype.composedPath) {
+  var getComposedPath = function getComposedPath(node) {
+    var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    path.push(node);
+    var parent;
+    if (node.parentNode) {
+      parent = node.parentNode;
+    } else if (node.host) {
+      // ShadowRoot
+      parent = node.host;
+    } else if (node.defaultView) {
+      // Document
+      parent = node.defaultView;
+    }
+    return parent ? getComposedPath(parent, path) : path;
+  };
+  Event.prototype.composedPath = function () {
+    return getComposedPath(this.target);
+  };
+}
+function findFromPath(path, criteria, currentTarget) {
+  var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var el = path[index];
+  if (criteria(el)) {
+    return el;
+  } else if (el === currentTarget || !el.parentElement) {
+    // stop when reaching currentTarget or <html>
+    return;
+  }
+  return findFromPath(path, criteria, currentTarget, index + 1);
+}
+
+// Search for the actual target of a delegated event
+function findElementInEventPath(ev, selector) {
+  var criteria = typeof selector === 'function' ? selector : function (el) {
+    return el.matches(selector);
+  };
+  return findFromPath(ev.composedPath(), criteria, ev.currentTarget);
+}
+
+function stripTime(timeValue) {
+  return new Date(timeValue).setHours(0, 0, 0, 0);
+}
+function today() {
+  return new Date().setHours(0, 0, 0, 0);
+}
+
+// Get the time value of the start of given date or year, month and day
+function dateValue() {
+  switch (arguments.length) {
+    case 0:
+      return today();
+    case 1:
+      return stripTime(arguments.length <= 0 ? undefined : arguments[0]);
+  }
+
+  // use setFullYear() to keep 2-digit year from being mapped to 1900-1999
+  var newDate = new Date(0);
+  newDate.setFullYear.apply(newDate, arguments);
+  return newDate.setHours(0, 0, 0, 0);
+}
+function addDays(date, amount) {
+  var newDate = new Date(date);
+  return newDate.setDate(newDate.getDate() + amount);
+}
+function addWeeks(date, amount) {
+  return addDays(date, amount * 7);
+}
+function addMonths(date, amount) {
+  // If the day of the date is not in the new month, the last day of the new
+  // month will be returned. e.g. Jan 31 + 1 month → Feb 28 (not Mar 03)
+  var newDate = new Date(date);
+  var monthsToSet = newDate.getMonth() + amount;
+  var expectedMonth = monthsToSet % 12;
+  if (expectedMonth < 0) {
+    expectedMonth += 12;
+  }
+  var time = newDate.setMonth(monthsToSet);
+  return newDate.getMonth() !== expectedMonth ? newDate.setDate(0) : time;
+}
+function addYears(date, amount) {
+  // If the date is Feb 29 and the new year is not a leap year, Feb 28 of the
+  // new year will be returned.
+  var newDate = new Date(date);
+  var expectedMonth = newDate.getMonth();
+  var time = newDate.setFullYear(newDate.getFullYear() + amount);
+  return expectedMonth === 1 && newDate.getMonth() === 2 ? newDate.setDate(0) : time;
+}
+
+// Calculate the distance bettwen 2 days of the week
+function dayDiff(day, from) {
+  return (day - from + 7) % 7;
+}
+
+// Get the date of the specified day of the week of given base date
+function dayOfTheWeekOf(baseDate, dayOfWeek) {
+  var weekStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var baseDay = new Date(baseDate).getDay();
+  return addDays(baseDate, dayDiff(dayOfWeek, weekStart) - dayDiff(baseDay, weekStart));
+}
+
+// Get the ISO week of a date
+function getWeek(date) {
+  // start of ISO week is Monday
+  var thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
+  // 1st week == the week where the 4th of January is in
+  var firstThu = dayOfTheWeekOf(new Date(thuOfTheWeek).setMonth(0, 4), 4, 1);
+  return Math.round((thuOfTheWeek - firstThu) / 604800000) + 1;
+}
+
+// Get the start year of the period of years that includes given date
+// years: length of the year period
+function startOfYearPeriod(date, years) {
+  /* @see https://en.wikipedia.org/wiki/Year_zero#ISO_8601 */
+  var year = new Date(date).getFullYear();
+  return Math.floor(year / years) * years;
+}
+
+function hasProperty(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+function lastItemOf(arr) {
+  return arr[arr.length - 1];
+}
+
+// push only the items not included in the array
+function pushUnique(arr) {
+  for (var _len = arguments.length, items = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    items[_key - 1] = arguments[_key];
+  }
+  items.forEach(function (item) {
+    if (arr.includes(item)) {
+      return;
+    }
+    arr.push(item);
+  });
+  return arr;
+}
+function stringToArray(str, separator) {
+  // convert empty string to an empty array
+  return str ? str.split(separator) : [];
+}
+function isInRange(testVal, min, max) {
+  var minOK = min === undefined || testVal >= min;
+  var maxOK = max === undefined || testVal <= max;
+  return minOK && maxOK;
+}
+function limitToRange(val, min, max) {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+function createTagRepeat(tagName, repeat) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var html = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
+  var openTagSrc = Object.keys(attributes).reduce(function (src, attr) {
+    var val = attributes[attr];
+    if (typeof val === 'function') {
+      val = val(index);
+    }
+    return "".concat(src, " ").concat(attr, "=\"").concat(val, "\"");
+  }, tagName);
+  html += "<".concat(openTagSrc, "></").concat(tagName, ">");
+  var next = index + 1;
+  return next < repeat ? createTagRepeat(tagName, repeat, attributes, next, html) : html;
+}
+
+// Remove the spacing surrounding tags for HTML parser not to create text nodes
+// before/after elements
+function optimizeTemplateHTML(html) {
+  return html.replace(/>\s+/g, '>').replace(/\s+</, '<');
+}
+
+// pattern for format parts
+var reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
+// pattern for non date parts
+var reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
+// cache for persed formats
+var knownFormats = {};
+// parse funtions for date parts
+var parseFns = {
+  y: function y(date, year) {
+    return new Date(date).setFullYear(parseInt(year, 10));
+  },
+  m: function m(date, month, locale) {
+    var newDate = new Date(date);
+    var monthIndex = parseInt(month, 10) - 1;
+    if (isNaN(monthIndex)) {
+      if (!month) {
+        return NaN;
+      }
+      var monthName = month.toLowerCase();
+      var compareNames = function compareNames(name) {
+        return name.toLowerCase().startsWith(monthName);
+      };
+      // compare with both short and full names because some locales have periods
+      // in the short names (not equal to the first X letters of the full names)
+      monthIndex = locale.monthsShort.findIndex(compareNames);
+      if (monthIndex < 0) {
+        monthIndex = locale.months.findIndex(compareNames);
+      }
+      if (monthIndex < 0) {
+        return NaN;
+      }
+    }
+    newDate.setMonth(monthIndex);
+    return newDate.getMonth() !== normalizeMonth(monthIndex) ? newDate.setDate(0) : newDate.getTime();
+  },
+  d: function d(date, day) {
+    return new Date(date).setDate(parseInt(day, 10));
+  }
+};
+// format functions for date parts
+var formatFns = {
+  d: function d(date) {
+    return date.getDate();
+  },
+  dd: function dd(date) {
+    return padZero(date.getDate(), 2);
+  },
+  D: function D(date, locale) {
+    return locale.daysShort[date.getDay()];
+  },
+  DD: function DD(date, locale) {
+    return locale.days[date.getDay()];
+  },
+  m: function m(date) {
+    return date.getMonth() + 1;
+  },
+  mm: function mm(date) {
+    return padZero(date.getMonth() + 1, 2);
+  },
+  M: function M(date, locale) {
+    return locale.monthsShort[date.getMonth()];
+  },
+  MM: function MM(date, locale) {
+    return locale.months[date.getMonth()];
+  },
+  y: function y(date) {
+    return date.getFullYear();
+  },
+  yy: function yy(date) {
+    return padZero(date.getFullYear(), 2).slice(-2);
+  },
+  yyyy: function yyyy(date) {
+    return padZero(date.getFullYear(), 4);
+  }
+};
+
+// get month index in normal range (0 - 11) from any number
+function normalizeMonth(monthIndex) {
+  return monthIndex > -1 ? monthIndex % 12 : normalizeMonth(monthIndex + 12);
+}
+function padZero(num, length) {
+  return num.toString().padStart(length, '0');
+}
+function parseFormatString(format) {
+  if (typeof format !== 'string') {
+    throw new Error("Invalid date format.");
+  }
+  if (format in knownFormats) {
+    return knownFormats[format];
+  }
+
+  // sprit the format string into parts and seprators
+  var separators = format.split(reFormatTokens);
+  var parts = format.match(new RegExp(reFormatTokens, 'g'));
+  if (separators.length === 0 || !parts) {
+    throw new Error("Invalid date format.");
+  }
+
+  // collect format functions used in the format
+  var partFormatters = parts.map(function (token) {
+    return formatFns[token];
+  });
+
+  // collect parse function keys used in the format
+  // iterate over parseFns' keys in order to keep the order of the keys.
+  var partParserKeys = Object.keys(parseFns).reduce(function (keys, key) {
+    var token = parts.find(function (part) {
+      return part[0] !== 'D' && part[0].toLowerCase() === key;
+    });
+    if (token) {
+      keys.push(key);
+    }
+    return keys;
+  }, []);
+  return knownFormats[format] = {
+    parser: function parser(dateStr, locale) {
+      var dateParts = dateStr.split(reNonDateParts).reduce(function (dtParts, part, index) {
+        if (part.length > 0 && parts[index]) {
+          var token = parts[index][0];
+          if (token === 'M') {
+            dtParts.m = part;
+          } else if (token !== 'D') {
+            dtParts[token] = part;
+          }
+        }
+        return dtParts;
+      }, {});
+
+      // iterate over partParserkeys so that the parsing is made in the oder
+      // of year, month and day to prevent the day parser from correcting last
+      // day of month wrongly
+      return partParserKeys.reduce(function (origDate, key) {
+        var newDate = parseFns[key](origDate, dateParts[key], locale);
+        // ingnore the part failed to parse
+        return isNaN(newDate) ? origDate : newDate;
+      }, today());
+    },
+    formatter: function formatter(date, locale) {
+      var dateStr = partFormatters.reduce(function (str, fn, index) {
+        return str += "".concat(separators[index]).concat(fn(date, locale));
+      }, '');
+      // separators' length is always parts' length + 1,
+      return dateStr += lastItemOf(separators);
+    }
+  };
+}
+function parseDate(dateStr, format, locale) {
+  if (dateStr instanceof Date || typeof dateStr === 'number') {
+    var date = stripTime(dateStr);
+    return isNaN(date) ? undefined : date;
+  }
+  if (!dateStr) {
+    return undefined;
+  }
+  if (dateStr === 'today') {
+    return today();
+  }
+  if (format && format.toValue) {
+    var _date = format.toValue(dateStr, format, locale);
+    return isNaN(_date) ? undefined : stripTime(_date);
+  }
+  return parseFormatString(format).parser(dateStr, locale);
+}
+function formatDate(date, format, locale) {
+  if (isNaN(date) || !date && date !== 0) {
+    return '';
+  }
+  var dateObj = typeof date === 'number' ? new Date(date) : date;
+  if (format.toDisplay) {
+    return format.toDisplay(dateObj, format, locale);
+  }
+  return parseFormatString(format).formatter(dateObj, locale);
+}
+
+// default locales
+var locales = {
+  en: {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    clear: "Clear",
+    titleFormat: "MM y"
+  }
+};
+
+// config options updatable by setOptions() and their default values
+var defaultOptions = {
+  autohide: false,
+  beforeShowDay: null,
+  beforeShowDecade: null,
+  beforeShowMonth: null,
+  beforeShowYear: null,
+  calendarWeeks: false,
+  clearBtn: false,
+  dateDelimiter: ',',
+  datesDisabled: [],
+  daysOfWeekDisabled: [],
+  daysOfWeekHighlighted: [],
+  defaultViewDate: undefined,
+  // placeholder, defaults to today() by the program
+  disableTouchKeyboard: false,
+  format: 'mm/dd/yyyy',
+  language: 'en',
+  maxDate: null,
+  maxNumberOfDates: 1,
+  maxView: 3,
+  minDate: null,
+  nextArrow: '<svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
+  orientation: 'auto',
+  pickLevel: 0,
+  prevArrow: '<svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
+  showDaysOfWeek: true,
+  showOnClick: true,
+  showOnFocus: true,
+  startView: 0,
+  title: '',
+  todayBtn: false,
+  todayBtnMode: 0,
+  todayHighlight: false,
+  updateOnBlur: true,
+  weekStart: 0
+};
+
+var range = null;
+function parseHTML(html) {
+  if (range == null) {
+    range = document.createRange();
+  }
+  return range.createContextualFragment(html);
+}
+function hideElement(el) {
+  if (el.style.display === 'none') {
+    return;
+  }
+  // back up the existing display setting in data-style-display
+  if (el.style.display) {
+    el.dataset.styleDisplay = el.style.display;
+  }
+  el.style.display = 'none';
+}
+function showElement(el) {
+  if (el.style.display !== 'none') {
+    return;
+  }
+  if (el.dataset.styleDisplay) {
+    // restore backed-up dispay property
+    el.style.display = el.dataset.styleDisplay;
+    delete el.dataset.styleDisplay;
+  } else {
+    el.style.display = '';
+  }
+}
+function emptyChildNodes(el) {
+  if (el.firstChild) {
+    el.removeChild(el.firstChild);
+    emptyChildNodes(el);
+  }
+}
+function replaceChildNodes(el, newChildNodes) {
+  emptyChildNodes(el);
+  if (newChildNodes instanceof DocumentFragment) {
+    el.appendChild(newChildNodes);
+  } else if (typeof newChildNodes === 'string') {
+    el.appendChild(parseHTML(newChildNodes));
+  } else if (typeof newChildNodes.forEach === 'function') {
+    newChildNodes.forEach(function (node) {
+      el.appendChild(node);
+    });
+  }
+}
+
+var defaultLang = defaultOptions.language,
+  defaultFormat = defaultOptions.format,
+  defaultWeekStart = defaultOptions.weekStart;
+
+// Reducer function to filter out invalid day-of-week from the input
+function sanitizeDOW(dow, day) {
+  return dow.length < 6 && day >= 0 && day < 7 ? pushUnique(dow, day) : dow;
+}
+function calcEndOfWeek(startOfWeek) {
+  return (startOfWeek + 6) % 7;
+}
+
+// validate input date. if invalid, fallback to the original value
+function validateDate(value, format, locale, origValue) {
+  var date = parseDate(value, format, locale);
+  return date !== undefined ? date : origValue;
+}
+
+// Validate viewId. if invalid, fallback to the original value
+function validateViewId(value, origValue) {
+  var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
+  var viewId = parseInt(value, 10);
+  return viewId >= 0 && viewId <= max ? viewId : origValue;
+}
+
+// Create Datepicker configuration to set
+function processOptions(options, datepicker) {
+  var inOpts = Object.assign({}, options);
+  var config = {};
+  var locales = datepicker.constructor.locales;
+  var _ref = datepicker.config || {},
+    format = _ref.format,
+    language = _ref.language,
+    locale = _ref.locale,
+    maxDate = _ref.maxDate,
+    maxView = _ref.maxView,
+    minDate = _ref.minDate,
+    pickLevel = _ref.pickLevel,
+    startView = _ref.startView,
+    weekStart = _ref.weekStart;
+  if (inOpts.language) {
+    var lang;
+    if (inOpts.language !== language) {
+      if (locales[inOpts.language]) {
+        lang = inOpts.language;
+      } else {
+        // Check if langauge + region tag can fallback to the one without
+        // region (e.g. fr-CA → fr)
+        lang = inOpts.language.split('-')[0];
+        if (locales[lang] === undefined) {
+          lang = false;
+        }
+      }
+    }
+    delete inOpts.language;
+    if (lang) {
+      language = config.language = lang;
+
+      // update locale as well when updating language
+      var origLocale = locale || locales[defaultLang];
+      // use default language's properties for the fallback
+      locale = Object.assign({
+        format: defaultFormat,
+        weekStart: defaultWeekStart
+      }, locales[defaultLang]);
+      if (language !== defaultLang) {
+        Object.assign(locale, locales[language]);
+      }
+      config.locale = locale;
+      // if format and/or weekStart are the same as old locale's defaults,
+      // update them to new locale's defaults
+      if (format === origLocale.format) {
+        format = config.format = locale.format;
+      }
+      if (weekStart === origLocale.weekStart) {
+        weekStart = config.weekStart = locale.weekStart;
+        config.weekEnd = calcEndOfWeek(locale.weekStart);
+      }
+    }
+  }
+  if (inOpts.format) {
+    var hasToDisplay = typeof inOpts.format.toDisplay === 'function';
+    var hasToValue = typeof inOpts.format.toValue === 'function';
+    var validFormatString = reFormatTokens.test(inOpts.format);
+    if (hasToDisplay && hasToValue || validFormatString) {
+      format = config.format = inOpts.format;
+    }
+    delete inOpts.format;
+  }
+
+  //*** dates ***//
+  // while min and maxDate for "no limit" in the options are better to be null
+  // (especially when updating), the ones in the config have to be undefined
+  // because null is treated as 0 (= unix epoch) when comparing with time value
+  var minDt = minDate;
+  var maxDt = maxDate;
+  if (inOpts.minDate !== undefined) {
+    minDt = inOpts.minDate === null ? dateValue(0, 0, 1) // set 0000-01-01 to prevent negative values for year
+    : validateDate(inOpts.minDate, format, locale, minDt);
+    delete inOpts.minDate;
+  }
+  if (inOpts.maxDate !== undefined) {
+    maxDt = inOpts.maxDate === null ? undefined : validateDate(inOpts.maxDate, format, locale, maxDt);
+    delete inOpts.maxDate;
+  }
+  if (maxDt < minDt) {
+    minDate = config.minDate = maxDt;
+    maxDate = config.maxDate = minDt;
+  } else {
+    if (minDate !== minDt) {
+      minDate = config.minDate = minDt;
+    }
+    if (maxDate !== maxDt) {
+      maxDate = config.maxDate = maxDt;
+    }
+  }
+  if (inOpts.datesDisabled) {
+    config.datesDisabled = inOpts.datesDisabled.reduce(function (dates, dt) {
+      var date = parseDate(dt, format, locale);
+      return date !== undefined ? pushUnique(dates, date) : dates;
+    }, []);
+    delete inOpts.datesDisabled;
+  }
+  if (inOpts.defaultViewDate !== undefined) {
+    var viewDate = parseDate(inOpts.defaultViewDate, format, locale);
+    if (viewDate !== undefined) {
+      config.defaultViewDate = viewDate;
+    }
+    delete inOpts.defaultViewDate;
+  }
+
+  //*** days of week ***//
+  if (inOpts.weekStart !== undefined) {
+    var wkStart = Number(inOpts.weekStart) % 7;
+    if (!isNaN(wkStart)) {
+      weekStart = config.weekStart = wkStart;
+      config.weekEnd = calcEndOfWeek(wkStart);
+    }
+    delete inOpts.weekStart;
+  }
+  if (inOpts.daysOfWeekDisabled) {
+    config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekDisabled;
+  }
+  if (inOpts.daysOfWeekHighlighted) {
+    config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekHighlighted;
+  }
+
+  //*** multi date ***//
+  if (inOpts.maxNumberOfDates !== undefined) {
+    var maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);
+    if (maxNumberOfDates >= 0) {
+      config.maxNumberOfDates = maxNumberOfDates;
+      config.multidate = maxNumberOfDates !== 1;
+    }
+    delete inOpts.maxNumberOfDates;
+  }
+  if (inOpts.dateDelimiter) {
+    config.dateDelimiter = String(inOpts.dateDelimiter);
+    delete inOpts.dateDelimiter;
+  }
+
+  //*** pick level & view ***//
+  var newPickLevel = pickLevel;
+  if (inOpts.pickLevel !== undefined) {
+    newPickLevel = validateViewId(inOpts.pickLevel, 2);
+    delete inOpts.pickLevel;
+  }
+  if (newPickLevel !== pickLevel) {
+    pickLevel = config.pickLevel = newPickLevel;
+  }
+  var newMaxView = maxView;
+  if (inOpts.maxView !== undefined) {
+    newMaxView = validateViewId(inOpts.maxView, maxView);
+    delete inOpts.maxView;
+  }
+  // ensure max view >= pick level
+  newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;
+  if (newMaxView !== maxView) {
+    maxView = config.maxView = newMaxView;
+  }
+  var newStartView = startView;
+  if (inOpts.startView !== undefined) {
+    newStartView = validateViewId(inOpts.startView, newStartView);
+    delete inOpts.startView;
+  }
+  // ensure pick level <= start view <= max view
+  if (newStartView < pickLevel) {
+    newStartView = pickLevel;
+  } else if (newStartView > maxView) {
+    newStartView = maxView;
+  }
+  if (newStartView !== startView) {
+    config.startView = newStartView;
+  }
+
+  //*** template ***//
+  if (inOpts.prevArrow) {
+    var prevArrow = parseHTML(inOpts.prevArrow);
+    if (prevArrow.childNodes.length > 0) {
+      config.prevArrow = prevArrow.childNodes;
+    }
+    delete inOpts.prevArrow;
+  }
+  if (inOpts.nextArrow) {
+    var nextArrow = parseHTML(inOpts.nextArrow);
+    if (nextArrow.childNodes.length > 0) {
+      config.nextArrow = nextArrow.childNodes;
+    }
+    delete inOpts.nextArrow;
+  }
+
+  //*** misc ***//
+  if (inOpts.disableTouchKeyboard !== undefined) {
+    config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;
+    delete inOpts.disableTouchKeyboard;
+  }
+  if (inOpts.orientation) {
+    var orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
+    config.orientation = {
+      x: orientation.find(function (x) {
+        return x === 'left' || x === 'right';
+      }) || 'auto',
+      y: orientation.find(function (y) {
+        return y === 'top' || y === 'bottom';
+      }) || 'auto'
+    };
+    delete inOpts.orientation;
+  }
+  if (inOpts.todayBtnMode !== undefined) {
+    switch (inOpts.todayBtnMode) {
+      case 0:
+      case 1:
+        config.todayBtnMode = inOpts.todayBtnMode;
+    }
+    delete inOpts.todayBtnMode;
+  }
+
+  //*** copy the rest ***//
+  Object.keys(inOpts).forEach(function (key) {
+    if (inOpts[key] !== undefined && hasProperty(defaultOptions, key)) {
+      config[key] = inOpts[key];
+    }
+  });
+  return config;
+}
+
+var pickerTemplate = optimizeTemplateHTML("<div class=\"datepicker hidden\">\n  <div class=\"datepicker-picker inline-block rounded-base bg-neutral-primary-medium border border-default-medium p-4\">\n    <div class=\"datepicker-header\">\n      <div class=\"datepicker-title bg-neutral-primary-medium text-heading px-2 py-3 text-center font-medium\"></div>\n      <div class=\"datepicker-controls flex justify-between mb-2\">\n        <button type=\"button\" class=\"bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary prev-btn\"></button>\n        <button type=\"button\" class=\"text-sm rounded-base text-heading bg-neutral-primary-medium font-medium py-2.5 px-5 hover:bg-neutral-tertiary-medium focus:outline-none focus:ring-2 focus:ring-neutral-tertiary view-switch\"></button>\n        <button type=\"button\" class=\"bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary next-btn\"></button>\n      </div>\n    </div>\n    <div class=\"datepicker-main p-1\"></div>\n    <div class=\"datepicker-footer\">\n      <div class=\"datepicker-controls flex space-x-2 rtl:space-x-reverse mt-2\">\n        <button type=\"button\" class=\"%buttonClass% today-btn text-white bg-brand hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium font-medium rounded-base text-sm px-5 py-2 text-center w-1/2\"></button>\n        <button type=\"button\" class=\"%buttonClass% clear-btn text-body bg-neutral-secondary-medium border border-default-medium hover:bg-neutral-tertiary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium rounded-base text-sm px-5 py-2 text-center w-1/2\"></button>\n      </div>\n    </div>\n  </div>\n</div>");
+
+var daysTemplate = optimizeTemplateHTML("<div class=\"days\">\n  <div class=\"days-of-week grid grid-cols-7 mb-1\">".concat(createTagRepeat('span', 7, {
+  "class": 'dow block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm'
+}), "</div>\n  <div class=\"datepicker-grid w-64 grid grid-cols-7\">").concat(createTagRepeat('span', 42, {
+  "class": 'block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm h-6 leading-6 text-sm font-medium text-fg-disabled'
+}), "</div>\n</div>"));
+
+var calendarWeeksTemplate = optimizeTemplateHTML("<div class=\"calendar-weeks\">\n  <div class=\"days-of-week flex\"><span class=\"dow h-6 leading-6 text-sm font-medium text-fg-disabled\"></span></div>\n  <div class=\"weeks\">".concat(createTagRepeat('span', 6, {
+  "class": 'week block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm'
+}), "</div>\n</div>"));
+
+// Base class of the view classes
+var View = /*#__PURE__*/function () {
+  function View(picker, config) {
+    _classCallCheck(this, View);
+    Object.assign(this, config, {
+      picker: picker,
+      element: parseHTML("<div class=\"datepicker-view flex\"></div>").firstChild,
+      selected: []
+    });
+    this.init(this.picker.datepicker.config);
+  }
+  return _createClass(View, [{
+    key: "init",
+    value: function init(options) {
+      if (options.pickLevel !== undefined) {
+        this.isMinView = this.id === options.pickLevel;
+      }
+      this.setOptions(options);
+      this.updateFocus();
+      this.updateSelection();
+    }
+
+    // Execute beforeShow() callback and apply the result to the element
+    // args:
+    // - current - current value on the iteration on view rendering
+    // - timeValue - time value of the date to pass to beforeShow()
+  }, {
+    key: "performBeforeHook",
+    value: function performBeforeHook(el, current, timeValue) {
+      var result = this.beforeShow(new Date(timeValue));
+      switch (_typeof(result)) {
+        case 'boolean':
+          result = {
+            enabled: result
+          };
+          break;
+        case 'string':
+          result = {
+            classes: result
+          };
+      }
+      if (result) {
+        if (result.enabled === false) {
+          el.classList.add('disabled');
+          pushUnique(this.disabled, current);
+        }
+        if (result.classes) {
+          var _el$classList;
+          var extraClasses = result.classes.split(/\s+/);
+          (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(extraClasses));
+          if (extraClasses.includes('disabled')) {
+            pushUnique(this.disabled, current);
+          }
+        }
+        if (result.content) {
+          replaceChildNodes(el, result.content);
+        }
+      }
+    }
+  }]);
+}();
+
+var DaysView = /*#__PURE__*/function (_View) {
+  function DaysView(picker) {
+    _classCallCheck(this, DaysView);
+    return _callSuper(this, DaysView, [picker, {
+      id: 0,
+      name: 'days',
+      cellClass: 'day'
+    }]);
+  }
+  _inherits(DaysView, _View);
+  return _createClass(DaysView, [{
+    key: "init",
+    value: function init(options) {
+      var onConstruction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (onConstruction) {
+        var inner = parseHTML(daysTemplate).firstChild;
+        this.dow = inner.firstChild;
+        this.grid = inner.lastChild;
+        this.element.appendChild(inner);
+      }
+      _get(_getPrototypeOf(DaysView.prototype), "init", this).call(this, options);
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      var _this = this;
+      var updateDOW;
+      if (hasProperty(options, 'minDate')) {
+        this.minDate = options.minDate;
+      }
+      if (hasProperty(options, 'maxDate')) {
+        this.maxDate = options.maxDate;
+      }
+      if (options.datesDisabled) {
+        this.datesDisabled = options.datesDisabled;
+      }
+      if (options.daysOfWeekDisabled) {
+        this.daysOfWeekDisabled = options.daysOfWeekDisabled;
+        updateDOW = true;
+      }
+      if (options.daysOfWeekHighlighted) {
+        this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
+      }
+      if (options.todayHighlight !== undefined) {
+        this.todayHighlight = options.todayHighlight;
+      }
+      if (options.weekStart !== undefined) {
+        this.weekStart = options.weekStart;
+        this.weekEnd = options.weekEnd;
+        updateDOW = true;
+      }
+      if (options.locale) {
+        var locale = this.locale = options.locale;
+        this.dayNames = locale.daysMin;
+        this.switchLabelFormat = locale.titleFormat;
+        updateDOW = true;
+      }
+      if (options.beforeShowDay !== undefined) {
+        this.beforeShow = typeof options.beforeShowDay === 'function' ? options.beforeShowDay : undefined;
+      }
+      if (options.calendarWeeks !== undefined) {
+        if (options.calendarWeeks && !this.calendarWeeks) {
+          var weeksElem = parseHTML(calendarWeeksTemplate).firstChild;
+          this.calendarWeeks = {
+            element: weeksElem,
+            dow: weeksElem.firstChild,
+            weeks: weeksElem.lastChild
+          };
+          this.element.insertBefore(weeksElem, this.element.firstChild);
+        } else if (this.calendarWeeks && !options.calendarWeeks) {
+          this.element.removeChild(this.calendarWeeks.element);
+          this.calendarWeeks = null;
+        }
+      }
+      if (options.showDaysOfWeek !== undefined) {
+        if (options.showDaysOfWeek) {
+          showElement(this.dow);
+          if (this.calendarWeeks) {
+            showElement(this.calendarWeeks.dow);
+          }
+        } else {
+          hideElement(this.dow);
+          if (this.calendarWeeks) {
+            hideElement(this.calendarWeeks.dow);
+          }
+        }
+      }
+
+      // update days-of-week when locale, daysOfweekDisabled or weekStart is changed
+      if (updateDOW) {
+        Array.from(this.dow.children).forEach(function (el, index) {
+          var dow = (_this.weekStart + index) % 7;
+          el.textContent = _this.dayNames[dow];
+          el.className = _this.daysOfWeekDisabled.includes(dow) ? 'dow disabled text-center h-6 leading-6 text-sm font-medium text-fg-disabled cursor-not-allowed' : 'dow text-center h-6 leading-6 text-sm font-medium text-body';
+        });
+      }
+    }
+
+    // Apply update on the focused date to view's settings
+  }, {
+    key: "updateFocus",
+    value: function updateFocus() {
+      var viewDate = new Date(this.picker.viewDate);
+      var viewYear = viewDate.getFullYear();
+      var viewMonth = viewDate.getMonth();
+      var firstOfMonth = dateValue(viewYear, viewMonth, 1);
+      var start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);
+      this.first = firstOfMonth;
+      this.last = dateValue(viewYear, viewMonth + 1, 0);
+      this.start = start;
+      this.focused = this.picker.viewDate;
+    }
+
+    // Apply update on the selected dates to view's settings
+  }, {
+    key: "updateSelection",
+    value: function updateSelection() {
+      var _this$picker$datepick = this.picker.datepicker,
+        dates = _this$picker$datepick.dates,
+        rangepicker = _this$picker$datepick.rangepicker;
+      this.selected = dates;
+      if (rangepicker) {
+        this.range = rangepicker.dates;
+      }
+    }
+
+    // Update the entire view UI
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      // update today marker on ever render
+      this.today = this.todayHighlight ? today() : undefined;
+      // refresh disabled dates on every render in order to clear the ones added
+      // by beforeShow hook at previous render
+      this.disabled = _toConsumableArray(this.datesDisabled);
+      var switchLabel = formatDate(this.focused, this.switchLabelFormat, this.locale);
+      this.picker.setViewSwitchLabel(switchLabel);
+      this.picker.setPrevBtnDisabled(this.first <= this.minDate);
+      this.picker.setNextBtnDisabled(this.last >= this.maxDate);
+      if (this.calendarWeeks) {
+        // start of the UTC week (Monday) of the 1st of the month
+        var startOfWeek = dayOfTheWeekOf(this.first, 1, 1);
+        Array.from(this.calendarWeeks.weeks.children).forEach(function (el, index) {
+          el.textContent = getWeek(addWeeks(startOfWeek, index));
+        });
+      }
+      Array.from(this.grid.children).forEach(function (el, index) {
+        var classList = el.classList;
+        var current = addDays(_this2.start, index);
+        var date = new Date(current);
+        var day = date.getDay();
+        el.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(_this2.cellClass);
+        el.dataset.date = current;
+        el.textContent = date.getDate();
+        if (current < _this2.first) {
+          classList.add('prev', 'text-fg-disabled');
+        } else if (current > _this2.last) {
+          classList.add('next', 'text-fg-disabled');
+        }
+        if (_this2.today === current) {
+          classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
+        }
+        if (current < _this2.minDate || current > _this2.maxDate || _this2.disabled.includes(current)) {
+          classList.add('disabled', 'cursor-not-allowed', 'text-fg-disabled');
+          classList.remove('hover:bg-neutral-tertiary-medium', 'text-body', 'cursor-pointer');
+        }
+        if (_this2.daysOfWeekDisabled.includes(day)) {
+          classList.add('disabled', 'cursor-not-allowed', 'text-fg-disabled');
+          classList.remove('hover:bg-neutral-tertiary-medium', 'text-body', 'cursor-pointer');
+          pushUnique(_this2.disabled, current);
+        }
+        if (_this2.daysOfWeekHighlighted.includes(day)) {
+          classList.add('highlighted');
+        }
+        if (_this2.range) {
+          var _this2$range = _slicedToArray(_this2.range, 2),
+            rangeStart = _this2$range[0],
+            rangeEnd = _this2$range[1];
+          if (current > rangeStart && current < rangeEnd) {
+            classList.add('range', 'bg-neutral-tertiary-medium');
+            classList.remove('rounded-base', 'rounded-s-base', 'rounded-e-base');
+          }
+          if (current === rangeStart) {
+            classList.add('range-start', 'bg-brand', 'rounded-s-base');
+            classList.remove('rounded-base', 'rounded-e-base');
+          }
+          if (current === rangeEnd) {
+            classList.add('range-end', 'bg-neutral-tertiary-medium', 'rounded-e-base');
+            classList.remove('rounded-base', 'rounded-s-base');
+          }
+        }
+        if (_this2.selected.includes(current)) {
+          classList.add('selected', 'bg-brand', 'text-white');
+          classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'bg-neutral-tertiary-medium');
+        }
+        if (current === _this2.focused) {
+          classList.add('focused');
+        }
+        if (_this2.beforeShow) {
+          _this2.performBeforeHook(el, current, current);
+        }
+      });
+    }
+
+    // Update the view UI by applying the changes of selected and focused items
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      var _this3 = this;
+      var _ref = this.range || [],
+        _ref2 = _slicedToArray(_ref, 2),
+        rangeStart = _ref2[0],
+        rangeEnd = _ref2[1];
+      this.grid.querySelectorAll('.range, .range-start, .range-end, .selected, .focused').forEach(function (el) {
+        el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-brand', 'text-white', 'focused');
+        el.classList.add('text-body', 'rounded-base');
+      });
+      Array.from(this.grid.children).forEach(function (el) {
+        var current = Number(el.dataset.date);
+        var classList = el.classList;
+        classList.remove('bg-neutral-tertiary-medium', 'rounded-s-base', 'rounded-e-base');
+        if (current > rangeStart && current < rangeEnd) {
+          classList.add('range', 'bg-neutral-tertiary-medium');
+          classList.remove('rounded-base');
+        }
+        if (current === rangeStart) {
+          classList.add('range-start', 'bg-brand', 'text-white', 'rounded-s-base');
+          classList.remove('rounded-base');
+        }
+        if (current === rangeEnd) {
+          classList.add('range-end', 'bg-neutral-tertiary-medium', 'rounded-e-base');
+          classList.remove('rounded-base');
+        }
+        if (_this3.selected.includes(current)) {
+          classList.add('selected', 'bg-brand', 'text-white');
+          classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'bg-neutral-tertiary-medium');
+        }
+        if (current === _this3.focused) {
+          classList.add('focused');
+        }
+      });
+    }
+
+    // Update the view UI by applying the change of focused item
+  }, {
+    key: "refreshFocus",
+    value: function refreshFocus() {
+      var index = Math.round((this.focused - this.start) / 86400000);
+      this.grid.querySelectorAll('.focused').forEach(function (el) {
+        el.classList.remove('focused');
+      });
+      this.grid.children[index].classList.add('focused');
+    }
+  }]);
+}(View);
+
+function computeMonthRange(range, thisYear) {
+  if (!range || !range[0] || !range[1]) {
+    return;
+  }
+  var _range = _slicedToArray(range, 2),
+    _range$ = _slicedToArray(_range[0], 2),
+    startY = _range$[0],
+    startM = _range$[1],
+    _range$2 = _slicedToArray(_range[1], 2),
+    endY = _range$2[0],
+    endM = _range$2[1];
+  if (startY > thisYear || endY < thisYear) {
+    return;
+  }
+  return [startY === thisYear ? startM : -1, endY === thisYear ? endM : 12];
+}
+var MonthsView = /*#__PURE__*/function (_View) {
+  function MonthsView(picker) {
+    _classCallCheck(this, MonthsView);
+    return _callSuper(this, MonthsView, [picker, {
+      id: 1,
+      name: 'months',
+      cellClass: 'month'
+    }]);
+  }
+  _inherits(MonthsView, _View);
+  return _createClass(MonthsView, [{
+    key: "init",
+    value: function init(options) {
+      var onConstruction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (onConstruction) {
+        this.grid = this.element;
+        this.element.classList.add('months', 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
+        this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {
+          'data-month': function dataMonth(ix) {
+            return ix;
+          }
+        })));
+      }
+      _get(_getPrototypeOf(MonthsView.prototype), "init", this).call(this, options);
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      if (options.locale) {
+        this.monthNames = options.locale.monthsShort;
+      }
+      if (hasProperty(options, 'minDate')) {
+        if (options.minDate === undefined) {
+          this.minYear = this.minMonth = this.minDate = undefined;
+        } else {
+          var minDateObj = new Date(options.minDate);
+          this.minYear = minDateObj.getFullYear();
+          this.minMonth = minDateObj.getMonth();
+          this.minDate = minDateObj.setDate(1);
+        }
+      }
+      if (hasProperty(options, 'maxDate')) {
+        if (options.maxDate === undefined) {
+          this.maxYear = this.maxMonth = this.maxDate = undefined;
+        } else {
+          var maxDateObj = new Date(options.maxDate);
+          this.maxYear = maxDateObj.getFullYear();
+          this.maxMonth = maxDateObj.getMonth();
+          this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);
+        }
+      }
+      if (options.beforeShowMonth !== undefined) {
+        this.beforeShow = typeof options.beforeShowMonth === 'function' ? options.beforeShowMonth : undefined;
+      }
+    }
+
+    // Update view's settings to reflect the viewDate set on the picker
+  }, {
+    key: "updateFocus",
+    value: function updateFocus() {
+      var viewDate = new Date(this.picker.viewDate);
+      this.year = viewDate.getFullYear();
+      this.focused = viewDate.getMonth();
+    }
+
+    // Update view's settings to reflect the selected dates
+  }, {
+    key: "updateSelection",
+    value: function updateSelection() {
+      var _this$picker$datepick = this.picker.datepicker,
+        dates = _this$picker$datepick.dates,
+        rangepicker = _this$picker$datepick.rangepicker;
+      this.selected = dates.reduce(function (selected, timeValue) {
+        var date = new Date(timeValue);
+        var year = date.getFullYear();
+        var month = date.getMonth();
+        if (selected[year] === undefined) {
+          selected[year] = [month];
+        } else {
+          pushUnique(selected[year], month);
+        }
+        return selected;
+      }, {});
+      if (rangepicker && rangepicker.dates) {
+        this.range = rangepicker.dates.map(function (timeValue) {
+          var date = new Date(timeValue);
+          return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
+        });
+      }
+    }
+
+    // Update the entire view UI
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+      // refresh disabled months on every render in order to clear the ones added
+      // by beforeShow hook at previous render
+      this.disabled = [];
+      this.picker.setViewSwitchLabel(this.year);
+      this.picker.setPrevBtnDisabled(this.year <= this.minYear);
+      this.picker.setNextBtnDisabled(this.year >= this.maxYear);
+      var selected = this.selected[this.year] || [];
+      var yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
+      var isMinYear = this.year === this.minYear;
+      var isMaxYear = this.year === this.maxYear;
+      var range = computeMonthRange(this.range, this.year);
+      Array.from(this.grid.children).forEach(function (el, index) {
+        var classList = el.classList;
+        var date = dateValue(_this.year, index, 1);
+        el.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(_this.cellClass);
+        if (_this.isMinView) {
+          el.dataset.date = date;
+        }
+        // reset text on every render to clear the custom content set
+        // by beforeShow hook at previous render
+        el.textContent = _this.monthNames[index];
+        if (yrOutOfRange || isMinYear && index < _this.minMonth || isMaxYear && index > _this.maxMonth) {
+          classList.add('disabled');
+        }
+        if (range) {
+          var _range2 = _slicedToArray(range, 2),
+            rangeStart = _range2[0],
+            rangeEnd = _range2[1];
+          if (index > rangeStart && index < rangeEnd) {
+            classList.add('range');
+          }
+          if (index === rangeStart) {
+            classList.add('range-start');
+          }
+          if (index === rangeEnd) {
+            classList.add('range-end');
+          }
+        }
+        if (selected.includes(index)) {
+          classList.add('selected', 'bg-brand', 'text-white', 'dark:text-white');
+          classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'dark:text-white');
+        }
+        if (index === _this.focused) {
+          classList.add('focused');
+        }
+        if (_this.beforeShow) {
+          _this.performBeforeHook(el, index, date);
+        }
+      });
+    }
+
+    // Update the view UI by applying the changes of selected and focused items
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      var _this2 = this;
+      var selected = this.selected[this.year] || [];
+      var _ref = computeMonthRange(this.range, this.year) || [],
+        _ref2 = _slicedToArray(_ref, 2),
+        rangeStart = _ref2[0],
+        rangeEnd = _ref2[1];
+      this.grid.querySelectorAll('.range, .range-start, .range-end, .selected, .focused').forEach(function (el) {
+        el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-brand', 'dark:text-white', 'text-white', 'focused');
+        el.classList.add('text-body', 'hover:bg-neutral-tertiary-medium', 'dark:text-white');
+      });
+      Array.from(this.grid.children).forEach(function (el, index) {
+        var classList = el.classList;
+        if (index > rangeStart && index < rangeEnd) {
+          classList.add('range');
+        }
+        if (index === rangeStart) {
+          classList.add('range-start');
+        }
+        if (index === rangeEnd) {
+          classList.add('range-end');
+        }
+        if (selected.includes(index)) {
+          classList.add('selected', 'bg-brand', 'text-white', 'dark:text-white');
+          classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'dark:text-white');
+        }
+        if (index === _this2.focused) {
+          classList.add('focused');
+        }
+      });
+    }
+
+    // Update the view UI by applying the change of focused item
+  }, {
+    key: "refreshFocus",
+    value: function refreshFocus() {
+      this.grid.querySelectorAll('.focused').forEach(function (el) {
+        el.classList.remove('focused');
+      });
+      this.grid.children[this.focused].classList.add('focused');
+    }
+  }]);
+}(View);
+
+function toTitleCase(word) {
+  return _toConsumableArray(word).reduce(function (str, ch, ix) {
+    return str += ix ? ch : ch.toUpperCase();
+  }, '');
+}
+
+// Class representing the years and decades view elements
+var YearsView = /*#__PURE__*/function (_View) {
+  function YearsView(picker, config) {
+    _classCallCheck(this, YearsView);
+    return _callSuper(this, YearsView, [picker, config]);
+  }
+  _inherits(YearsView, _View);
+  return _createClass(YearsView, [{
+    key: "init",
+    value: function init(options) {
+      var onConstruction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (onConstruction) {
+        this.navStep = this.step * 10;
+        this.beforeShowOption = "beforeShow".concat(toTitleCase(this.cellClass));
+        this.grid = this.element;
+        this.element.classList.add(this.name, 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
+        this.grid.appendChild(parseHTML(createTagRepeat('span', 12)));
+      }
+      _get(_getPrototypeOf(YearsView.prototype), "init", this).call(this, options);
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      if (hasProperty(options, 'minDate')) {
+        if (options.minDate === undefined) {
+          this.minYear = this.minDate = undefined;
+        } else {
+          this.minYear = startOfYearPeriod(options.minDate, this.step);
+          this.minDate = dateValue(this.minYear, 0, 1);
+        }
+      }
+      if (hasProperty(options, 'maxDate')) {
+        if (options.maxDate === undefined) {
+          this.maxYear = this.maxDate = undefined;
+        } else {
+          this.maxYear = startOfYearPeriod(options.maxDate, this.step);
+          this.maxDate = dateValue(this.maxYear, 11, 31);
+        }
+      }
+      if (options[this.beforeShowOption] !== undefined) {
+        var beforeShow = options[this.beforeShowOption];
+        this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;
+      }
+    }
+
+    // Update view's settings to reflect the viewDate set on the picker
+  }, {
+    key: "updateFocus",
+    value: function updateFocus() {
+      var viewDate = new Date(this.picker.viewDate);
+      var first = startOfYearPeriod(viewDate, this.navStep);
+      var last = first + 9 * this.step;
+      this.first = first;
+      this.last = last;
+      this.start = first - this.step;
+      this.focused = startOfYearPeriod(viewDate, this.step);
+    }
+
+    // Update view's settings to reflect the selected dates
+  }, {
+    key: "updateSelection",
+    value: function updateSelection() {
+      var _this = this;
+      var _this$picker$datepick = this.picker.datepicker,
+        dates = _this$picker$datepick.dates,
+        rangepicker = _this$picker$datepick.rangepicker;
+      this.selected = dates.reduce(function (years, timeValue) {
+        return pushUnique(years, startOfYearPeriod(timeValue, _this.step));
+      }, []);
+      if (rangepicker && rangepicker.dates) {
+        this.range = rangepicker.dates.map(function (timeValue) {
+          if (timeValue !== undefined) {
+            return startOfYearPeriod(timeValue, _this.step);
+          }
+        });
+      }
+    }
+
+    // Update the entire view UI
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      // refresh disabled years on every render in order to clear the ones added
+      // by beforeShow hook at previous render
+      this.disabled = [];
+      this.picker.setViewSwitchLabel("".concat(this.first, "-").concat(this.last));
+      this.picker.setPrevBtnDisabled(this.first <= this.minYear);
+      this.picker.setNextBtnDisabled(this.last >= this.maxYear);
+      Array.from(this.grid.children).forEach(function (el, index) {
+        var classList = el.classList;
+        var current = _this2.start + index * _this2.step;
+        var date = dateValue(current, 0, 1);
+        el.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(_this2.cellClass);
+        if (_this2.isMinView) {
+          el.dataset.date = date;
+        }
+        el.textContent = el.dataset.year = current;
+        if (index === 0) {
+          classList.add('prev');
+        } else if (index === 11) {
+          classList.add('next');
+        }
+        if (current < _this2.minYear || current > _this2.maxYear) {
+          classList.add('disabled');
+        }
+        if (_this2.range) {
+          var _this2$range = _slicedToArray(_this2.range, 2),
+            rangeStart = _this2$range[0],
+            rangeEnd = _this2$range[1];
+          if (current > rangeStart && current < rangeEnd) {
+            classList.add('range');
+          }
+          if (current === rangeStart) {
+            classList.add('range-start');
+          }
+          if (current === rangeEnd) {
+            classList.add('range-end');
+          }
+        }
+        if (_this2.selected.includes(current)) {
+          classList.add('selected', 'bg-brand', 'text-white', 'dark:text-white');
+          classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'dark:text-white');
+        }
+        if (current === _this2.focused) {
+          classList.add('focused');
+        }
+        if (_this2.beforeShow) {
+          _this2.performBeforeHook(el, current, date);
+        }
+      });
+    }
+
+    // Update the view UI by applying the changes of selected and focused items
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      var _this3 = this;
+      var _ref = this.range || [],
+        _ref2 = _slicedToArray(_ref, 2),
+        rangeStart = _ref2[0],
+        rangeEnd = _ref2[1];
+      this.grid.querySelectorAll('.range, .range-start, .range-end, .selected, .focused').forEach(function (el) {
+        el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-brand', 'text-white', 'dark:text-white', 'focused');
+      });
+      Array.from(this.grid.children).forEach(function (el) {
+        var current = Number(el.textContent);
+        var classList = el.classList;
+        if (current > rangeStart && current < rangeEnd) {
+          classList.add('range');
+        }
+        if (current === rangeStart) {
+          classList.add('range-start');
+        }
+        if (current === rangeEnd) {
+          classList.add('range-end');
+        }
+        if (_this3.selected.includes(current)) {
+          classList.add('selected', 'bg-brand', 'text-white', 'hover:text-heading');
+          classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'hover:text-heading');
+        }
+        if (current === _this3.focused) {
+          classList.add('focused');
+        }
+      });
+    }
+
+    // Update the view UI by applying the change of focused item
+  }, {
+    key: "refreshFocus",
+    value: function refreshFocus() {
+      var index = Math.round((this.focused - this.start) / this.step);
+      this.grid.querySelectorAll('.focused').forEach(function (el) {
+        el.classList.remove('focused');
+      });
+      this.grid.children[index].classList.add('focused');
+    }
+  }]);
+}(View);
+
+function triggerDatepickerEvent(datepicker, type) {
+  var detail = {
+    date: datepicker.getDate(),
+    viewDate: new Date(datepicker.picker.viewDate),
+    viewId: datepicker.picker.currentView.id,
+    datepicker: datepicker
+  };
+  datepicker.element.dispatchEvent(new CustomEvent(type, {
+    detail: detail
+  }));
+}
+
+// direction: -1 (to previous), 1 (to next)
+function goToPrevOrNext(datepicker, direction) {
+  var _datepicker$config = datepicker.config,
+    minDate = _datepicker$config.minDate,
+    maxDate = _datepicker$config.maxDate;
+  var _datepicker$picker = datepicker.picker,
+    currentView = _datepicker$picker.currentView,
+    viewDate = _datepicker$picker.viewDate;
+  var newViewDate;
+  switch (currentView.id) {
+    case 0:
+      newViewDate = addMonths(viewDate, direction);
+      break;
+    case 1:
+      newViewDate = addYears(viewDate, direction);
+      break;
+    default:
+      newViewDate = addYears(viewDate, direction * currentView.navStep);
+  }
+  newViewDate = limitToRange(newViewDate, minDate, maxDate);
+  datepicker.picker.changeFocus(newViewDate).render();
+}
+function switchView(datepicker) {
+  var viewId = datepicker.picker.currentView.id;
+  if (viewId === datepicker.config.maxView) {
+    return;
+  }
+  datepicker.picker.changeView(viewId + 1).render();
+}
+function unfocus(datepicker) {
+  if (datepicker.config.updateOnBlur) {
+    datepicker.update({
+      autohide: true
+    });
+  } else {
+    datepicker.refresh('input');
+    datepicker.hide();
+  }
+}
+
+function goToSelectedMonthOrYear(datepicker, selection) {
+  var picker = datepicker.picker;
+  var viewDate = new Date(picker.viewDate);
+  var viewId = picker.currentView.id;
+  var newDate = viewId === 1 ? addMonths(viewDate, selection - viewDate.getMonth()) : addYears(viewDate, selection - viewDate.getFullYear());
+  picker.changeFocus(newDate).changeView(viewId - 1).render();
+}
+function onClickTodayBtn(datepicker) {
+  var picker = datepicker.picker;
+  var currentDate = today();
+  if (datepicker.config.todayBtnMode === 1) {
+    if (datepicker.config.autohide) {
+      datepicker.setDate(currentDate);
+      return;
+    }
+    datepicker.setDate(currentDate, {
+      render: false
+    });
+    picker.update();
+  }
+  if (picker.viewDate !== currentDate) {
+    picker.changeFocus(currentDate);
+  }
+  picker.changeView(0).render();
+}
+function onClickClearBtn(datepicker) {
+  datepicker.setDate({
+    clear: true
+  });
+}
+function onClickViewSwitch(datepicker) {
+  switchView(datepicker);
+}
+function onClickPrevBtn(datepicker) {
+  goToPrevOrNext(datepicker, -1);
+}
+function onClickNextBtn(datepicker) {
+  goToPrevOrNext(datepicker, 1);
+}
+
+// For the picker's main block to delegete the events from `datepicker-cell`s
+function onClickView(datepicker, ev) {
+  var target = findElementInEventPath(ev, '.datepicker-cell');
+  if (!target || target.classList.contains('disabled')) {
+    return;
+  }
+  var _datepicker$picker$cu = datepicker.picker.currentView,
+    id = _datepicker$picker$cu.id,
+    isMinView = _datepicker$picker$cu.isMinView;
+  if (isMinView) {
+    datepicker.setDate(Number(target.dataset.date));
+  } else if (id === 1) {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.month));
+  } else {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.year));
+  }
+}
+function onClickPicker(datepicker) {
+  if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
+    datepicker.inputField.focus();
+  }
+}
+
+function processPickerOptions(picker, options) {
+  if (options.title !== undefined) {
+    if (options.title) {
+      picker.controls.title.textContent = options.title;
+      showElement(picker.controls.title);
+    } else {
+      picker.controls.title.textContent = '';
+      hideElement(picker.controls.title);
+    }
+  }
+  if (options.prevArrow) {
+    var prevBtn = picker.controls.prevBtn;
+    emptyChildNodes(prevBtn);
+    options.prevArrow.forEach(function (node) {
+      prevBtn.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.nextArrow) {
+    var nextBtn = picker.controls.nextBtn;
+    emptyChildNodes(nextBtn);
+    options.nextArrow.forEach(function (node) {
+      nextBtn.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.locale) {
+    picker.controls.todayBtn.textContent = options.locale.today;
+    picker.controls.clearBtn.textContent = options.locale.clear;
+  }
+  if (options.todayBtn !== undefined) {
+    if (options.todayBtn) {
+      showElement(picker.controls.todayBtn);
+    } else {
+      hideElement(picker.controls.todayBtn);
+    }
+  }
+  if (hasProperty(options, 'minDate') || hasProperty(options, 'maxDate')) {
+    var _picker$datepicker$co = picker.datepicker.config,
+      minDate = _picker$datepicker$co.minDate,
+      maxDate = _picker$datepicker$co.maxDate;
+    picker.controls.todayBtn.disabled = !isInRange(today(), minDate, maxDate);
+  }
+  if (options.clearBtn !== undefined) {
+    if (options.clearBtn) {
+      showElement(picker.controls.clearBtn);
+    } else {
+      hideElement(picker.controls.clearBtn);
+    }
+  }
+}
+
+// Compute view date to reset, which will be...
+// - the last item of the selected dates or defaultViewDate if no selection
+// - limitted to minDate or maxDate if it exceeds the range
+function computeResetViewDate(datepicker) {
+  var dates = datepicker.dates,
+    config = datepicker.config;
+  var viewDate = dates.length > 0 ? lastItemOf(dates) : config.defaultViewDate;
+  return limitToRange(viewDate, config.minDate, config.maxDate);
+}
+
+// Change current view's view date
+function setViewDate(picker, newDate) {
+  var oldViewDate = new Date(picker.viewDate);
+  var newViewDate = new Date(newDate);
+  var _picker$currentView = picker.currentView,
+    id = _picker$currentView.id,
+    year = _picker$currentView.year,
+    first = _picker$currentView.first,
+    last = _picker$currentView.last;
+  var viewYear = newViewDate.getFullYear();
+  picker.viewDate = newDate;
+  if (viewYear !== oldViewDate.getFullYear()) {
+    triggerDatepickerEvent(picker.datepicker, 'changeYear');
+  }
+  if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
+    triggerDatepickerEvent(picker.datepicker, 'changeMonth');
+  }
+
+  // return whether the new date is in different period on time from the one
+  // displayed in the current view
+  // when true, the view needs to be re-rendered on the next UI refresh.
+  switch (id) {
+    case 0:
+      return newDate < first || newDate > last;
+    case 1:
+      return viewYear !== year;
+    default:
+      return viewYear < first || viewYear > last;
+  }
+}
+function getTextDirection(el) {
+  return window.getComputedStyle(el).direction;
+}
+
+// Class representing the picker UI
+var Picker = /*#__PURE__*/function () {
+  function Picker(datepicker) {
+    _classCallCheck(this, Picker);
+    this.datepicker = datepicker;
+    var template = pickerTemplate.replace(/%buttonClass%/g, datepicker.config.buttonClass);
+    var element = this.element = parseHTML(template).firstChild;
+    var _element$firstChild$c = _slicedToArray(element.firstChild.children, 3),
+      header = _element$firstChild$c[0],
+      main = _element$firstChild$c[1],
+      footer = _element$firstChild$c[2];
+    var title = header.firstElementChild;
+    var _header$lastElementCh = _slicedToArray(header.lastElementChild.children, 3),
+      prevBtn = _header$lastElementCh[0],
+      viewSwitch = _header$lastElementCh[1],
+      nextBtn = _header$lastElementCh[2];
+    var _footer$firstChild$ch = _slicedToArray(footer.firstChild.children, 2),
+      todayBtn = _footer$firstChild$ch[0],
+      clearBtn = _footer$firstChild$ch[1];
+    var controls = {
+      title: title,
+      prevBtn: prevBtn,
+      viewSwitch: viewSwitch,
+      nextBtn: nextBtn,
+      todayBtn: todayBtn,
+      clearBtn: clearBtn
+    };
+    this.main = main;
+    this.controls = controls;
+    var elementClass = datepicker.inline ? 'inline' : 'dropdown';
+    element.classList.add("datepicker-".concat(elementClass));
+    elementClass === 'dropdown' ? element.classList.add('dropdown', 'absolute', 'top-0', 'left-0', 'z-50', 'pt-2') : null;
+    processPickerOptions(this, datepicker.config);
+    this.viewDate = computeResetViewDate(datepicker);
+
+    // set up event listeners
+    registerListeners(datepicker, [[element, 'click', onClickPicker.bind(null, datepicker), {
+      capture: true
+    }], [main, 'click', onClickView.bind(null, datepicker)], [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)], [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)], [controls.nextBtn, 'click', onClickNextBtn.bind(null, datepicker)], [controls.todayBtn, 'click', onClickTodayBtn.bind(null, datepicker)], [controls.clearBtn, 'click', onClickClearBtn.bind(null, datepicker)]]);
+
+    // set up views
+    this.views = [new DaysView(this), new MonthsView(this), new YearsView(this, {
+      id: 2,
+      name: 'years',
+      cellClass: 'year',
+      step: 1
+    }), new YearsView(this, {
+      id: 3,
+      name: 'decades',
+      cellClass: 'decade',
+      step: 10
+    })];
+    this.currentView = this.views[datepicker.config.startView];
+    this.currentView.render();
+    this.main.appendChild(this.currentView.element);
+    datepicker.config.container.appendChild(this.element);
+  }
+  return _createClass(Picker, [{
+    key: "setOptions",
+    value: function setOptions(options) {
+      processPickerOptions(this, options);
+      this.views.forEach(function (view) {
+        view.init(options, false);
+      });
+      this.currentView.render();
+    }
+  }, {
+    key: "detach",
+    value: function detach() {
+      this.datepicker.config.container.removeChild(this.element);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.active) {
+        return;
+      }
+      this.element.classList.add('active', 'block');
+      this.element.classList.remove('hidden');
+      this.active = true;
+      var datepicker = this.datepicker;
+      if (!datepicker.inline) {
+        // ensure picker's direction matches input's
+        var inputDirection = getTextDirection(datepicker.inputField);
+        if (inputDirection !== getTextDirection(datepicker.config.container)) {
+          this.element.dir = inputDirection;
+        } else if (this.element.dir) {
+          this.element.removeAttribute('dir');
+        }
+        this.place();
+        if (datepicker.config.disableTouchKeyboard) {
+          datepicker.inputField.blur();
+        }
+      }
+      triggerDatepickerEvent(datepicker, 'show');
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (!this.active) {
+        return;
+      }
+      this.datepicker.exitEditMode();
+      this.element.classList.remove('active', 'block');
+      this.element.classList.add('active', 'block', 'hidden');
+      this.active = false;
+      triggerDatepickerEvent(this.datepicker, 'hide');
+    }
+  }, {
+    key: "place",
+    value: function place() {
+      var _this$element = this.element,
+        classList = _this$element.classList,
+        style = _this$element.style;
+      var _this$datepicker = this.datepicker,
+        config = _this$datepicker.config,
+        inputField = _this$datepicker.inputField;
+      var container = config.container;
+      var _this$element$getBoun = this.element.getBoundingClientRect(),
+        calendarWidth = _this$element$getBoun.width,
+        calendarHeight = _this$element$getBoun.height;
+      var _container$getBoundin = container.getBoundingClientRect(),
+        containerLeft = _container$getBoundin.left,
+        containerTop = _container$getBoundin.top,
+        containerWidth = _container$getBoundin.width;
+      var _inputField$getBoundi = inputField.getBoundingClientRect(),
+        inputLeft = _inputField$getBoundi.left,
+        inputTop = _inputField$getBoundi.top,
+        inputWidth = _inputField$getBoundi.width,
+        inputHeight = _inputField$getBoundi.height;
+      var _config$orientation = config.orientation,
+        orientX = _config$orientation.x,
+        orientY = _config$orientation.y;
+      var scrollTop;
+      var left;
+      var top;
+      if (container === document.body) {
+        scrollTop = window.scrollY;
+        left = inputLeft + window.scrollX;
+        top = inputTop + scrollTop;
+      } else {
+        scrollTop = container.scrollTop;
+        left = inputLeft - containerLeft;
+        top = inputTop - containerTop + scrollTop;
+      }
+      if (orientX === 'auto') {
+        if (left < 0) {
+          // align to the left and move into visible area if input's left edge < window's
+          orientX = 'left';
+          left = 10;
+        } else if (left + calendarWidth > containerWidth) {
+          // align to the right if canlendar's right edge > container's
+          orientX = 'right';
+        } else {
+          orientX = getTextDirection(inputField) === 'rtl' ? 'right' : 'left';
+        }
+      }
+      if (orientX === 'right') {
+        left -= calendarWidth - inputWidth;
+      }
+      if (orientY === 'auto') {
+        orientY = top - calendarHeight < scrollTop ? 'bottom' : 'top';
+      }
+      if (orientY === 'top') {
+        top -= calendarHeight;
+      } else {
+        top += inputHeight;
+      }
+      classList.remove('datepicker-orient-top', 'datepicker-orient-bottom', 'datepicker-orient-right', 'datepicker-orient-left');
+      classList.add("datepicker-orient-".concat(orientY), "datepicker-orient-".concat(orientX));
+      style.top = top ? "".concat(top, "px") : top;
+      style.left = left ? "".concat(left, "px") : left;
+    }
+  }, {
+    key: "setViewSwitchLabel",
+    value: function setViewSwitchLabel(labelText) {
+      this.controls.viewSwitch.textContent = labelText;
+    }
+  }, {
+    key: "setPrevBtnDisabled",
+    value: function setPrevBtnDisabled(disabled) {
+      this.controls.prevBtn.disabled = disabled;
+    }
+  }, {
+    key: "setNextBtnDisabled",
+    value: function setNextBtnDisabled(disabled) {
+      this.controls.nextBtn.disabled = disabled;
+    }
+  }, {
+    key: "changeView",
+    value: function changeView(viewId) {
+      var oldView = this.currentView;
+      var newView = this.views[viewId];
+      if (newView.id !== oldView.id) {
+        this.currentView = newView;
+        this._renderMethod = 'render';
+        triggerDatepickerEvent(this.datepicker, 'changeView');
+        this.main.replaceChild(newView.element, oldView.element);
+      }
+      return this;
+    }
+
+    // Change the focused date (view date)
+  }, {
+    key: "changeFocus",
+    value: function changeFocus(newViewDate) {
+      this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';
+      this.views.forEach(function (view) {
+        view.updateFocus();
+      });
+      return this;
+    }
+
+    // Apply the change of the selected dates
+  }, {
+    key: "update",
+    value: function update() {
+      var newViewDate = computeResetViewDate(this.datepicker);
+      this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';
+      this.views.forEach(function (view) {
+        view.updateFocus();
+        view.updateSelection();
+      });
+      return this;
+    }
+
+    // Refresh the picker UI
+  }, {
+    key: "render",
+    value: function render() {
+      var quickRender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      var renderMethod = quickRender && this._renderMethod || 'render';
+      delete this._renderMethod;
+      this.currentView[renderMethod]();
+    }
+  }]);
+}();
+
+// Find the closest date that doesn't meet the condition for unavailable date
+// Returns undefined if no available date is found
+// addFn: function to calculate the next date
+//   - args: time value, amount
+// increase: amount to pass to addFn
+// testFn: function to test the unavailablity of the date
+//   - args: time value; retun: true if unavailable
+function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
+  if (!isInRange(date, min, max)) {
+    return;
+  }
+  if (testFn(date)) {
+    var newDate = addFn(date, increase);
+    return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
+  }
+  return date;
+}
+
+// direction: -1 (left/up), 1 (right/down)
+// vertical: true for up/down, false for left/right
+function moveByArrowKey(datepicker, ev, direction, vertical) {
+  var picker = datepicker.picker;
+  var currentView = picker.currentView;
+  var step = currentView.step || 1;
+  var viewDate = picker.viewDate;
+  var addFn;
+  var testFn;
+  switch (currentView.id) {
+    case 0:
+      if (vertical) {
+        viewDate = addDays(viewDate, direction * 7);
+      } else if (ev.ctrlKey || ev.metaKey) {
+        viewDate = addYears(viewDate, direction);
+      } else {
+        viewDate = addDays(viewDate, direction);
+      }
+      addFn = addDays;
+      testFn = function testFn(date) {
+        return currentView.disabled.includes(date);
+      };
+      break;
+    case 1:
+      viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
+      addFn = addMonths;
+      testFn = function testFn(date) {
+        var dt = new Date(date);
+        var year = currentView.year,
+          disabled = currentView.disabled;
+        return dt.getFullYear() === year && disabled.includes(dt.getMonth());
+      };
+      break;
+    default:
+      viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
+      addFn = addYears;
+      testFn = function testFn(date) {
+        return currentView.disabled.includes(startOfYearPeriod(date, step));
+      };
+  }
+  viewDate = findNextAvailableOne(viewDate, addFn, direction < 0 ? -step : step, testFn, currentView.minDate, currentView.maxDate);
+  if (viewDate !== undefined) {
+    picker.changeFocus(viewDate).render();
+  }
+}
+function onKeydown(datepicker, ev) {
+  if (ev.key === 'Tab') {
+    unfocus(datepicker);
+    return;
+  }
+  var picker = datepicker.picker;
+  var _picker$currentView = picker.currentView,
+    id = _picker$currentView.id,
+    isMinView = _picker$currentView.isMinView;
+  if (!picker.active) {
+    switch (ev.key) {
+      case 'ArrowDown':
+      case 'Escape':
+        picker.show();
+        break;
+      case 'Enter':
+        datepicker.update();
+        break;
+      default:
+        return;
+    }
+  } else if (datepicker.editMode) {
+    switch (ev.key) {
+      case 'Escape':
+        picker.hide();
+        break;
+      case 'Enter':
+        datepicker.exitEditMode({
+          update: true,
+          autohide: datepicker.config.autohide
+        });
+        break;
+      default:
+        return;
+    }
+  } else {
+    switch (ev.key) {
+      case 'Escape':
+        picker.hide();
+        break;
+      case 'ArrowLeft':
+        if (ev.ctrlKey || ev.metaKey) {
+          goToPrevOrNext(datepicker, -1);
+        } else if (ev.shiftKey) {
+          datepicker.enterEditMode();
+          return;
+        } else {
+          moveByArrowKey(datepicker, ev, -1, false);
+        }
+        break;
+      case 'ArrowRight':
+        if (ev.ctrlKey || ev.metaKey) {
+          goToPrevOrNext(datepicker, 1);
+        } else if (ev.shiftKey) {
+          datepicker.enterEditMode();
+          return;
+        } else {
+          moveByArrowKey(datepicker, ev, 1, false);
+        }
+        break;
+      case 'ArrowUp':
+        if (ev.ctrlKey || ev.metaKey) {
+          switchView(datepicker);
+        } else if (ev.shiftKey) {
+          datepicker.enterEditMode();
+          return;
+        } else {
+          moveByArrowKey(datepicker, ev, -1, true);
+        }
+        break;
+      case 'ArrowDown':
+        if (ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+          datepicker.enterEditMode();
+          return;
+        }
+        moveByArrowKey(datepicker, ev, 1, true);
+        break;
+      case 'Enter':
+        if (isMinView) {
+          datepicker.setDate(picker.viewDate);
+        } else {
+          picker.changeView(id - 1).render();
+        }
+        break;
+      case 'Backspace':
+      case 'Delete':
+        datepicker.enterEditMode();
+        return;
+      default:
+        if (ev.key.length === 1 && !ev.ctrlKey && !ev.metaKey) {
+          datepicker.enterEditMode();
+        }
+        return;
+    }
+  }
+  ev.preventDefault();
+  ev.stopPropagation();
+}
+function onFocus(datepicker) {
+  if (datepicker.config.showOnFocus && !datepicker._showing) {
+    datepicker.show();
+  }
+}
+
+// for the prevention for entering edit mode while getting focus on click
+function onMousedown(datepicker, ev) {
+  var el = ev.target;
+  if (datepicker.picker.active || datepicker.config.showOnClick) {
+    el._active = el === document.activeElement;
+    el._clicking = setTimeout(function () {
+      delete el._active;
+      delete el._clicking;
+    }, 2000);
+  }
+}
+function onClickInput(datepicker, ev) {
+  var el = ev.target;
+  if (!el._clicking) {
+    return;
+  }
+  clearTimeout(el._clicking);
+  delete el._clicking;
+  if (el._active) {
+    datepicker.enterEditMode();
+  }
+  delete el._active;
+  if (datepicker.config.showOnClick) {
+    datepicker.show();
+  }
+}
+function onPaste(datepicker, ev) {
+  if (ev.clipboardData.types.includes('text/plain')) {
+    datepicker.enterEditMode();
+  }
+}
+
+// for the `document` to delegate the events from outside the picker/input field
+function onClickOutside(datepicker, ev) {
+  var element = datepicker.element;
+  if (element !== document.activeElement) {
+    return;
+  }
+  var pickerElem = datepicker.picker.element;
+  if (findElementInEventPath(ev, function (el) {
+    return el === element || el === pickerElem;
+  })) {
+    return;
+  }
+  unfocus(datepicker);
+}
+
+function stringifyDates(dates, config) {
+  return dates.map(function (dt) {
+    return formatDate(dt, config.format, config.locale);
+  }).join(config.dateDelimiter);
+}
+
+// parse input dates and create an array of time values for selection
+// returns undefined if there are no valid dates in inputDates
+// when origDates (current selection) is passed, the function works to mix
+// the input dates into the current selection
+function processInputDates(datepicker, inputDates) {
+  var clear = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var config = datepicker.config,
+    origDates = datepicker.dates,
+    rangepicker = datepicker.rangepicker;
+  if (inputDates.length === 0) {
+    // empty input is considered valid unless origiDates is passed
+    return clear ? [] : undefined;
+  }
+  var rangeEnd = rangepicker && datepicker === rangepicker.datepickers[1];
+  var newDates = inputDates.reduce(function (dates, dt) {
+    var date = parseDate(dt, config.format, config.locale);
+    if (date === undefined) {
+      return dates;
+    }
+    if (config.pickLevel > 0) {
+      // adjust to 1st of the month/Jan 1st of the year
+      // or to the last day of the monh/Dec 31st of the year if the datepicker
+      // is the range-end picker of a rangepicker
+      var _dt = new Date(date);
+      if (config.pickLevel === 1) {
+        date = rangeEnd ? _dt.setMonth(_dt.getMonth() + 1, 0) : _dt.setDate(1);
+      } else {
+        date = rangeEnd ? _dt.setFullYear(_dt.getFullYear() + 1, 0, 0) : _dt.setMonth(0, 1);
+      }
+    }
+    if (isInRange(date, config.minDate, config.maxDate) && !dates.includes(date) && !config.datesDisabled.includes(date) && !config.daysOfWeekDisabled.includes(new Date(date).getDay())) {
+      dates.push(date);
+    }
+    return dates;
+  }, []);
+  if (newDates.length === 0) {
+    return;
+  }
+  if (config.multidate && !clear) {
+    // get the synmetric difference between origDates and newDates
+    newDates = newDates.reduce(function (dates, date) {
+      if (!origDates.includes(date)) {
+        dates.push(date);
+      }
+      return dates;
+    }, origDates.filter(function (date) {
+      return !newDates.includes(date);
+    }));
+  }
+  // do length check always because user can input multiple dates regardless of the mode
+  return config.maxNumberOfDates && newDates.length > config.maxNumberOfDates ? newDates.slice(config.maxNumberOfDates * -1) : newDates;
+}
+
+// refresh the UI elements
+// modes: 1: input only, 2, picker only, 3 both
+function refreshUI(datepicker) {
+  var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  var quickRender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var config = datepicker.config,
+    picker = datepicker.picker,
+    inputField = datepicker.inputField;
+  if (mode & 2) {
+    var newView = picker.active ? config.pickLevel : config.startView;
+    picker.update().changeView(newView).render(quickRender);
+  }
+  if (mode & 1 && inputField) {
+    inputField.value = stringifyDates(datepicker.dates, config);
+  }
+}
+function _setDate(datepicker, inputDates, options) {
+  var clear = options.clear,
+    render = options.render,
+    autohide = options.autohide;
+  if (render === undefined) {
+    render = true;
+  }
+  if (!render) {
+    autohide = false;
+  } else if (autohide === undefined) {
+    autohide = datepicker.config.autohide;
+  }
+  var newDates = processInputDates(datepicker, inputDates, clear);
+  if (!newDates) {
+    return;
+  }
+  if (newDates.toString() !== datepicker.dates.toString()) {
+    datepicker.dates = newDates;
+    refreshUI(datepicker, render ? 3 : 1);
+    triggerDatepickerEvent(datepicker, 'changeDate');
+  } else {
+    refreshUI(datepicker, 1);
+  }
+  if (autohide) {
+    datepicker.hide();
+  }
+}
+
+/**
+ * Class representing a date picker
+ */
+var Datepicker = /*#__PURE__*/function () {
+  /**
+   * Create a date picker
+   * @param  {Element} element - element to bind a date picker
+   * @param  {Object} [options] - config options
+   * @param  {DateRangePicker} [rangepicker] - DateRangePicker instance the
+   * date picker belongs to. Use this only when creating date picker as a part
+   * of date range picker
+   */
+  function Datepicker(element) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var rangepicker = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+    _classCallCheck(this, Datepicker);
+    element.datepicker = this;
+    this.element = element;
+
+    // set up config
+    var config = this.config = Object.assign({
+      buttonClass: options.buttonClass && String(options.buttonClass) || 'button',
+      container: document.body,
+      defaultViewDate: today(),
+      maxDate: undefined,
+      minDate: undefined
+    }, processOptions(defaultOptions, this));
+    this._options = options;
+    Object.assign(config, processOptions(options, this));
+
+    // configure by type
+    var inline = this.inline = element.tagName !== 'INPUT';
+    var inputField;
+    var initialDates;
+    if (inline) {
+      config.container = element;
+      initialDates = stringToArray(element.dataset.date, config.dateDelimiter);
+      delete element.dataset.date;
+    } else {
+      var container = options.container ? document.querySelector(options.container) : null;
+      if (container) {
+        config.container = container;
+      }
+      inputField = this.inputField = element;
+      inputField.classList.add('datepicker-input');
+      initialDates = stringToArray(inputField.value, config.dateDelimiter);
+    }
+    if (rangepicker) {
+      // check validiry
+      var index = rangepicker.inputs.indexOf(inputField);
+      var datepickers = rangepicker.datepickers;
+      if (index < 0 || index > 1 || !Array.isArray(datepickers)) {
+        throw Error('Invalid rangepicker object.');
+      }
+      // attach itaelf to the rangepicker here so that processInputDates() can
+      // determine if this is the range-end picker of the rangepicker while
+      // setting inital values when pickLevel > 0
+      datepickers[index] = this;
+      // add getter for rangepicker
+      Object.defineProperty(this, 'rangepicker', {
+        get: function get() {
+          return rangepicker;
+        }
+      });
+    }
+
+    // set initial dates
+    this.dates = [];
+    // process initial value
+    var inputDateValues = processInputDates(this, initialDates);
+    if (inputDateValues && inputDateValues.length > 0) {
+      this.dates = inputDateValues;
+    }
+    if (inputField) {
+      inputField.value = stringifyDates(this.dates, config);
+    }
+    var picker = this.picker = new Picker(this);
+    if (inline) {
+      this.show();
+    } else {
+      // set up event listeners in other modes
+      var onMousedownDocument = onClickOutside.bind(null, this);
+      var listeners = [[inputField, 'keydown', onKeydown.bind(null, this)], [inputField, 'focus', onFocus.bind(null, this)], [inputField, 'mousedown', onMousedown.bind(null, this)], [inputField, 'click', onClickInput.bind(null, this)], [inputField, 'paste', onPaste.bind(null, this)], [document, 'mousedown', onMousedownDocument], [document, 'touchstart', onMousedownDocument], [window, 'resize', picker.place.bind(picker)]];
+      registerListeners(this, listeners);
+    }
+  }
+
+  /**
+   * Format Date object or time value in given format and language
+   * @param  {Date|Number} date - date or time value to format
+   * @param  {String|Object} format - format string or object that contains
+   * toDisplay() custom formatter, whose signature is
+   * - args:
+   *   - date: {Date} - Date instance of the date passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {String} formatted date
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {String} formatted date
+   */
+  return _createClass(Datepicker, [{
+    key: "active",
+    get:
+    /**
+     * @type {Boolean} - Whether the picker element is shown. `true` whne shown
+     */
+    function get() {
+      return !!(this.picker && this.picker.active);
+    }
+
+    /**
+     * @type {HTMLDivElement} - DOM object of picker element
+     */
+  }, {
+    key: "pickerElement",
+    get: function get() {
+      return this.picker ? this.picker.element : undefined;
+    }
+
+    /**
+     * Set new values to the config options
+     * @param {Object} options - config options to update
+     */
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      var picker = this.picker;
+      var newOptions = processOptions(options, this);
+      Object.assign(this._options, options);
+      Object.assign(this.config, newOptions);
+      picker.setOptions(newOptions);
+      refreshUI(this, 3);
+    }
+
+    /**
+     * Show the picker element
+     */
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.inputField) {
+        if (this.inputField.disabled) {
+          return;
+        }
+        if (this.inputField !== document.activeElement) {
+          this._showing = true;
+          this.inputField.focus();
+          delete this._showing;
+        }
+      }
+      this.picker.show();
+    }
+
+    /**
+     * Hide the picker element
+     * Not available on inline picker
+     */
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.inline) {
+        return;
+      }
+      this.picker.hide();
+      this.picker.update().changeView(this.config.startView).render();
+    }
+
+    /**
+     * Destroy the Datepicker instance
+     * @return {Detepicker} - the instance destroyed
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.hide();
+      unregisterListeners(this);
+      this.picker.detach();
+      if (!this.inline) {
+        this.inputField.classList.remove('datepicker-input');
+      }
+      delete this.element.datepicker;
+      return this;
+    }
+
+    /**
+     * Get the selected date(s)
+     *
+     * The method returns a Date object of selected date by default, and returns
+     * an array of selected dates in multidate mode. If format string is passed,
+     * it returns date string(s) formatted in given format.
+     *
+     * @param  {String} [format] - Format string to stringify the date(s)
+     * @return {Date|String|Date[]|String[]} - selected date(s), or if none is
+     * selected, empty array in multidate mode and untitled in sigledate mode
+     */
+  }, {
+    key: "getDate",
+    value: function getDate() {
+      var _this = this;
+      var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+      var callback = format ? function (date) {
+        return formatDate(date, format, _this.config.locale);
+      } : function (date) {
+        return new Date(date);
+      };
+      if (this.config.multidate) {
+        return this.dates.map(callback);
+      }
+      if (this.dates.length > 0) {
+        return callback(this.dates[0]);
+      }
+    }
+
+    /**
+     * Set selected date(s)
+     *
+     * In multidate mode, you can pass multiple dates as a series of arguments
+     * or an array. (Since each date is parsed individually, the type of the
+     * dates doesn't have to be the same.)
+     * The given dates are used to toggle the select status of each date. The
+     * number of selected dates is kept from exceeding the length set to
+     * maxNumberOfDates.
+     *
+     * With clear: true option, the method can be used to clear the selection
+     * and to replace the selection instead of toggling in multidate mode.
+     * If the option is passed with no date arguments or an empty dates array,
+     * it works as "clear" (clear the selection then set nothing), and if the
+     * option is passed with new dates to select, it works as "replace" (clear
+     * the selection then set the given dates)
+     *
+     * When render: false option is used, the method omits re-rendering the
+     * picker element. In this case, you need to call refresh() method later in
+     * order for the picker element to reflect the changes. The input field is
+     * refreshed always regardless of this option.
+     *
+     * When invalid (unparsable, repeated, disabled or out-of-range) dates are
+     * passed, the method ignores them and applies only valid ones. In the case
+     * that all the given dates are invalid, which is distinguished from passing
+     * no dates, the method considers it as an error and leaves the selection
+     * untouched.
+     *
+     * @param {...(Date|Number|String)|Array} [dates] - Date strings, Date
+     * objects, time values or mix of those for new selection
+     * @param {Object} [options] - function options
+     * - clear: {boolean} - Whether to clear the existing selection
+     *     defualt: false
+     * - render: {boolean} - Whether to re-render the picker element
+     *     default: true
+     * - autohide: {boolean} - Whether to hide the picker element after re-render
+     *     Ignored when used with render: false
+     *     default: config.autohide
+     */
+  }, {
+    key: "setDate",
+    value: function setDate() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var dates = [].concat(args);
+      var opts = {};
+      var lastArg = lastItemOf(args);
+      if (_typeof(lastArg) === 'object' && !Array.isArray(lastArg) && !(lastArg instanceof Date) && lastArg) {
+        Object.assign(opts, dates.pop());
+      }
+      var inputDates = Array.isArray(dates[0]) ? dates[0] : dates;
+      _setDate(this, inputDates, opts);
+    }
+
+    /**
+     * Update the selected date(s) with input field's value
+     * Not available on inline picker
+     *
+     * The input field will be refreshed with properly formatted date string.
+     *
+     * @param  {Object} [options] - function options
+     * - autohide: {boolean} - whether to hide the picker element after refresh
+     *     default: false
+     */
+  }, {
+    key: "update",
+    value: function update() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+      if (this.inline) {
+        return;
+      }
+      var opts = {
+        clear: true,
+        autohide: !!(options && options.autohide)
+      };
+      var inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);
+      _setDate(this, inputDates, opts);
+    }
+
+    /**
+     * Refresh the picker element and the associated input field
+     * @param {String} [target] - target item when refreshing one item only
+     * 'picker' or 'input'
+     * @param {Boolean} [forceRender] - whether to re-render the picker element
+     * regardless of its state instead of optimized refresh
+     */
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+      var forceRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (target && typeof target !== 'string') {
+        forceRender = target;
+        target = undefined;
+      }
+      var mode;
+      if (target === 'picker') {
+        mode = 2;
+      } else if (target === 'input') {
+        mode = 1;
+      } else {
+        mode = 3;
+      }
+      refreshUI(this, mode, !forceRender);
+    }
+
+    /**
+     * Enter edit mode
+     * Not available on inline picker or when the picker element is hidden
+     */
+  }, {
+    key: "enterEditMode",
+    value: function enterEditMode() {
+      if (this.inline || !this.picker.active || this.editMode) {
+        return;
+      }
+      this.editMode = true;
+      this.inputField.classList.add('in-edit', 'border-brand');
+    }
+
+    /**
+     * Exit from edit mode
+     * Not available on inline picker
+     * @param  {Object} [options] - function options
+     * - update: {boolean} - whether to call update() after exiting
+     *     If false, input field is revert to the existing selection
+     *     default: false
+     */
+  }, {
+    key: "exitEditMode",
+    value: function exitEditMode() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+      if (this.inline || !this.editMode) {
+        return;
+      }
+      var opts = Object.assign({
+        update: false
+      }, options);
+      delete this.editMode;
+      this.inputField.classList.remove('in-edit', 'border-brand');
+      if (opts.update) {
+        this.update(opts);
+      }
+    }
+  }], [{
+    key: "formatDate",
+    value: function formatDate$1(date, format, lang) {
+      return formatDate(date, format, lang && locales[lang] || locales.en);
+    }
+
+    /**
+     * Parse date string
+     * @param  {String|Date|Number} dateStr - date string, Date object or time
+     * value to parse
+     * @param  {String|Object} format - format string or object that contains
+     * toValue() custom parser, whose signature is
+     * - args:
+     *   - dateStr: {String|Date|Number} - the dateStr passed to the method
+     *   - format: {Object} - the format object passed to the method
+     *   - locale: {Object} - locale for the language specified by `lang`
+     * - return:
+     *     {Date|Number} parsed date or its time value
+     * @param  {String} [lang=en] - language code for the locale to use
+     * @return {Number} time value of parsed date
+     */
+  }, {
+    key: "parseDate",
+    value: function parseDate$1(dateStr, format, lang) {
+      return parseDate(dateStr, format, lang && locales[lang] || locales.en);
+    }
+
+    /**
+     * @type {Object} - Installed locales in `[languageCode]: localeObject` format
+     * en`:_English (US)_ is pre-installed.
+     */
+  }, {
+    key: "locales",
+    get: function get() {
+      return locales;
+    }
+  }]);
+}();
+
+// filter out the config options inapproprite to pass to Datepicker
+function filterOptions(options) {
+  var newOpts = Object.assign({}, options);
+  delete newOpts.inputs;
+  delete newOpts.allowOneSidedRange;
+  delete newOpts.maxNumberOfDates; // to ensure each datepicker handles a single date
+
+  return newOpts;
+}
+function setupDatepicker(rangepicker, changeDateListener, el, options) {
+  registerListeners(rangepicker, [[el, 'changeDate', changeDateListener]]);
+  new Datepicker(el, options, rangepicker);
+}
+function onChangeDate(rangepicker, ev) {
+  // to prevent both datepickers trigger the other side's update each other
+  if (rangepicker._updating) {
+    return;
+  }
+  rangepicker._updating = true;
+  var target = ev.target;
+  if (target.datepicker === undefined) {
+    return;
+  }
+  var datepickers = rangepicker.datepickers;
+  var setDateOptions = {
+    render: false
+  };
+  var changedSide = rangepicker.inputs.indexOf(target);
+  var otherSide = changedSide === 0 ? 1 : 0;
+  var changedDate = datepickers[changedSide].dates[0];
+  var otherDate = datepickers[otherSide].dates[0];
+  if (changedDate !== undefined && otherDate !== undefined) {
+    // if the start of the range > the end, swap them
+    if (changedSide === 0 && changedDate > otherDate) {
+      datepickers[0].setDate(otherDate, setDateOptions);
+      datepickers[1].setDate(changedDate, setDateOptions);
+    } else if (changedSide === 1 && changedDate < otherDate) {
+      datepickers[0].setDate(changedDate, setDateOptions);
+      datepickers[1].setDate(otherDate, setDateOptions);
+    }
+  } else if (!rangepicker.allowOneSidedRange) {
+    // to prevent the range from becoming one-sided, copy changed side's
+    // selection (no matter if it's empty) to the other side
+    if (changedDate !== undefined || otherDate !== undefined) {
+      setDateOptions.clear = true;
+      datepickers[otherSide].setDate(datepickers[changedSide].dates, setDateOptions);
+    }
+  }
+  datepickers[0].picker.update().render();
+  datepickers[1].picker.update().render();
+  delete rangepicker._updating;
+}
+
+/**
+ * Class representing a date range picker
+ */
+var DateRangePicker = /*#__PURE__*/function () {
+  /**
+   * Create a date range picker
+   * @param  {Element} element - element to bind a date range picker
+   * @param  {Object} [options] - config options
+   */
+  function DateRangePicker(element) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, DateRangePicker);
+    var inputs = Array.isArray(options.inputs) ? options.inputs : Array.from(element.querySelectorAll('input'));
+    if (inputs.length < 2) {
+      return;
+    }
+    element.rangepicker = this;
+    this.element = element;
+    this.inputs = inputs.slice(0, 2);
+    this.allowOneSidedRange = !!options.allowOneSidedRange;
+    var changeDateListener = onChangeDate.bind(null, this);
+    var cleanOptions = filterOptions(options);
+    // in order for initial date setup to work right when pcicLvel > 0,
+    // let Datepicker constructor add the instance to the rangepicker
+    var datepickers = [];
+    Object.defineProperty(this, 'datepickers', {
+      get: function get() {
+        return datepickers;
+      }
+    });
+    setupDatepicker(this, changeDateListener, this.inputs[0], cleanOptions);
+    setupDatepicker(this, changeDateListener, this.inputs[1], cleanOptions);
+    Object.freeze(datepickers);
+    // normalize the range if inital dates are given
+    if (datepickers[0].dates.length > 0) {
+      onChangeDate(this, {
+        target: this.inputs[0]
+      });
+    } else if (datepickers[1].dates.length > 0) {
+      onChangeDate(this, {
+        target: this.inputs[1]
+      });
+    }
+  }
+
+  /**
+   * @type {Array} - selected date of the linked date pickers
+   */
+  return _createClass(DateRangePicker, [{
+    key: "dates",
+    get: function get() {
+      return this.datepickers.length === 2 ? [this.datepickers[0].dates[0], this.datepickers[1].dates[0]] : undefined;
+    }
+
+    /**
+     * Set new values to the config options
+     * @param {Object} options - config options to update
+     */
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      this.allowOneSidedRange = !!options.allowOneSidedRange;
+      var cleanOptions = filterOptions(options);
+      this.datepickers[0].setOptions(cleanOptions);
+      this.datepickers[1].setOptions(cleanOptions);
+    }
+
+    /**
+     * Destroy the DateRangePicker instance
+     * @return {DateRangePicker} - the instance destroyed
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.datepickers[0].destroy();
+      this.datepickers[1].destroy();
+      unregisterListeners(this);
+      delete this.element.rangepicker;
+    }
+
+    /**
+     * Get the start and end dates of the date range
+     *
+     * The method returns Date objects by default. If format string is passed,
+     * it returns date strings formatted in given format.
+     * The result array always contains 2 items (start date/end date) and
+     * undefined is used for unselected side. (e.g. If none is selected,
+     * the result will be [undefined, undefined]. If only the end date is set
+     * when allowOneSidedRange config option is true, [undefined, endDate] will
+     * be returned.)
+     *
+     * @param  {String} [format] - Format string to stringify the dates
+     * @return {Array} - Start and end dates
+     */
+  }, {
+    key: "getDates",
+    value: function getDates() {
+      var _this = this;
+      var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+      var callback = format ? function (date) {
+        return formatDate(date, format, _this.datepickers[0].config.locale);
+      } : function (date) {
+        return new Date(date);
+      };
+      return this.dates.map(function (date) {
+        return date === undefined ? date : callback(date);
+      });
+    }
+
+    /**
+     * Set the start and end dates of the date range
+     *
+     * The method calls datepicker.setDate() internally using each of the
+     * arguments in start→end order.
+     *
+     * When a clear: true option object is passed instead of a date, the method
+     * clears the date.
+     *
+     * If an invalid date, the same date as the current one or an option object
+     * without clear: true is passed, the method considers that argument as an
+     * "ineffective" argument because calling datepicker.setDate() with those
+     * values makes no changes to the date selection.
+     *
+     * When the allowOneSidedRange config option is false, passing {clear: true}
+     * to clear the range works only when it is done to the last effective
+     * argument (in other words, passed to rangeEnd or to rangeStart along with
+     * ineffective rangeEnd). This is because when the date range is changed,
+     * it gets normalized based on the last change at the end of the changing
+     * process.
+     *
+     * @param {Date|Number|String|Object} rangeStart - Start date of the range
+     * or {clear: true} to clear the date
+     * @param {Date|Number|String|Object} rangeEnd - End date of the range
+     * or {clear: true} to clear the date
+     */
+  }, {
+    key: "setDates",
+    value: function setDates(rangeStart, rangeEnd) {
+      var _this$datepickers = _slicedToArray(this.datepickers, 2),
+        datepicker0 = _this$datepickers[0],
+        datepicker1 = _this$datepickers[1];
+      var origDates = this.dates;
+
+      // If range normalization runs on every change, we can't set a new range
+      // that starts after the end of the current range correctly because the
+      // normalization process swaps start↔︎end right after setting the new start
+      // date. To prevent this, the normalization process needs to run once after
+      // both of the new dates are set.
+      this._updating = true;
+      datepicker0.setDate(rangeStart);
+      datepicker1.setDate(rangeEnd);
+      delete this._updating;
+      if (datepicker1.dates[0] !== origDates[1]) {
+        onChangeDate(this, {
+          target: this.inputs[1]
+        });
+      } else if (datepicker0.dates[0] !== origDates[0]) {
+        onChangeDate(this, {
+          target: this.inputs[0]
+        });
+      }
+    }
+  }]);
+}();
+
+module.exports = DateRangePicker;