1 files changed, 58 insertions, 0 deletions
diff --git a/toolkit/content/datepicker.xhtml b/toolkit/content/datepicker.xhtml
new file mode 100644
index 0000000000..d72551e559
--- /dev/null
+++ b/toolkit/content/datepicker.xhtml
@@ -0,0 +1,58 @@
+<?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" "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>
+  <title>Date Picker</title>
+  <link rel="stylesheet" href="chrome://global/skin/datetimeinputpickers.css"/>
+  <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">
+    <div class="calendar-container">
+      <div class="nav">
+        <button class="prev"/>
+        <button class="next"/>
+      </div>
+      <div class="week-header"></div>
+      <div class="days-viewport">
+        <div class="days-view"></div>
+      </div>
+    </div>
+    <div class="month-year-container">
+      <button class="month-year"/>
+    </div>
+    <div class="month-year-view"></div>
+  </div>
+  <template id="spinner-template">
+    <div class="spinner-container">
+      <button class="up"/>
+      <div class="spinner"></div>
+      <button class="down"/>
+    </div>
+  </template>
+  <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({
+    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"),
+  });
+  </script>
+</body>
+</html>