<?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>Time Picker</title> <link rel="stylesheet" href="chrome://global/skin/datetimeinputpickers.css"/> <script type="application/javascript" src="chrome://global/content/bindings/timekeeper.js"></script> <script type="application/javascript" src="chrome://global/content/bindings/spinner.js"></script> <script type="application/javascript" src="chrome://global/content/bindings/timepicker.js"></script> </head> <body> <div id="time-picker"></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 TimePicker instance and prepare to be // initialized by the "TimePickerInit" event from timepicker.xml new TimePicker(document.getElementById("time-picker")); </script> </body> </html>