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

package/extras/twoDigitToFullYear/test/twoDigitToFullYear.js

@@ -0,0 +1,58 @@
+import {twoDigitToFullYear} from '../twoDigitToFullYear.js';
+
+const expect = require('unexpected');
+const sinon = require('sinon');
+
+describe('twoDigitToFullYear()', function () {
+  it('converts 2-digit year to full year using 50 for the future years range by default', function () {
+    let clock = sinon.useFakeTimers({now: new Date().setFullYear(2020)});
+
+    expect(twoDigitToFullYear(0), 'to be', 2000);
+    expect(twoDigitToFullYear(20), 'to be', 2020);
+    expect(twoDigitToFullYear(70), 'to be', 2070);
+    expect(twoDigitToFullYear(71), 'to be', 1971);
+
+    clock.restore();
+    clock = sinon.useFakeTimers({now: new Date().setFullYear(2080)});
+
+    expect(twoDigitToFullYear(0), 'to be', 2100);
+    expect(twoDigitToFullYear(30), 'to be', 2130);
+    expect(twoDigitToFullYear(31), 'to be', 2031);
+    expect(twoDigitToFullYear(80), 'to be', 2080);
+
+    clock.restore();
+  });
+
+  it('uses sepecified future year range if it is given', function () {
+    let clock = sinon.useFakeTimers({now: new Date().setFullYear(2020)});
+
+    expect(twoDigitToFullYear(40, 20), 'to be', 2040);
+    expect(twoDigitToFullYear(40, 19), 'to be', 1940);
+    expect(twoDigitToFullYear(95, 75), 'to be', 2095);
+    expect(twoDigitToFullYear(95, 74), 'to be', 1995);
+
+    clock.restore();
+    clock = sinon.useFakeTimers({now: new Date().setFullYear(2080)});
+
+    expect(twoDigitToFullYear(0, 20), 'to be', 2100);
+    expect(twoDigitToFullYear(0, 19), 'to be', 2000);
+    expect(twoDigitToFullYear(55, 75), 'to be', 2155);
+    expect(twoDigitToFullYear(55, 74), 'to be', 2055);
+
+    clock.restore();
+  });
+
+  it('uses the century of baseDate for conversion if it is given', function () {
+    const year2020 = new Date(2020, 0, 1);
+    expect(twoDigitToFullYear(40, 20, year2020), 'to be', 2040);
+    expect(twoDigitToFullYear(40, 19, year2020), 'to be', 1940);
+    expect(twoDigitToFullYear(95, 75, year2020), 'to be', 2095);
+    expect(twoDigitToFullYear(95, 74, year2020), 'to be', 1995);
+
+    const year2280 = new Date(2280, 0, 1);
+    expect(twoDigitToFullYear(0, 20, year2280), 'to be', 2300);
+    expect(twoDigitToFullYear(0, 19, year2280), 'to be', 2200);
+    expect(twoDigitToFullYear(55, 75, year2280), 'to be', 2355);
+    expect(twoDigitToFullYear(55, 74, year2280), 'to be', 2255);
+  });
+});

package/extras/twoDigitToFullYear/twoDigitToFullYear.js

@@ -0,0 +1,26 @@
+/**
+ * Convert 2-digit year to 4-digit year
+ * By default, 2-digit year will be converted to a year in the 100-year
+ * period ending 50 years after the current year. The target 100-year period
+ * can be changed by specifying base date and the length of the future side.
+ * @param  {Number} year - 2-digit year
+ * @param  {Number} [futureSideSpan] - number of yeas in the future side of
+ * the target 100-year period. Default: 50
+ * @param  {Date} [baseDate] - base date to caliculate the target 100-year
+ * period. if omitted, the current date is used.
+ * @return {Number} 4-digit year
+ */
+export function twoDigitToFullYear(year, futureSideSpan = 50, baseDate = undefined) {
+  if (isNaN(year) || year > 99 || year < 0) {
+    return year;
+  }
+
+  const date = baseDate instanceof Date && !isNaN(baseDate) ? baseDate : new Date();
+  const currentYear = date.getFullYear();
+  const endOfCurrent = currentYear + futureSideSpan;
+  let century = Math.floor(endOfCurrent / 100) * 100;
+  if (year > endOfCurrent % 100) {
+    century -= 100;
+  }
+  return year + century;
+}

