refactor: General date (range) picker code refactor

Author: rkaraivanov

src/components/calendar/model.ts

@@ -44,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);
   }

src/components/common/validators.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/date-picker/date-picker.ts

@@ -654,9 +654,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"
@@ -670,7 +669,8 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
               ></igc-icon>
             </slot>
           </span>
-        `;
+        `
+      : nothing;
   }
 
   private _renderCalendarIcon() {
@@ -844,10 +844,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()}
     `;
   }