123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- <?xml version="1.0" encoding="UTF-8"?>
- <!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 type="application/javascript" src="chrome://global/content/bindings/datekeeper.js"></script>
- <script type="application/javascript" src="chrome://global/content/bindings/spinner.js"></script>
- <script type="application/javascript" src="chrome://global/content/bindings/calendar.js"></script>
- <script type="application/javascript" src="chrome://global/content/bindings/datepicker.js"></script>
- </head>
- <body>
- <div id="date-picker">
- <div class="calendar-container">
- <div class="nav">
- <button class="left"/>
- <button class="right"/>
- </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 type="application/javascript">
- // We need to hide the scroll bar but maintain its scrolling
- // capability, so using |overflow: hidden| is not an option.
- // Instead, we are inserting a user agent stylesheet that is
- // capable of selecting scrollbars, and do |display: none|.
- var domWinUtls = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
- getInterface(Components.interfaces.nsIDOMWindowUtils);
- domWinUtls.loadSheetUsingURIString('data:text/css,@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); scrollbar { display: none; }', domWinUtls.AGENT_SHEET);
- // 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"),
- buttonLeft: root.querySelector(".left"),
- buttonRight: root.querySelector(".right"),
- weekHeader: root.querySelector(".week-header"),
- daysView: root.querySelector(".days-view")
- });
- </script>
- </body>
- </html>
|