forked from mirrors/gecko-dev
		
	MozReview-Commit-ID: LIrOuUCfz17 --HG-- extra : rebase_source : 61781745759e1efb7851e1478bc6d3a591cb16c7
		
			
				
	
	
		
			61 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			61 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <?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="prev"/>
 | |
|         <button class="next"/>
 | |
|       </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">
 | |
|   /* import-globals-from widgets/datepicker.js */
 | |
|   // 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"),
 | |
|     buttonPrev: root.querySelector(".prev"),
 | |
|     buttonNext: root.querySelector(".next"),
 | |
|     weekHeader: root.querySelector(".week-header"),
 | |
|     daysView: root.querySelector(".days-view")
 | |
|   });
 | |
|   </script>
 | |
| </body>
 | |
| </html>
 |