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

package/js/lib/date-format.js

@@ -0,0 +1,185 @@
+import {stripTime, today} from './date.js';
+import {lastItemOf} from './utils.js';
+
+// pattern for format parts
+export const reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
+// pattern for non date parts
+export const reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
+// cache for persed formats
+let knownFormats = {};
+// parse funtions for date parts
+const parseFns = {
+  y(date, year) {
+    return new Date(date).setFullYear(parseInt(year, 10));
+  },
+  m(date, month, locale) {
+    const newDate = new Date(date);
+    let monthIndex = parseInt(month, 10) - 1;
+
+    if (isNaN(monthIndex)) {
+      if (!month) {
+        return NaN;
+      }
+
+      const monthName = month.toLowerCase();
+      const compareNames = name => 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(date, day) {
+    return new Date(date).setDate(parseInt(day, 10));
+  },
+};
+// format functions for date parts
+const formatFns = {
+  d(date) {
+    return date.getDate();
+  },
+  dd(date) {
+    return padZero(date.getDate(), 2);
+  },
+  D(date, locale) {
+    return locale.daysShort[date.getDay()];
+  },
+  DD(date, locale) {
+    return locale.days[date.getDay()];
+  },
+  m(date) {
+    return date.getMonth() + 1;
+  },
+  mm(date) {
+    return padZero(date.getMonth() + 1, 2);
+  },
+  M(date, locale) {
+    return locale.monthsShort[date.getMonth()];
+  },
+  MM(date, locale) {
+    return locale.months[date.getMonth()];
+  },
+  y(date) {
+    return date.getFullYear();
+  },
+  yy(date) {
+    return padZero(date.getFullYear(), 2).slice(-2);
+  },
+  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
+  const separators = format.split(reFormatTokens);
+  const 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
+  const partFormatters = parts.map(token => formatFns[token]);
+
+  // collect parse function keys used in the format
+  // iterate over parseFns' keys in order to keep the order of the keys.
+  const partParserKeys = Object.keys(parseFns).reduce((keys, key) => {
+    const token = parts.find(part => part[0] !== 'D' && part[0].toLowerCase() === key);
+    if (token) {
+      keys.push(key);
+    }
+    return keys;
+  }, []);
+
+  return knownFormats[format] = {
+    parser(dateStr, locale) {
+      const dateParts = dateStr.split(reNonDateParts).reduce((dtParts, part, index) => {
+        if (part.length > 0 && parts[index]) {
+          const 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((origDate, key) => {
+        const newDate = parseFns[key](origDate, dateParts[key], locale);
+        // ingnore the part failed to parse
+        return isNaN(newDate) ? origDate : newDate;
+      }, today());
+    },
+    formatter(date, locale) {
+      let dateStr = partFormatters.reduce((str, fn, index) => {
+        return str += `${separators[index]}${fn(date, locale)}`;
+      }, '');
+      // separators' length is always parts' length + 1,
+      return dateStr += lastItemOf(separators);
+    },
+  };
+}
+
+export function parseDate(dateStr, format, locale) {
+  if (dateStr instanceof Date || typeof dateStr === 'number') {
+    const date = stripTime(dateStr);
+    return isNaN(date) ? undefined : date;
+  }
+  if (!dateStr) {
+    return undefined;
+  }
+  if (dateStr === 'today') {
+    return today();
+  }
+
+  if (format && format.toValue) {
+    const date = format.toValue(dateStr, format, locale);
+    return isNaN(date) ? undefined : stripTime(date);
+  }
+
+  return parseFormatString(format).parser(dateStr, locale);
+}
+
+export function formatDate(date, format, locale) {
+  if (isNaN(date) || (!date && date !== 0)) {
+    return '';
+  }
+
+  const dateObj = typeof date === 'number' ? new Date(date) : date;
+
+  if (format.toDisplay) {
+    return format.toDisplay(dateObj, format, locale);
+  }
+
+  return parseFormatString(format).formatter(dateObj, locale);
+}

package/js/lib/date.js

@@ -0,0 +1,82 @@
+export function stripTime(timeValue) {
+  return new Date(timeValue).setHours(0, 0, 0, 0);
+}
+
+export 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
+export function dateValue(...args) {
+  switch (args.length) {
+    case 0:
+      return today();
+    case 1:
+      return stripTime(args[0]);
+  }
+
+  // use setFullYear() to keep 2-digit year from being mapped to 1900-1999
+  const newDate = new Date(0);
+  newDate.setFullYear(...args);
+  return newDate.setHours(0, 0, 0, 0);
+}
+
+export function addDays(date, amount) {
+  const newDate = new Date(date);
+  return newDate.setDate(newDate.getDate() + amount);
+}
+
+export function addWeeks(date, amount) {
+  return addDays(date, amount * 7);
+}
+
+export 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)
+  const newDate = new Date(date);
+  const monthsToSet = newDate.getMonth() + amount;
+  let expectedMonth = monthsToSet % 12;
+  if (expectedMonth < 0) {
+    expectedMonth += 12;
+  }
+
+  const time = newDate.setMonth(monthsToSet);
+  return newDate.getMonth() !== expectedMonth ? newDate.setDate(0) : time;
+}
+
+export 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.
+  const newDate = new Date(date);
+  const expectedMonth = newDate.getMonth();
+  const 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
+export function dayOfTheWeekOf(baseDate, dayOfWeek, weekStart = 0) {
+  const baseDay = new Date(baseDate).getDay();
+  return addDays(baseDate, dayDiff(dayOfWeek, weekStart) - dayDiff(baseDay, weekStart));
+}
+
+// Get the ISO week of a date
+export function getWeek(date) {
+  // start of ISO week is Monday
+  const thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
+  // 1st week == the week where the 4th of January is in
+  const 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
+export function startOfYearPeriod(date, years) {
+  /* @see https://en.wikipedia.org/wiki/Year_zero#ISO_8601 */
+  const year = new Date(date).getFullYear();
+  return Math.floor(year / years) * years;
+}

package/js/lib/dom.js

@@ -0,0 +1,55 @@
+let range = null;
+
+export function parseHTML(html) {
+  if (range == null) { range = document.createRange() }
+  return range.createContextualFragment(html);
+}
+
+// equivalent to jQuery's :visble
+export function isVisible(el) {
+  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+}
+
+export 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';
+}
+
+export 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 = '';
+  }
+}
+
+export function emptyChildNodes(el) {
+  if (el.firstChild) {
+    el.removeChild(el.firstChild);
+    emptyChildNodes(el);
+  }
+}
+
+export 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((node) => {
+      el.appendChild(node);
+    });
+  }
+}

