Bug 1726108 - Combining date and time picker to datetime picker. r=emilio,desktop-theme-reviewers

david-loe · emilio · commit e0ad87a2ca0c · 2025-08-31T17:10:12.000Z
Differential Revision: https://phabricator.services.mozilla.com/D256445
diff --git a/toolkit/content/datetimepicker.xhtml b/toolkit/content/datetimepicker.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html [ <!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+%htmlDTD; ]>
+<html
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+>
+  <head>
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:;" />
+
+    <link
+      rel="stylesheet"
+      href="chrome://global/skin/datetimeinputpickers.css"
+    />
+    <link rel="localization" href="toolkit/global/datepicker.ftl" />
+    <script src="chrome://global/content/bindings/datekeeper.js"></script>
+    <script src="chrome://global/content/bindings/spinner.js"></script>
+    <script src="chrome://global/content/bindings/calendar.js"></script>
+    <script src="chrome://global/content/bindings/datepicker.js"></script>
+
+    <script src="chrome://global/content/bindings/timekeeper.js"></script>
+    <script src="chrome://global/content/bindings/timepicker.js"></script>
+  </head>
+  <body>
+    <div id="datetime-picker">
+      <div
+        id="date-picker"
+        class="picker"
+        role="dialog"
+        data-l10n-id="date-picker-label"
+        aria-modal="true"
+      >
+        <div class="calendar-container">
+          <div class="month-year-nav" data-l10n-id="date-spinner-label">
+            <button class="prev" data-l10n-id="date-picker-previous" />
+            <div class="month-year-container">
+              <button
+                class="month-year"
+                id="month-year-label"
+                aria-live="polite"
+              />
+            </div>
+            <button class="next" data-l10n-id="date-picker-next" />
+            <div class="month-year-view"></div>
+          </div>
+          <table role="grid" aria-labelledby="month-year-label">
+            <thead class="week-header"></thead>
+            <tbody class="days-view"></tbody>
+          </table>
+        </div>
+        <button id="clear-button" data-l10n-id="date-picker-clear-button" />
+      </div>
+
+      <div id="time-picker" class="picker"></div>
+    </div>
+    <template id="spinner-template">
+      <div class="spinner-container">
+        <button class="up" />
+        <div class="spinner"></div>
+        <button class="down" />
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn
@@ -63,6 +63,7 @@ toolkit.jar:
    content/global/resetProfileProgress.xhtml
    content/global/TopLevelVideoDocument.js
    content/global/timepicker.xhtml
+   content/global/datetimepicker.xhtml
    content/global/treeUtils.js
 #ifndef MOZ_FENNEC
    content/global/viewZoomOverlay.js
