| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
| <title>goog.ui.DatePicker</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.dom'); |
| goog.require('goog.date'); |
| goog.require('goog.i18n.DateTimeSymbols'); |
| goog.require('goog.i18n.DateTimeSymbols_en_ISO'); |
| goog.require('goog.i18n.DateTimeSymbols_en_US'); |
| goog.require('goog.i18n.DateTimeSymbols_de'); |
| goog.require('goog.i18n.DateTimeSymbols_ml'); |
| goog.require('goog.i18n.DateTimeSymbols_ar_YE'); |
| goog.require('goog.i18n.DateTimeSymbols_th'); |
| goog.require('goog.i18n.DateTimeSymbols_ja'); |
| goog.require('goog.i18n.DateTimePatterns'); |
| goog.require('goog.i18n.DateTimePatterns_en_US'); |
| goog.require('goog.i18n.DateTimePatterns_de'); |
| goog.require('goog.i18n.DateTimePatterns_ml'); |
| goog.require('goog.i18n.DateTimePatterns_ar_YE'); |
| goog.require('goog.i18n.DateTimePatterns_th'); |
| goog.require('goog.i18n.DateTimePatterns_ja'); |
| goog.require('goog.ui.DatePicker'); |
| </script> |
| <link rel="stylesheet" href="css/demo.css"> |
| <link rel="stylesheet" href="../css/datepicker.css"> |
| </head> |
| <body> |
| <h1>goog.ui.DatePicker</h1> |
| |
| <table width="100%" summary="for laying out datepickers"><tr><td valign="top"> |
| <h2>Default: ISO 8601</h2> |
| <div id="widget_iso_8601"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_iso_8601"></span> |
| <br><br> |
| <h2>Custom</h2> |
| <input type="checkbox" id="ck-0" |
| onclick="allShowFixedNumWeeks(this.checked);" checked><label |
| for="ck-0">ShowFixedNumWeeks</label><br> |
| <input type="checkbox" id="ck-1" |
| onclick="allShowOtherMonths(this.checked);" checked><label |
| for="ck-1">ShowOtherMonths</label><br> |
| <input type="checkbox" id="ck-2" |
| onclick="allExtraWeekAtEnd(this.checked);" checked><label |
| for="ck-2">ExtraWeekAtEnd</label><br> |
| <input type="checkbox" id="ck-3" |
| onclick="allShowWeekNum(this.checked);" checked><label |
| for="ck-3">ShowWeekNum</label><br> |
| <input type="checkbox" id="ck-4" |
| onclick="allShowWeekdays(this.checked);" checked><label |
| for="ck-4">ShowWeekdays</label><br> |
| <input type="checkbox" id="ck-5" |
| onclick="allAllowNone(this.checked);" checked><label |
| for="ck-5">AllowNone</label><br> |
| <input type="checkbox" id="ck-6" |
| onclick="allShowToday(this.checked);" checked><label |
| for="ck-6">ShowToday</label><br> |
| <input type="checkbox" id="ck-7" |
| onclick="allUseNarrowWeekdayNames(this.checked);"><label |
| for="ck-7">UseNarrowWeekdayNames</label><br> |
| <input type="checkbox" id="ck-8" |
| onclick="allUseSimpleNavigationMenu(this.checked);"><label |
| for="ck-8">UseSimpleNavigationMenu</label><br> |
| <input type="checkbox" id="ck-9" |
| onclick="allLongDateFormat(this.checked);"><label |
| for="ck-9">LongDateFormat</label><br> |
| <br> |
| <div id="widget_custom"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_custom"></span> |
| </td> |
| <td valign="top"> |
| |
| <h2>English (US)</h2> |
| <div id="widget_en_US"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_en_US"></span> |
| <br><br> |
| |
| <h2>German</h2> |
| <div id="widget_de"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_de"></span> |
| <br><br> |
| |
| <h2>Malayalam</h2> |
| <div id="widget_ml"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_ml"></span> |
| <br><br> |
| |
| </td> |
| <td valign="top"> |
| |
| <h2>Arabic (Yemen)</h2> |
| <div dir=rtl id="widget_ar_YE"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_ar_YE"></span> |
| <br><br> |
| |
| <h2>Thai</h2> |
| <div id="widget_th"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_th"></span> |
| <br><br> |
| |
| <h2>Japanese</h2> |
| <div id="widget_ja"></div> |
| <div style="clear: both;"> </div> |
| <span id="label_ja"></span> |
| <br><br> |
| |
| </td></tr></table> |
| |
| <script type="text/javascript"> |
| // Standard: ISO 8601 |
| goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_en_ISO; |
| var dp_iso_8601 = new goog.ui.DatePicker(); |
| dp_iso_8601.render(document.getElementById('widget_iso_8601')); |
| |
| goog.events.listen(dp_iso_8601, |
| goog.ui.DatePicker.Events.CHANGE, function(event) { |
| goog.dom.setTextContent(document.getElementById('label_iso_8601'), |
| event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_iso_8601'), |
| dp_iso_8601.getDate().toIsoString(true)); |
| |
| // Custom |
| var dp_custom = new goog.ui.DatePicker(new goog.date.Date(2006, 0, 1)); |
| dp_custom.render(document.getElementById('widget_custom')); |
| |
| goog.events.listen(dp_custom, goog.ui.DatePicker.Events.CHANGE, |
| function(event) { |
| goog.dom.setTextContent(document.getElementById('label_custom'), |
| event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_custom'), |
| dp_custom.getDate().toIsoString(true)); |
| |
| // English (US) |
| goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_en_US; |
| goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_en_US; |
| |
| var dp_en_US = new goog.ui.DatePicker(); |
| dp_en_US.render(document.getElementById('widget_en_US')); |
| |
| goog.events.listen(dp_en_US, goog.ui.DatePicker.Events.CHANGE, |
| function(event) { |
| goog.dom.setTextContent(document.getElementById('label_en_US'), event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_en_US'), |
| dp_en_US.getDate().toIsoString(true)); |
| |
| // German |
| goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_de; |
| goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_de; |
| |
| dp_de = new goog.ui.DatePicker(); |
| dp_de.render(document.getElementById('widget_de')); |
| |
| goog.events.listen(dp_de, goog.ui.DatePicker.Events.CHANGE, function(event) { |
| goog.dom.setTextContent(document.getElementById('label_de'), event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_de'), |
| dp_de.getDate().toIsoString(true)); |
| |
| // Malayalam |
| goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_ml; |
| goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ml; |
| |
| var dp_ml = new goog.ui.DatePicker(); |
| dp_ml.render(document.getElementById('widget_ml')); |
| |
| goog.events.listen(dp_ml, goog.ui.DatePicker.Events.CHANGE, function(event) { |
| goog.dom.setTextContent(document.getElementById('label_ml'), event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_ml'), |
| dp_ml.getDate().toIsoString(true)); |
| |
| // Arabic (Yemen) |
| goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ar_YE; |
| var dp_ar_YE = new goog.ui.DatePicker(null, goog.i18n.DateTimeSymbols_ar_YE); |
| |
| dp_ar_YE.render(document.getElementById('widget_ar_YE')); |
| |
| goog.events.listen(dp_ar_YE, goog.ui.DatePicker.Events.CHANGE, |
| function(event) { |
| goog.dom.setTextContent(document.getElementById('label_ar_YE'), event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_ar_YE'), |
| dp_ar_YE.getDate().toIsoString(true)); |
| |
| // Russian |
| goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_th; |
| goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_th; |
| |
| var dp_th = new goog.ui.DatePicker(); |
| dp_th.render(document.getElementById('widget_th')); |
| |
| goog.events.listen(dp_th, goog.ui.DatePicker.Events.CHANGE, function(event) { |
| goog.dom.setTextContent(document.getElementById('label_th'), event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_th'), |
| dp_th.getDate().toIsoString(true)); |
| |
| // Japanese |
| goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_ja; |
| goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ja; |
| |
| var dp_ja = new goog.ui.DatePicker(); |
| dp_ja.render(document.getElementById('widget_ja')); |
| |
| goog.events.listen(dp_ja, goog.ui.DatePicker.Events.CHANGE, function(event) { |
| goog.dom.setTextContent(document.getElementById('label_ja'), event.date ? |
| event.date.toIsoString(true) : 'none'); |
| }); |
| |
| goog.dom.setTextContent(document.getElementById('label_ja'), |
| dp_ja.getDate().toIsoString(true)); |
| |
| // We update all pickers, for all languages |
| var allPickers = [dp_iso_8601, dp_custom, dp_en_US, |
| dp_de, dp_ml, dp_ar_YE, dp_th, dp_ja]; |
| |
| function allShowFixedNumWeeks(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setShowFixedNumWeeks(enabled); |
| } |
| } |
| |
| function allShowOtherMonths(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setShowOtherMonths(enabled); |
| } |
| } |
| |
| function allExtraWeekAtEnd(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setExtraWeekAtEnd(enabled); |
| } |
| } |
| |
| function allShowWeekNum(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setShowWeekNum(enabled); |
| } |
| } |
| |
| function allShowWeekdays(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setShowWeekdayNames(enabled); |
| } |
| } |
| |
| function allAllowNone(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setAllowNone(enabled); |
| } |
| } |
| |
| function allShowToday(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setShowToday(enabled); |
| } |
| } |
| |
| function allUseNarrowWeekdayNames(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setUseNarrowWeekdayNames(enabled); |
| } |
| } |
| |
| function allUseSimpleNavigationMenu(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setUseSimpleNavigationMenu(enabled); |
| } |
| } |
| |
| function allLongDateFormat(enabled) { |
| for (var i = 0; i < allPickers.length; ++i) { |
| allPickers[i].setLongDateFormat(enabled); |
| } |
| } |
| |
| </script> |
| </body> |
| </html> |
