toolkit/content/datepicker.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   3    - License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4    - You can obtain one at http://mozilla.org/MPL/2.0/. -->
   5
   6 <!DOCTYPE html [ <!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   7 %htmlDTD; ]>
   8 <html
   9   xmlns="http://www.w3.org/1999/xhtml"
  10   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  11 >
  12   <head>
  13     <link
  14       rel="stylesheet"
  15       href="chrome://global/skin/datetimeinputpickers.css"
  16     />
  17     <link rel="localization" href="toolkit/global/datepicker.ftl" />
  18     <script src="chrome://global/content/bindings/datekeeper.js"></script>
  19     <script src="chrome://global/content/bindings/spinner.js"></script>
  20     <script src="chrome://global/content/bindings/calendar.js"></script>
  21     <script src="chrome://global/content/bindings/datepicker.js"></script>
  22   </head>
  23   <body>
  24     <div
  25       id="date-picker"
  26       role="dialog"
  27       data-l10n-id="date-picker-label"
  28       aria-modal="true"
  29     >
  30       <div class="calendar-container">
  31         <div class="month-year-nav" data-l10n-id="date-spinner-label">
  32           <button class="prev" data-l10n-id="date-picker-previous" />
  33           <div class="month-year-container">
  34             <button
  35               class="month-year"
  36               id="month-year-label"
  37               aria-live="polite"
  38             />
  39           </div>
  40           <button class="next" data-l10n-id="date-picker-next" />
  41           <template id="spinner-template">
  42             <div class="spinner-container">
  43               <button class="up" />
  44               <div class="spinner"></div>
  45               <button class="down" />
  46             </div>
  47           </template>
  48           <div class="month-year-view"></div>
  49         </div>
  50         <table role="grid" aria-labelledby="month-year-label">
  51           <thead class="week-header"></thead>
  52           <tbody class="days-view"></tbody>
  53         </table>
  54       </div>
  55       <button id="clear-button" data-l10n-id="date-picker-clear-button" />
  56     </div>
  57     <script>
  58       /* import-globals-from widgets/datepicker.js */
  59       // Create a DatePicker instance and prepare to be
  60       // initialized by the "DatePickerInit" event from datetimepopup.xml
  61       const root = document.getElementById("date-picker");
  62       new DatePicker({
  63         monthYearNav: root.querySelector(".month-year-nav"),
  64         monthYear: root.querySelector(".month-year"),
  65         monthYearView: root.querySelector(".month-year-view"),
  66         buttonPrev: root.querySelector(".prev"),
  67         buttonNext: root.querySelector(".next"),
  68         weekHeader: root.querySelector(".week-header"),
  69         daysView: root.querySelector(".days-view"),
  70         buttonClear: document.getElementById("clear-button"),
  71       });
  72     </script>
  73   </body>
  74 </html>