All Downloads are FREE. Search and download functionalities are using the official Maven repository.

package.dist.Datepicker.esm.js Maven / Gradle / Ivy

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;
  }
}

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, ">");
  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+ 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;
}

// 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);
}

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 
    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);
}

// 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: '',
  orientation: 'auto',
  pickLevel: 0,
  prevArrow: '',
  showDaysOfWeek: true,
  showOnClick: true,
  showOnFocus: true,
  startView: 0,
  title: '',
  todayBtn: false,
  todayBtnMode: 0,
  todayHighlight: false,
  updateOnBlur: true,
  weekStart: 0
};

var range = document.createRange();
function parseHTML(html) {
  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("
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
"); var daysTemplate = optimizeTemplateHTML("
\n
".concat(createTagRepeat('span', 7, { "class": 'dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm' }), "
\n
").concat(createTagRepeat('span', 42, { "class": 'block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400' }), "
\n
")); var calendarWeeksTemplate = optimizeTemplateHTML("
\n
\n
".concat(createTagRepeat('span', 6, { "class": 'week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm' }), "
\n
")); // 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("
").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-gray-500 dark:text-gray-400 cursor-not-allowed' : 'dow text-center h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400'; }); } } // 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-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ".concat(_this2.cellClass); el.dataset.date = current; el.textContent = date.getDate(); if (current < _this2.first) { classList.add('prev', 'text-gray-500', 'dark:text-white'); } else if (current > _this2.last) { classList.add('next', 'text-gray-500', 'dark:text-white'); } 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-gray-400', 'dark:text-gray-500'); classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer'); } if (_this2.daysOfWeekDisabled.includes(day)) { classList.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500'); classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', '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-gray-200', 'dark:bg-gray-600'); classList.remove('rounded-lg', 'rounded-l-lg', 'rounded-r-lg'); } if (current === rangeStart) { classList.add('range-start', 'bg-gray-100', 'dark:bg-gray-600', 'rounded-l-lg'); classList.remove('rounded-lg', 'rounded-r-lg'); } if (current === rangeEnd) { classList.add('range-end', 'bg-gray-100', 'dark:bg-gray-600', 'rounded-r-lg'); classList.remove('rounded-lg', 'rounded-l-lg'); } } if (_this2.selected.includes(current)) { classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white'); classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200'); } 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-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white', 'focused'); el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white'); }); Array.from(this.grid.children).forEach(function (el) { var current = Number(el.dataset.date); var classList = el.classList; classList.remove('bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg', 'rounded-r-lg'); if (current > rangeStart && current < rangeEnd) { classList.add('range', 'bg-gray-200', 'dark:bg-gray-600'); classList.remove('rounded-lg'); } if (current === rangeStart) { classList.add('range-start', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg'); classList.remove('rounded-lg'); } if (current === rangeEnd) { classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg'); classList.remove('rounded-lg'); } if (_this3.selected.includes(current)) { classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white'); classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600'); } 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-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold 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-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white'); classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600'); } 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-blue-700', '!bg-primary-700', 'dark:bg-blue-600', 'dark:!bg-primary-700', 'dark:text-white', 'text-white', 'focused'); el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600'); }); 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-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white'); classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600'); } 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-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold 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-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white'); classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600'); } 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-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark!bg-primary-600', '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-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-600', 'dark:text-white'); classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600'); } 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-blue-700', '!border-primary-700'); } /** * 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-blue-700', '!border-primary-700'); 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; } }]); }(); export { Datepicker as default };




© 2015 - 2024 Weber Informatics LLC | Privacy Policy