diff --git a/toolkit/modules/DateTimePickerPanel.sys.mjs b/toolkit/modules/DateTimePickerPanel.sys.mjs
@@ -10,6 +10,8 @@ export var DateTimePickerPanel = class {
     this.TIME_PICKER_HEIGHT = "22em";
     this.DATE_PICKER_WIDTH = "24em";
     this.DATE_PICKER_HEIGHT = "27em";
+    this.DATETIME_PICKER_WIDTH = "40em";
+    this.DATETIME_PICKER_HEIGHT = "27em";
   }
 
   get dateTimePopupFrame() {
@@ -23,17 +25,14 @@ export var DateTimePickerPanel = class {
   }
 
   openPicker(type, rect, detail) {
-    if (type == "datetime-local") {
-      type = "date";
-    }
-    this.type = type;
     this.pickerState = {};
     // TODO: Resize picker according to content zoom level
     this.element.style.fontSize = "10px";
+    this.type = type;
+    this.detail = detail;
+    this.dateTimePopupFrame.addEventListener("load", this, true);
     switch (type) {
       case "time": {
-        this.detail = detail;
-        this.dateTimePopupFrame.addEventListener("load", this, true);
         this.dateTimePopupFrame.setAttribute(
           "src",
           "chrome://global/content/timepicker.xhtml"
@@ -43,8 +42,6 @@ export var DateTimePickerPanel = class {
         break;
       }
       case "date": {
-        this.detail = detail;
-        this.dateTimePopupFrame.addEventListener("load", this, true);
         this.dateTimePopupFrame.setAttribute(
           "src",
           "chrome://global/content/datepicker.xhtml"
@@ -53,6 +50,15 @@ export var DateTimePickerPanel = class {
         this.dateTimePopupFrame.style.height = this.DATE_PICKER_HEIGHT;
         break;
       }
+      case "datetime-local": {
+        this.dateTimePopupFrame.setAttribute(
+          "src",
+          "chrome://global/content/datetimepicker.xhtml"
+        );
+        this.dateTimePopupFrame.style.width = this.DATETIME_PICKER_WIDTH;
+        this.dateTimePopupFrame.style.height = this.DATETIME_PICKER_HEIGHT;
+        break;
+      }
     }
     this.element.openPopupAtScreenRect(
       "after_start",
@@ -81,28 +87,13 @@ export var DateTimePickerPanel = class {
   }
 
   setPopupValue(data) {
-    switch (this.type) {
-      case "time": {
-        this.postMessageToPicker({
-          name: "PickerSetValue",
-          detail: data.value,
-        });
-        break;
-      }
-      case "date": {
-        const { year, month, day } = data.value;
-        this.postMessageToPicker({
-          name: "PickerSetValue",
-          detail: {
-            year,
-            // Month value from input box starts from 1 instead of 0
-            month: month == undefined ? undefined : month - 1,
-            day,
-          },
-        });
-        break;
-      }
-    }
+    const detail = data.value;
+    // Month value from input box starts from 1 instead of 0
+    detail.month = detail.month == undefined ? undefined : detail.month - 1;
+    this.postMessageToPicker({
+      name: "PickerSetValue",
+      detail,
+    });
   }
 
   initPicker(detail) {
@@ -121,125 +112,120 @@ export var DateTimePickerPanel = class {
 
     const dir = Services.locale.isAppLocaleRTL ? "rtl" : "ltr";
 
-    switch (this.type) {
-      case "time": {
-        const { hour, minute } = detail.value;
-        const format = detail.format || "12";
-
-        this.postMessageToPicker({
-          name: "PickerInit",
-          detail: {
-            hour,
-            minute,
-            format,
-            locale,
-            min: detail.min,
-            max: detail.max,
-            step: detail.step,
-          },
-        });
-        break;
-      }
-      case "date": {
-        const { year, month, day } = detail.value;
-        const { firstDayOfWeek, weekends } = this.getCalendarInfo(locale);
+    const { year, month, day, hour, minute } = detail.value;
+    const flattenDetail = {
+      year,
+      // Month value from input box starts from 1 instead of 0
+      month: month == undefined ? undefined : month - 1,
+      day,
+      hour,
+      minute,
+      locale,
+      dir,
+      format: detail.format || "12",
+      min: detail.min,
+      max: detail.max,
+      step: detail.step,
+      stepBase: detail.stepBase,
+    };
 
-        const monthDisplayNames = new Services.intl.DisplayNames(locale, {
-          type: "month",
-          style: "short",
-          calendar: "gregory",
-        });
-        const monthStrings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
-          month => monthDisplayNames.of(month)
-        );
+    if (this.type !== "time") {
+      const { firstDayOfWeek, weekends } = this.getCalendarInfo(locale);
 
-        const weekdayDisplayNames = new Services.intl.DisplayNames(locale, {
-          type: "weekday",
-          style: "abbreviated",
-          calendar: "gregory",
-        });
-        const weekdayStrings = [
-          // Weekdays starting Sunday (7) to Saturday (6).
-          7, 1, 2, 3, 4, 5, 6,
-        ].map(weekday => weekdayDisplayNames.of(weekday));
+      const monthDisplayNames = new Services.intl.DisplayNames(locale, {
+        type: "month",
+        style: "short",
+        calendar: "gregory",
+      });
+      const monthStrings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
+        monthNumber => monthDisplayNames.of(monthNumber)
+      );
 
-        this.postMessageToPicker({
-          name: "PickerInit",
-          detail: {
-            year,
-            // Month value from input box starts from 1 instead of 0
-            month: month == undefined ? undefined : month - 1,
-            day,
-            firstDayOfWeek,
-            weekends,
-            monthStrings,
-            weekdayStrings,
-            locale,
-            dir,
-            min: detail.min,
-            max: detail.max,
-            step: detail.step,
-            stepBase: detail.stepBase,
-          },
-        });
-        break;
-      }
+      const weekdayDisplayNames = new Services.intl.DisplayNames(locale, {
+        type: "weekday",
+        style: "abbreviated",
+        calendar: "gregory",
+      });
+      const weekdayStrings = [
+        // Weekdays starting Sunday (7) to Saturday (6).
+        7, 1, 2, 3, 4, 5, 6,
+      ].map(weekday => weekdayDisplayNames.of(weekday));
+      Object.assign(flattenDetail, {
+        firstDayOfWeek,
+        weekends,
+        monthStrings,
+        weekdayStrings,
+      });
     }
+    this.postMessageToPicker({
+      name: "PickerInit",
+      detail: flattenDetail,
+    });
   }
 
   /**
    * @param {Boolean} passAllValues: Pass spinner values regardless if they've been set/changed or not
    */
   setInputBoxValue(passAllValues) {
-    switch (this.type) {
-      case "time": {
-        const { hour, minute, isHourSet, isMinuteSet, isDayPeriodSet } =
-          this.pickerState;
-        const isAnyValueSet = isHourSet || isMinuteSet || isDayPeriodSet;
-        if (passAllValues && isAnyValueSet) {
-          this.sendPickerValueChanged({ hour, minute });
-        } else {
-          this.sendPickerValueChanged({
-            hour: isHourSet || isDayPeriodSet ? hour : undefined,
-            minute: isMinuteSet ? minute : undefined,
-          });
-        }
-        break;
-      }
-      case "date": {
-        this.sendPickerValueChanged(this.pickerState);
-        break;
+    const value = {
+      year: this.pickerState.year,
+      month: this.pickerState.month,
+      day: this.pickerState.day,
+      hour: this.pickerState.hour,
+      minute: this.pickerState.minute,
+    };
+    if (this.type !== "date") {
+      const isNoValueSet =
+        this.pickerState.isHourSet ||
+        this.pickerState.isMinuteSet ||
+        this.pickerState.isDayPeriodSet;
+      if (!passAllValues || isNoValueSet) {
+        value.hour =
+          this.pickerState.isHourSet || this.pickerState.isDayPeriodSet
+            ? value.hour
+            : undefined;
+        value.minute = this.pickerState.isMinuteSet ? value.minute : undefined;
       }
     }
+    this.sendPickerValueChanged(value);
   }
 
   sendPickerValueChanged(value) {
+    let detail = {};
     switch (this.type) {
       case "time": {
-        this.element.dispatchEvent(
-          new CustomEvent("DateTimePickerValueChanged", {
-            detail: {
-              hour: value.hour,
-              minute: value.minute,
-            },
-          })
-        );
+        detail = {
+          hour: value.hour,
+          minute: value.minute,
+        };
         break;
       }
       case "date": {
-        this.element.dispatchEvent(
-          new CustomEvent("DateTimePickerValueChanged", {
-            detail: {
-              year: value.year,
-              // Month value from input box starts from 1 instead of 0
-              month: value.month == undefined ? undefined : value.month + 1,
-              day: value.day,
-            },
-          })
-        );
+        detail = {
+          year: value.year,
+          // Month value from input box starts from 1 instead of 0
+          month: value.month == undefined ? undefined : value.month + 1,
+          day: value.day,
+        };
+        break;
+      }
+      case "datetime-local": {
+        detail = {
+          year: value.year,
+          // Month value from input box starts from 1 instead of 0
+          month: value.month == undefined ? undefined : value.month + 1,
+          day: value.day,
+          hour: value.hour,
+          minute: value.minute,
+        };
         break;
       }
     }
+    this.element.dispatchEvent(
+      new CustomEvent("DateTimePickerValueChanged", {
+        detail,
+      })
+    );
   }
 
   getCalendarInfo(locale) {
diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css
@@ -380,3 +380,9 @@ button.month-year.active {
 .spacer {
   width: var(--day-period-spacing-width);
 }
+
+#datetime-picker {
+  display: flex;
+  align-items: flex-start;
+  gap: 1em;
+}
