Andreas Hocevar
312 lines
10 KiB
HTML
312 lines
10 KiB
HTML
<!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>
|