package/js/DateRangePicker.js

@@ -0,0 +1,210 @@
+import {registerListeners, unregisterListeners} from './lib/event.js';
+import {formatDate} from './lib/date-format.js';
+import Datepicker from './Datepicker.js';
+
+// filter out the config options inapproprite to pass to Datepicker
+function filterOptions(options) {
+  const newOpts = Object.assign({}, options);
+
+  delete newOpts.inputs;
+  delete newOpts.allowOneSidedRange;
+  delete newOpts.maxNumberOfDates; // to ensure each datepicker handles a single date
+
+  return newOpts;
+}
+
+function setupDatepicker(rangepicker, changeDateListener, el, options) {
+  registerListeners(rangepicker, [
+    [el, 'changeDate', changeDateListener],
+  ]);
+  new Datepicker(el, options, rangepicker);
+}
+
+function onChangeDate(rangepicker, ev) {
+  // to prevent both datepickers trigger the other side's update each other
+  if (rangepicker._updating) {
+    return;
+  }
+  rangepicker._updating = true;
+
+  const target = ev.target;
+  if (target.datepicker === undefined) {
+    return;
+  }
+
+  const datepickers = rangepicker.datepickers;
+  const setDateOptions = {render: false};
+  const changedSide = rangepicker.inputs.indexOf(target);
+  const otherSide = changedSide === 0 ? 1 : 0;
+  const changedDate = datepickers[changedSide].dates[0];
+  const otherDate = datepickers[otherSide].dates[0];
+
+  if (changedDate !== undefined && otherDate !== undefined) {
+    // if the start of the range > the end, swap them
+    if (changedSide === 0 && changedDate > otherDate) {
+      datepickers[0].setDate(otherDate, setDateOptions);
+      datepickers[1].setDate(changedDate, setDateOptions);
+    } else if (changedSide === 1 && changedDate < otherDate) {
+      datepickers[0].setDate(changedDate, setDateOptions);
+      datepickers[1].setDate(otherDate, setDateOptions);
+    }
+  } else if (!rangepicker.allowOneSidedRange) {
+    // to prevent the range from becoming one-sided, copy changed side's
+    // selection (no matter if it's empty) to the other side
+    if (changedDate !== undefined || otherDate !== undefined) {
+      setDateOptions.clear = true;
+      datepickers[otherSide].setDate(datepickers[changedSide].dates, setDateOptions);
+    }
+  }
+  datepickers[0].picker.update().render();
+  datepickers[1].picker.update().render();
+  delete rangepicker._updating;
+}
+
+/**
+ * Class representing a date range picker
+ */
+export default class DateRangePicker  {
+  /**
+   * Create a date range picker
+   * @param  {Element} element - element to bind a date range picker
+   * @param  {Object} [options] - config options
+   */
+  constructor(element, options = {}) {
+    const inputs = Array.isArray(options.inputs)
+      ? options.inputs
+      : Array.from(element.querySelectorAll('input'));
+    if (inputs.length < 2) {
+      return;
+    }
+
+    element.rangepicker = this;
+    this.element = element;
+    this.inputs = inputs.slice(0, 2);
+    this.allowOneSidedRange = !!options.allowOneSidedRange;
+
+    const changeDateListener = onChangeDate.bind(null, this);
+    const cleanOptions = filterOptions(options);
+    // in order for initial date setup to work right when pcicLvel > 0,
+    // let Datepicker constructor add the instance to the rangepicker
+    const datepickers = [];
+    Object.defineProperty(this, 'datepickers', {
+      get() {
+        return datepickers;
+      },
+    });
+    setupDatepicker(this, changeDateListener, this.inputs[0], cleanOptions);
+    setupDatepicker(this, changeDateListener, this.inputs[1], cleanOptions);
+    Object.freeze(datepickers);
+    // normalize the range if inital dates are given
+    if (datepickers[0].dates.length > 0) {
+      onChangeDate(this, {target: this.inputs[0]});
+    } else if (datepickers[1].dates.length > 0) {
+      onChangeDate(this, {target: this.inputs[1]});
+    }
+  }
+
+  /**
+   * @type {Array} - selected date of the linked date pickers
+   */
+  get dates() {
+    return this.datepickers.length === 2
+      ? [
+          this.datepickers[0].dates[0],
+          this.datepickers[1].dates[0],
+        ]
+      : undefined;
+  }
+
+  /**
+   * Set new values to the config options
+   * @param {Object} options - config options to update
+   */
+  setOptions(options) {
+    this.allowOneSidedRange = !!options.allowOneSidedRange;
+
+    const cleanOptions = filterOptions(options);
+    this.datepickers[0].setOptions(cleanOptions);
+    this.datepickers[1].setOptions(cleanOptions);
+  }
+
+  /**
+   * Destroy the DateRangePicker instance
+   * @return {DateRangePicker} - the instance destroyed
+   */
+  destroy() {
+    this.datepickers[0].destroy();
+    this.datepickers[1].destroy();
+    unregisterListeners(this);
+    delete this.element.rangepicker;
+  }
+
+  /**
+   * Get the start and end dates of the date range
+   *
+   * The method returns Date objects by default. If format string is passed,
+   * it returns date strings formatted in given format.
+   * The result array always contains 2 items (start date/end date) and
+   * undefined is used for unselected side. (e.g. If none is selected,
+   * the result will be [undefined, undefined]. If only the end date is set
+   * when allowOneSidedRange config option is true, [undefined, endDate] will
+   * be returned.)
+   *
+   * @param  {String} [format] - Format string to stringify the dates
+   * @return {Array} - Start and end dates
+   */
+  getDates(format = undefined) {
+    const callback = format
+      ? date => formatDate(date, format, this.datepickers[0].config.locale)
+      : date => new Date(date);
+
+    return this.dates.map(date => date === undefined ? date : callback(date));
+  }
+
+  /**
+   * Set the start and end dates of the date range
+   *
+   * The method calls datepicker.setDate() internally using each of the
+   * arguments in start→end order.
+   *
+   * When a clear: true option object is passed instead of a date, the method
+   * clears the date.
+   *
+   * If an invalid date, the same date as the current one or an option object
+   * without clear: true is passed, the method considers that argument as an
+   * "ineffective" argument because calling datepicker.setDate() with those
+   * values makes no changes to the date selection.
+   *
+   * When the allowOneSidedRange config option is false, passing {clear: true}
+   * to clear the range works only when it is done to the last effective
+   * argument (in other words, passed to rangeEnd or to rangeStart along with
+   * ineffective rangeEnd). This is because when the date range is changed,
+   * it gets normalized based on the last change at the end of the changing
+   * process.
+   *
+   * @param {Date|Number|String|Object} rangeStart - Start date of the range
+   * or {clear: true} to clear the date
+   * @param {Date|Number|String|Object} rangeEnd - End date of the range
+   * or {clear: true} to clear the date
+   */
+  setDates(rangeStart, rangeEnd) {
+    const [datepicker0, datepicker1] = this.datepickers;
+    const origDates = this.dates;
+
+    // If range normalization runs on every change, we can't set a new range
+    // that starts after the end of the current range correctly because the
+    // normalization process swaps start↔︎end right after setting the new start
+    // date. To prevent this, the normalization process needs to run once after
+    // both of the new dates are set.
+    this._updating = true;
+    datepicker0.setDate(rangeStart);
+    datepicker1.setDate(rangeEnd);
+    delete this._updating;
+
+    if (datepicker1.dates[0] !== origDates[1]) {
+      onChangeDate(this, {target: this.inputs[1]});
+    } else if (datepicker0.dates[0] !== origDates[0]) {
+      onChangeDate(this, {target: this.inputs[0]});
+    }
+  }
+}