summaryrefslogtreecommitdiffstats
path: root/toolkit/content/datepicker.xhtml
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--toolkit/content/datepicker.xhtml74
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>