Adding Date Range Picker Component (#1614)

* feat: Adding IgcDateRangePickerComponent

Closes #1596
---------

Co-authored-by: Ivan Kitanov <[email protected]>
Co-authored-by: ddaribo <[email protected]>
Co-authored-by: Bozhidara Pachilova <[email protected]>
Co-authored-by: Radoslav Karaivanov <[email protected]>
Co-authored-by: sivanova <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Maya <[email protected]>

Author: 6 people

package-lock.json

@@ -6,6 +6,7 @@ import {
   last,
   modulo,
 } from '../common/util.js';
+import type { DateRangeValue } from '../date-range-picker/date-range-picker.js';
 import {
   CalendarDay,
   type CalendarRangeParams,
@@ -71,6 +72,33 @@ export function convertToDate(value?: Date | string | null): Date | null {
   return isString(value) ? parseISODate(value) : isValidDate(value);
 }
 
+/**
+ * Converts the given value to a DateRangeValue object.
+ *
+ * If the value is already a valid DateRangeValue object, it is returned directly.
+ * If the value is a string, it is parsed to object and returned if it fields are valid dates.
+ * If the value is null or undefined, null is returned.
+ * If the parsing fails, null is returned.
+ */
+export function convertToDateRange(
+  value?: DateRangeValue | string | null
+): DateRangeValue | null {
+  if (!value) {
+    return null;
+  }
+
+  if (isString(value)) {
+    const obj = JSON.parse(value);
+    const start = convertToDate(obj.start);
+    const end = convertToDate(obj.end);
+    return {
+      start: start ? CalendarDay.from(start).native : null,
+      end: end ? CalendarDay.from(end).native : null,
+    };
+  }
+  return value;
+}
+
 /**
  * Converts a Date object to an ISO 8601 string.
  *
@@ -136,26 +164,41 @@ export function isPreviousMonth(target: DayParameter, origin: DayParameter) {
 }
 
 /**
- * Returns a generator yielding day values between `start` and `end` (non-inclusive)
+ * Returns a generator yielding day values between `start` and `end` (non-inclusive by default)
  * by a given `unit` as a step.
+ * To include the end date set the `inclusive` option to true.
  *
  * @remarks
  * By default, `unit` is set to 'day'.
  */
-export function* calendarRange(options: CalendarRangeParams) {
-  let low = toCalendarDay(options.start);
-  const unit = options.unit ?? 'day';
-  const high =
-    typeof options.end === 'number'
-      ? low.add(unit, options.end)
-      : toCalendarDay(options.end);
-
-  const reverse = high.lessThan(low);
-  const step = reverse ? -1 : 1;
-
-  while (!reverse ? low.lessThan(high) : low.greaterThan(high)) {
-    yield low;
-    low = low.add(unit, step);
+export function* calendarRange(
+  options: CalendarRangeParams
+): Generator<CalendarDay, void, unknown> {
+  const { start, end, unit = 'day', inclusive = false } = options;
+
+  let currentDate = toCalendarDay(start);
+  const endDate =
+    typeof end === 'number'
+      ? toCalendarDay(start).add(unit, end)
+      : toCalendarDay(end);
+
+  const isReversed = endDate.lessThan(currentDate);
+  const step = isReversed ? -1 : 1;
+
+  const shouldContinue = () => {
+    if (inclusive) {
+      return isReversed
+        ? currentDate.greaterThanOrEqual(endDate)
+        : currentDate.lessThanOrEqual(endDate);
+    }
+    return isReversed
+      ? currentDate.greaterThan(endDate)
+      : currentDate.lessThan(endDate);
+  };
+
+  while (shouldContinue()) {
+    yield currentDate;
+    currentDate = currentDate.add(unit, step);
   }
 }
 

src/components/calendar/helpers.ts

@@ -4,6 +4,7 @@ export type CalendarRangeParams = {
   start: DayParameter;
   end: DayParameter | number;
   unit?: DayInterval;
+  inclusive?: boolean;
 };
 
 type DayInterval = 'year' | 'quarter' | 'month' | 'week' | 'day';
@@ -43,6 +44,26 @@ export class CalendarDay {
     });
   }
 
+  /**
+   * Compares the date portion of two date objects.
+   *
+   * @returns
+   * ```
+   *  first === second // 0
+   *  first > second // 1
+   *  first < second // -1
+   * ```
+   */
+  public static compare(first: DayParameter, second: DayParameter) {
+    const a = toCalendarDay(first);
+    const b = toCalendarDay(second);
+
+    if (a.equalTo(b)) {
+      return 0;
+    }
+    return a.greaterThan(b) ? 1 : -1;
+  }
+
   constructor(args: CalendarDayParams) {
     this._date = new Date(args.year, args.month, args.date ?? 1);
   }
@@ -142,10 +163,18 @@ export class CalendarDay {
     return this.timestamp > toCalendarDay(value).timestamp;
   }
 
+  public greaterThanOrEqual(value: DayParameter) {
+    return this.timestamp >= toCalendarDay(value).timestamp;
+  }
+
   public lessThan(value: DayParameter) {
     return this.timestamp < toCalendarDay(value).timestamp;
   }
 
+  public lessThanOrEqual(value: DayParameter) {
+    return this.timestamp <= toCalendarDay(value).timestamp;
+  }
+
   public toString() {
     return `${this.native}`;
   }

src/components/calendar/model.ts

@@ -20,6 +20,7 @@ import IgcSwitchComponent from '../../checkbox/switch.js';
 import IgcChipComponent from '../../chip/chip.js';
 import IgcComboComponent from '../../combo/combo.js';
 import IgcDatePickerComponent from '../../date-picker/date-picker.js';
+import IgcDateRangePickerComponent from '../../date-range-picker/date-range-picker.js';
 import IgcDateTimeInputComponent from '../../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../../dialog/dialog.js';
 import IgcDividerComponent from '../../divider/divider.js';
@@ -90,6 +91,7 @@ const allComponents: IgniteComponent[] = [
   IgcChipComponent,
   IgcComboComponent,
   IgcDatePickerComponent,
+  IgcDateRangePickerComponent,
   IgcDropdownComponent,
   IgcDropdownGroupComponent,
   IgcDropdownHeaderComponent,

src/components/common/definitions/defineAllComponents.ts

@@ -0,0 +1,28 @@
+import {
+  IgcCalendarResourceStringEN,
+  type IgcCalendarResourceStrings,
+} from './calendar.resources.js';
+
+/* blazorSuppress */
+export interface IgcDateRangePickerResourceStrings
+  extends IgcCalendarResourceStrings {
+  separator: string;
+  done: string;
+  cancel: string;
+  last7Days: string;
+  last30Days: string;
+  currentMonth: string;
+  yearToDate: string;
+}
+
+export const IgcDateRangePickerResourceStringsEN: IgcDateRangePickerResourceStrings =
+  {
+    separator: 'to',
+    done: 'Done',
+    cancel: 'Cancel',
+    last7Days: 'Last 7 days',
+    last30Days: 'Last 30 days',
+    currentMonth: 'Current month',
+    yearToDate: 'Year to date',
+    ...IgcCalendarResourceStringEN,
+  };

src/components/common/i18n/date-range-picker.resources.ts

@@ -1,4 +1,9 @@
-import { convertToDate, getDateFormValue } from '../../../calendar/helpers.js';
+import {
+  convertToDate,
+  convertToDateRange,
+  getDateFormValue,
+} from '../../../calendar/helpers.js';
+import type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';
 import { asNumber } from '../../util.js';
 import type { FormValueType, IgcFormControl } from './types.js';
 
@@ -78,6 +83,48 @@ export const defaultFileListTransformer: Partial<
   },
 };
 
+/**
+ * Converts a DateDateRangeValue object to FormData with
+ * start and end Date values as ISO 8601 strings.
+ * The keys are prefixed with the host name
+ * and suffixed with 'start' or 'end' accordingly.
+ * In case the host does not have a name, it does not participate in form submission.
+ *
+ * If the date values are null or undefined, the form data values
+ * are empty strings ''.
+ */
+export function getDateRangeFormValue(
+  value: DateRangeValue | null,
+  host: IgcFormControl
+): FormValueType {
+  if (!host.name) {
+    return null;
+  }
+
+  const start = value?.start?.toISOString();
+  const end = value?.end?.toISOString();
+
+  const fd = new FormData();
+  const prefix = `${host.name}-`;
+
+  if (start) {
+    fd.append(`${prefix}start`, start);
+  }
+  if (end) {
+    fd.append(`${prefix}end`, end);
+  }
+
+  return fd;
+}
+
+export const defaultDateRangeTransformers: Partial<
+  FormValueTransformers<DateRangeValue | null>
+> = {
+  setValue: convertToDateRange,
+  setDefaultValue: convertToDateRange,
+  setFormValue: getDateRangeFormValue,
+};
+
 /* blazorSuppress */
 export class FormValue<T> {
   private static readonly setFormValueKey = '_setFormValue' as const;

src/components/common/mixins/forms/form-value.ts

@@ -7,6 +7,7 @@ import {
 } from '@open-wc/testing';
 import type { TemplateResult } from 'lit';
 
+import { type CalendarDay, toCalendarDay } from '../calendar/model.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { parseKeys } from './controllers/key-bindings.js';
 import type { IgniteComponent } from './definitions/register.js';
@@ -146,6 +147,18 @@ class FormAssociatedTestBed<T extends IgcFormControl> {
     expect(this.submit().getAll(this.element.name), msg).to.eql(value);
   }
 
+  /**
+   * Whether the form is submitted and contains the given 'key'-'value' pair
+   * in its form data.
+   */
+  public assertSubmitHasKeyValue = (
+    key: string,
+    value: unknown,
+    msg?: string
+  ) => {
+    expect(this.submit().get(key), msg).to.eql(value);
+  };
+
   /**
    * Whether the form fails to submit.
    * The component will be in invalid state and the form data will be empty.
@@ -522,3 +535,10 @@ export function compareStyles(
     ([key, value]) => computed.getPropertyValue(toKebabCase(key)) === value
   );
 }
+
+/**
+ * Compares two date values
+ */
+export function checkDatesEqual(a: CalendarDay | Date, b: CalendarDay | Date) {
+  expect(toCalendarDay(a).equalTo(toCalendarDay(b))).to.be.true;
+}

src/components/common/utils.spec.ts

@@ -1,4 +1,4 @@
-import { DateTimeUtil } from '../date-time-input/date-util.js';
+import { CalendarDay } from '../calendar/model.js';
 import validatorMessages from './localization/validation-en.js';
 import {
   asNumber,
@@ -135,9 +135,7 @@ export const minDateValidator: Validator<{
   key: 'rangeUnderflow',
   message: ({ min }) => formatString(validatorMessages.min, min),
   isValid: ({ value, min }) =>
-    value && min
-      ? !DateTimeUtil.lessThanMinValue(value, min, false, true)
-      : true,
+    value && min ? CalendarDay.compare(value, min) >= 0 : true,
 };
 
 export const maxDateValidator: Validator<{
@@ -147,7 +145,5 @@ export const maxDateValidator: Validator<{
   key: 'rangeOverflow',
   message: ({ max }) => formatString(validatorMessages.max, max),
   isValid: ({ value, max }) =>
-    value && max
-      ? !DateTimeUtil.greaterThanMaxValue(value, max, false, true)
-      : true,
+    value && max ? CalendarDay.compare(value, max) <= 0 : true,
 };

src/components/common/validators.ts

@@ -41,7 +41,7 @@ import {
   isEmpty,
 } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
-import type { DatePart } from '../date-time-input/date-util.js';
+import { type DatePart, DateTimeUtil } from '../date-time-input/date-util.js';
 import IgcDialogComponent from '../dialog/dialog.js';
 import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -67,8 +67,6 @@ export interface IgcDatePickerComponentEventMap {
   igcInput: CustomEvent<Date>;
 }
 
-const formats = new Set(['short', 'medium', 'long', 'full']);
-
 /* blazorIndirectRender */
 /* blazorSupportsVisualChildren */
 /**
@@ -658,9 +656,8 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   //#region Render methods
 
   private _renderClearIcon() {
-    return !this.value
-      ? nothing
-      : html`
+    return this.value
+      ? html`
           <span
             slot="suffix"
             part="clear-icon"
@@ -674,7 +671,8 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
               ></igc-icon>
             </slot>
           </span>
-        `;
+        `
+      : nothing;
   }
 
   private _renderCalendarIcon() {
@@ -801,9 +799,9 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   }
 
   protected _renderInput(id: string) {
-    const format = formats.has(this._displayFormat!)
-      ? `${this._displayFormat}Date`
-      : this._displayFormat;
+    const format = DateTimeUtil.predefinedToDateDisplayFormat(
+      this._displayFormat!
+    );
 
     // Dialog mode is always readonly, rest depends on configuration
     const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
@@ -848,10 +846,9 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     const id = this.id || this._inputId;
 
     return html`
-      ${!this._isMaterialTheme ? this._renderLabel(id) : nothing}
-      ${this._renderInput(id)}${this._renderPicker(
-        id
-      )}${this._renderHelperText()}
+      ${this._isMaterialTheme ? nothing : this._renderLabel(id)}
+      ${this._renderInput(id)} ${this._renderPicker(id)}
+      ${this._renderHelperText()}
     `;
   }