<?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>