1 files changed, 74 insertions, 0 deletions
diff --git a/toolkit/content/datepicker.xhtml b/toolkit/content/datepicker.xhtml
new file mode 100644
index 0000000000..9752add763
--- /dev/null
+++ b/toolkit/content/datepicker.xhtml
@@ -0,0 +1,74 @@
+<?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 http://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>
+    <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>
+  </head>
+  <body>
+    <div
+      id="date-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" />
+          <template id="spinner-template">
+            <div class="spinner-container">
+              <button class="up" />
+              <div class="spinner"></div>
+              <button class="down" />
+            </div>
+          </template>
+          <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>
+    <script>
+      /* import-globals-from widgets/datepicker.js */
+      // Create a DatePicker instance and prepare to be
+      // initialized by the "DatePickerInit" event from datetimepopup.xml
+      const root = document.getElementById("date-picker");
+      new DatePicker({
+        monthYearNav: root.querySelector(".month-year-nav"),
+        monthYear: root.querySelector(".month-year"),
+        monthYearView: root.querySelector(".month-year-view"),
+        buttonPrev: root.querySelector(".prev"),
+        buttonNext: root.querySelector(".next"),
+        weekHeader: root.querySelector(".week-header"),
+        daysView: root.querySelector(".days-view"),
+        buttonClear: document.getElementById("clear-button"),
+      });
+    </script>
+  </body>
+</html>