refactor updating activeStartDate and activeEndDate

packages/calcite-components/src/components.d.ts

@@ -1392,6 +1392,7 @@ export namespace Components {
           * Specifies the earliest allowed date (`"yyyy-mm-dd"`).
          */
         "min": Date;
+        "position": "start" | "end";
         /**
           * Specifies the size of the component.
          */
@@ -8824,6 +8825,7 @@ declare namespace LocalJSX {
           * Fires when user selects the date.
          */
         "onCalciteInternalDatePickerSelect"?: (event: CalciteDatePickerMonthCustomEvent<Date>) => void;
+        "position"?: "start" | "end";
         /**
           * Specifies the size of the component.
          */

packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx

@@ -62,6 +62,9 @@ export class DatePickerMonth {
   /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
   @Prop() max: Date;
 
+  /** @internal */
+  @Prop() position: "start" | "end";
+
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale;
 
@@ -153,7 +156,7 @@ export class DatePickerMonth {
       case "End":
         event.preventDefault();
         this.activeDate.setDate(
-          new Date(this.activeDate.getFullYear(), this.activeDate.getMonth() + 1, 0).getDate(),
+          new Date(this.activeDate.getFullYear(), this.activeDate.getMonth() + 1, 0).getDate()
         );
         this.addDays();
         break;
@@ -278,7 +281,7 @@ export class DatePickerMonth {
     const nextDate = new Date(this.activeDate);
     nextDate.setMonth(this.activeDate.getMonth() + step);
     this.calciteInternalDatePickerActiveDateChange.emit(
-      dateFromRange(nextDate, this.min, this.max),
+      dateFromRange(nextDate, this.min, this.max)
     );
     this.activeFocus = true;
   }
@@ -292,7 +295,7 @@ export class DatePickerMonth {
     const nextDate = new Date(this.activeDate);
     nextDate.setDate(this.activeDate.getDate() + step);
     this.calciteInternalDatePickerActiveDateChange.emit(
-      dateFromRange(nextDate, this.min, this.max),
+      dateFromRange(nextDate, this.min, this.max)
     );
     this.activeFocus = true;
   }

packages/calcite-components/src/components/date-picker/date-picker.tsx

@@ -67,9 +67,9 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
   @Prop({ mutable: true }) activeDate: Date;
 
   @Watch("activeDate")
-  activeDateWatcher(newActiveDate: Date): void {
+  activeDateWatcher(): void {
     if (this.activeRange === "end") {
-      this.activeEndDate = newActiveDate;
+      // this.activeEndDate = newActiveDate;
     }
   }
 
@@ -94,11 +94,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
   @Watch("valueAsDate")
   valueAsDateWatcher(newValueAsDate: Date | Date[]): void {
     if (this.range && Array.isArray(newValueAsDate)) {
-      const { activeStartDate, activeEndDate } = this;
-      const newActiveStartDate = newValueAsDate[0];
-      const newActiveEndDate = newValueAsDate[1];
-      this.activeStartDate = activeStartDate !== newActiveStartDate && newActiveStartDate;
-      this.activeEndDate = activeEndDate !== newActiveEndDate && newActiveEndDate;
     } else if (newValueAsDate && newValueAsDate !== this.activeDate) {
       this.activeDate = newValueAsDate as Date;
     }
@@ -266,18 +261,18 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     const maxDate =
       this.range && this.activeRange
         ? this.activeRange === "start"
-          ? endDate
-          : this.maxAsDate
+          ? this.maxAsDate
+          : endDate
         : this.maxAsDate;
-
+    console.log(this.activeStartDate, this.activeEndDate);
     return (
       <Host onBlur={this.resetActiveDates} onKeyDown={this.keyDownHandler}>
         <div class="container">
           <div class="start">
             {this.renderCalendar(
-              this.activeRange === "end" && this.displayedEndDate
-                ? prevMonth(this.displayedEndDate)
-                : this.displayedStartDate,
+              this.activeRange === "end" && this.activeEndDate
+                ? prevMonth(this.activeEndDate)
+                : this.activeStartDate,
               maxDate,
               minDate,
               date,
@@ -288,9 +283,9 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
           <div class="end">
             {this.range &&
               this.renderCalendar(
-                this.activeRange === "end" && this.displayedEndDate
-                  ? this.displayedEndDate
-                  : nextMonth(this.displayedStartDate),
+                this.activeRange === "end" && this.activeEndDate
+                  ? this.activeEndDate
+                  : nextMonth(this.activeStartDate),
                 this.maxAsDate,
                 minDate,
                 date,
@@ -321,16 +316,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
    */
   @State() activeStartDate: Date;
 
-  /**
-   * Active end date.
-   */
-  @State() displayedEndDate: Date;
-
-  /**
-   * Active start date.
-   */
-  @State() displayedStartDate: Date;
-
   /**
    * The DateTimeFormat used to provide screen reader labels.
    *
@@ -355,6 +340,8 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
 
   @State() private mostRecentRangeValue?: Date;
 
+  @State() private mostRecentActiveDateValue?: Date;
+
   @State() startAsDate: Date;
 
   //--------------------------------------------------------------------------
@@ -403,35 +390,32 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     } else {
       if (target.position === "end") {
         this.activeEndDate = date;
-        this.displayedEndDate = date;
         this.activeStartDate = prevMonth(date);
-        // this.activeStartDate = this.activeStartDate
-        //   ? nextMonth(this.activeStartDate)
-        // : prevMonth(date);
-        this.displayedStartDate = this.activeStartDate;
-        // this.activeDate = this.activeStartDate;
       } else {
         this.activeStartDate = date;
         this.activeEndDate = nextMonth(date);
-        //this.activeEndDate ? prevMonth(this.activeEndDate) : nextMonth(date);
-        // this.activeDate = date;
-        this.displayedStartDate = date;
-        this.displayedEndDate = this.activeEndDate;
       }
     }
   };
 
   monthActiveDateChange = (event: CustomEvent<Date>): void => {
     const date = new Date(event.detail);
+    const target = event.target as HTMLCalciteDatePickerMonthElement;
     if (!this.range) {
       this.activeDate = date;
     } else {
-      if (this.activeRange === "end") {
+      if (this.activeRange === "end" && target.position === "end") {
         this.activeEndDate = date;
-        this.displayedStartDate = date;
-      } else {
+        this.mostRecentActiveDateValue = null;
+      } else if (this.activeRange === "start" && target.position === "start") {
+        this.activeStartDate = date;
+        this.mostRecentActiveDateValue = null;
+      } else if (this.activeRange === "end" && target.position !== "end") {
+        this.mostRecentActiveDateValue = date;
         this.activeStartDate = date;
-        this.displayedStartDate = date;
+      } else if (this.activeRange === "start" && target.position !== "start") {
+        this.mostRecentActiveDateValue = date;
+        this.activeEndDate = date;
       }
       this.mostRecentRangeValue = date;
     }
@@ -562,6 +546,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
           onCalciteInternalDatePickerHover={this.monthHoverChange}
           onCalciteInternalDatePickerMouseOut={this.monthMouseOutChange}
           onCalciteInternalDatePickerSelect={this.monthDateChange}
+          position={position}
           scale={this.scale}
           selectedDate={position === "end" ? endDate : date}
           startDate={this.range ? date : undefined}
@@ -584,7 +569,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
         this.activeEndDate = new Date(valueAsDate[1]);
       }
     }
-    this.setDisplayedDates();
   };
 
   private getEndDate(): Date {
@@ -598,7 +582,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     this.valueAsDate = [startDate, date];
     this.mostRecentRangeValue = newEndDate;
     this.calciteDatePickerRangeChange.emit();
-    //this.activeEndDate = date || null;
   }
 
   private getStartDate(): Date {
@@ -611,7 +594,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     this.valueAsDate = [date, endDate];
     this.mostRecentRangeValue = date;
     this.calciteDatePickerRangeChange.emit();
-    //this.activeStartDate = date || null;
   }
 
   /**
@@ -637,8 +619,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     const start = this.getStartDate();
     const end = this.getEndDate();
 
-    // debugger;
-
     if (!start || (!end && date < start)) {
       if (start) {
         this.setEndDate(new Date(start));
@@ -715,8 +695,8 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
         this.maxAsDate
       );
 
-      this.displayedStartDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-      this.displayedEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
+      this.activeStartDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
+      this.activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
     }
   }
 }