package/js/lib/event.js

@@ -0,0 +1,68 @@
+const listenerRegistry = new WeakMap();
+const {addEventListener, removeEventListener} = EventTarget.prototype;
+
+// 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
+export function registerListeners(keyObj, listeners) {
+  let registered = listenerRegistry.get(keyObj);
+  if (!registered) {
+    registered = [];
+    listenerRegistry.set(keyObj, registered);
+  }
+  listeners.forEach((listener) => {
+    addEventListener.call(...listener);
+    registered.push(listener);
+  });
+}
+
+export function unregisterListeners(keyObj) {
+  let listeners = listenerRegistry.get(keyObj);
+  if (!listeners) {
+    return;
+  }
+  listeners.forEach((listener) => {
+    removeEventListener.call(...listener);
+  });
+  listenerRegistry.delete(keyObj);
+}
+
+// Event.composedPath() polyfill for Edge
+// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec
+if (!Event.prototype.composedPath) {
+  const getComposedPath = (node, path = []) => {
+    path.push(node);
+
+    let 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, index = 0) {
+  const 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
+export function findElementInEventPath(ev, selector) {
+  const criteria = typeof selector === 'function' ? selector : el => el.matches(selector);
+  return findFromPath(ev.composedPath(), criteria, ev.currentTarget);
+}

package/js/lib/utils.js

@@ -0,0 +1,61 @@
+export function hasProperty(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+export function lastItemOf(arr) {
+  return arr[arr.length - 1];
+}
+
+// push only the items not included in the array
+export function pushUnique(arr, ...items) {
+  items.forEach((item) => {
+    if (arr.includes(item)) {
+      return;
+    }
+    arr.push(item);
+  });
+  return arr;
+}
+
+export function stringToArray(str, separator) {
+  // convert empty string to an empty array
+  return str ? str.split(separator) : [];
+}
+
+export function isInRange(testVal, min, max) {
+  const minOK = min === undefined || testVal >= min;
+  const maxOK = max === undefined || testVal <= max;
+  return minOK && maxOK;
+}
+
+export function limitToRange(val, min, max) {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+
+export function createTagRepeat(tagName, repeat, attributes = {}, index = 0, html = '') {
+  const openTagSrc = Object.keys(attributes).reduce((src, attr) => {
+    let val = attributes[attr];
+    if (typeof val === 'function') {
+      val = val(index);
+    }
+    return `${src} ${attr}="${val}"`;
+  }, tagName);
+  html += `<${openTagSrc}></${tagName}>`;
+
+  const 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
+export function optimizeTemplateHTML(html) {
+  return html.replace(/>\s+/g, '>').replace(/\s+</, '<');
+}

package/js/main.js

@@ -0,0 +1,4 @@
+import Datepicker from './Datepicker.js';
+import DateRangePicker from './DateRangePicker.js';
+
+export {Datepicker, DateRangePicker};

package/js/options/defaultOptions.js

@@ -0,0 +1,38 @@
+// config options updatable by setOptions() and their default values
+const 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,
+};
+
+export default defaultOptions;