FIX: Resolve timezone issues with date-time-input (#21414)

- Ensure changing timezones are reflected immediately in the date-time-input (the computed property was missing a dependent key)

- Ensure date-input doesn't lose timezone information (calling `toDate()` causes moment timestamps to lose timezone information)

This was created to resolve issues in the discourse-calendar plugin (https://github.com/discourse/discourse-calendar/pull/399)

app/assets/javascripts/discourse/app/components/date-input.js

@@ -54,7 +54,7 @@ export default Component.extend({
         if (this._picker && this.date) {
           const parsedDate =
             this.date instanceof moment ? this.date : moment(this.date);
-          this._picker.setDate(parsedDate.toDate(), true);
+          this._picker.setDate(parsedDate, true);
         }
       });
     });
@@ -66,7 +66,7 @@ export default Component.extend({
     if (this._picker && this.date) {
       const parsedDate =
         this.date instanceof moment ? this.date : moment(this.date);
-      this._picker.setDate(parsedDate.toDate(), true);
+      this._picker.setDate(parsedDate, true);
     }
 
     if (this._picker && this.relativeDate) {
@@ -75,7 +75,7 @@ export default Component.extend({
           ? this.relativeDate
           : moment(this.relativeDate);
 
-      this._picker.setMinDate(parsedRelativeDate.toDate(), true);
+      this._picker.setMinDate(parsedRelativeDate, true);
     }
 
     if (this._picker && !this.date) {

app/assets/javascripts/discourse/app/components/date-time-input.js

@@ -66,7 +66,7 @@ export default Component.extend({
     );
   },
 
-  @computed
+  @computed("timezone")
   get resolvedTimezone() {
     return this.timezone || moment.tz.guess();
   },

app/assets/javascripts/discourse/tests/integration/components/date-input-test.js

@@ -54,4 +54,20 @@ module("Integration | Component | date-input", function (hooks) {
 
     assert.ok(this.date.isSame(moment("2019-02-02")));
   });
+
+  test("always shows date in timezone of input timestamp", async function (assert) {
+    this.setProperties({
+      date: moment.tz("2023-05-05T10:00:00", "ETC/GMT-12"),
+    });
+
+    await render(
+      hbs`<DateInput @date={{this.date}} @onChange={{this.onChange}} />`
+    );
+    assert.strictEqual(dateInput().value, "2023-05-05");
+
+    this.setProperties({
+      date: moment.tz("2023-05-05T10:00:00", "ETC/GMT+12"),
+    });
+    assert.strictEqual(dateInput().value, "2023-05-05");
+  });
 });

app/assets/javascripts/discourse/tests/integration/components/date-time-input-test.js

@@ -63,4 +63,23 @@ module("Integration | Component | date-time-input", function (hooks) {
 
     assert.notOk(exists(timeInput()));
   });
+
+  test("supports swapping timezone without changing visible date/time", async function (assert) {
+    this.setProperties({
+      date: moment.tz("2023-05-05T12:00:00", "Europe/London"),
+      timezone: "Europe/London",
+      onChange: setDate,
+    });
+
+    await render(
+      hbs`<DateTimeInput @date={{this.date}} @timezone={{this.timezone}} @onChange={{this.onChange}} />`
+    );
+    dateInput().dispatchEvent(new Event("change"));
+    assert.strictEqual(this.date.format(), "2023-05-05T12:00:00+01:00");
+
+    this.setProperties({ timezone: "Australia/Sydney" });
+
+    dateInput().dispatchEvent(new Event("change"));
+    assert.strictEqual(this.date.format(), "2023-05-05T12:00:00+10:00");
+  });
 });