<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Calendar Picker test</title>
<style>
body {
background-color: #eeffff;
line-height: 1.4em;
font-family: Helvetica, sans-serif;
}
label {
width: 160px;
display: inline-block;
}
iframe {
z-index: 2147483647;
width: 100px;
height: 100px;
border: 0;
overflow: hidden;
}
</style>
</head>
<body>
<p>This is a testbed for a calendar picker.</p>
<h2>Preview</h2>
<input type="text" id="date" style="margin: 0;"><br>
<iframe></iframe>
<h2>Console</h2>
<ol id="console" style="font-family:monospace;"></ol>
<h2>Config</h2>
<form action="" method="GET">
<fieldset>
<legend>Locale</legend>
<label for="locale">Locale</label>
<select name="locale" id="config_locale">
<!-- Populated from locale_data. -->
</select>
<br />
<label for="locale_rtl">Locale RTL</label>
<input type="checkbox" name="locale_rtl" id="config_locale_rtl" value="true">
<br />
<label for="week_start_day">Week start day</label>
<select name="week_start_day" id="config_week_start_day">
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
</fieldset>
<fieldset>
<legend>Attributes</legend>
<label for="type">[type]</label>
<select name="type" id="config_type">
<option>date</option>
<option>week</option>
<option>month</option>
</select>
<br />
<label for="value">[value]</label>
<input type="text" name="value" id="config_value">
<br />
<label for="min">[min]</label>
<input type="text" name="min" id="config_min">
<br />
<label for="max">[max]</label>
<input type="text" name="max" id="config_max">
<br />
<label for="step">[step]</label>
<input type="number" name="step" id="config_step">
</fieldset>
<input type="submit" value="Submit">
</form>
<script>
function getParam(key) {
key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var pattern = "[\\?&]" + key + "=([^&#]*)";
var regex = new RegExp(pattern);
var results = regex.exec(window.location.search);
if (!results)
return "";
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
function setParam(key, value) {
key = escape(key);
value = escape(value);
var kvp = document.location.search.substr(1).split('&');
for (var i = kvp.length - 1; i >= 0; --i){
kvp[i]
var x = kvp[i].split('=');
if (x[0] === key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if (i < 0)
kvp[kvp.length] = key + "=" + value;
document.location.search = kvp.join('&');
}
function $(id) {
return document.getElementById(id);
}
var config = {};
function initializeConfig() {
for (locale in locale_data) {
var option = document.createElement("option");
option.setAttribute("label", locale_data[locale].displayName);
option.setAttribute("value", locale);
$("config_locale").appendChild(option);
}
config.locale = getParam("locale") || "en-US";
config.isLocaleRTL = getParam("locale_rtl") === "true";
config.weekStartDay = parseInt(getParam("weekStartDay") || "0", 10);
config.type = getParam("type") || "date";
config.value = getParam("value") || "";
config.min = getParam("min") || "";
config.max = getParam("max") || "";
config.step = getParam("step") || "1";
$("config_locale").value = config.locale;
$("config_locale_rtl").checked = config.isLocaleRTL;
$("config_week_start_day").value = config.weekStartDay;
$("config_type").value = config.type;
$("config_value").value = config.value;
$("config_min").value = config.min;
$("config_max").value = config.max;
$("config_step").value = config.step;
};
var locale_data = {
"en-US": {
"displayName": "English (United States)",
"shortMonthLabels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"dayLabels": [
"S",
"M",
"T",
"W",
"T",
"F",
"S"
],
},
"ja": {
"displayName": "Japanese",
"shortMonthLabels": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"dayLabels": [
"日",
"月",
"火",
"水",
"木",
"金",
"土"
],
},
"ar": {
"displayName": "Arabic",
"shortMonthLabels": [
"يناير",
"فبراير",
"مارس",
"أبريل",
"مايو",
"يونيو",
"يوليو",
"أغسطس",
"سبتمبر",
"أكتوبر",
"نوفمبر",
"ديسمبر"
],
"dayLabels": [
"ح",
"ن",
"ث",
"ر",
"خ",
"ج",
"س"
],
},
"vi": {
"displayName": "Vietnamese",
"shortMonthLabels": [
"thg 1",
"thg 2",
"thg 3",
"thg 4",
"thg 5",
"thg 6",
"thg 7",
"thg 8",
"thg 9",
"thg 10",
"thg 11",
"thg 12"
],
"dayLabels": [
"CN",
"T2",
"T3",
"T4",
"T5",
"T6",
"T7"
],
},
};
function createParam() {
return {
mode: config.type,
locale: config.locale,
weekStartDay: config.weekStartDay,
isLocaleRTL: config.isLocaleRTL,
dayLabels: locale_data[config.locale].dayLabels,
shortMonthLabels: locale_data[config.locale].shortMonthLabels,
max: config.max,
min: config.min,
step: config.step * (config.type === "month" ? 1 : 86400000),
stepBase: "0",
currentValue: config.value,
axShowMonthSelector: "Show month selection panel",
axShowNextMonth: "Show next month",
axShowPreviousMonth: "Show previous month",
todayLabel: "Today",
}
};
function includeFile(file, isJs) {
const doc = document.getElementsByTagName('iframe')[0].contentDocument;
file = '../../renderer/core/html/forms/resources/' + file + '?' + (new Date()).getTime();
var element;
if (isJs) {
element = doc.createElement('script');
element.src = file;
} else {
element = doc.createElement('link');
element.rel = 'stylesheet';
element.href = file;
}
doc.head.appendChild(element);
}
function openCalendar() {
var frame = document.getElementsByTagName('iframe')[0];
frame.contentDocument.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
includeFile('picker_common.css', /*isJs=*/false);
includeFile('suggestion_picker.css', /*isJs=*/false);
includeFile('calendar_picker.css', /*isJs=*/false);
includeFile('picker_common.js', /*isJs=*/true);
includeFile('suggestion_picker.js', /*isJs=*/true);
includeFile('month_picker.js', /*isJs=*/true);
includeFile('calendar_picker.js', /*isJs=*/true);
var pagePopupController = {
setValueAndClosePopup: function(numValue, stringValue) {
window.log('number=' + numValue + ', string="' + stringValue + '"');
if (numValue == 0)
window.document.getElementById('date').value = stringValue;
},
setValue: function(stringValue) {
window.log('string="' + stringValue + '"');
window.document.getElementById('date').value = stringValue;
},
closePopup: function() {
window.log('closePopup');
},
localizeNumberString: function(numString) {
if (typeof numString == "number")
return numString.toLocaleString();
return numString.toString();
},
histogramEnumeration: function() {},
formatMonth: function(year, zeroBaseMonth) {
var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
'<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
return monthLabels[zeroBaseMonth] + " " + year;
},
formatShortMonth: function(year, zeroBaseMonth) {
var monthLabels = ['<Jan>', '<Feb>', '<Mar>', '<Apr>', '<May>', '<Jun>',
'<Jul>', '<Aug>', '<Sept>', '<Oct>', '<Nov>', '<Dec>'];
return monthLabels[zeroBaseMonth] + " " + year;
},
formatWeek: function(year, week, startDate) {
return '' + year + '-W' + week + ' starting on ' + startDate;
}
}
setTimeout(function() {
frame.contentWindow.postMessage(JSON.stringify(createParam()), "*");
frame.contentWindow.pagePopupController = pagePopupController;
}, 100);
}
function log(str) {
var entry = document.createElement('li');
entry.innerText = str;
document.getElementById('console').appendChild(entry);
}
window.onload = function() {
initializeConfig();
openCalendar();
};
</script>
</body>
</html>
Codebase Browser
chromium