chromium/src/third_party/blink/manual_tests/forms/calendar-picker.html - manifest_repos/chromium_src - Git at Google

 <!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 openCalendar() {
     var frame = document.getElementsByTagName('iframe')[0];
     var doc = frame.contentDocument;
     doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
     var commonCssLink = doc.createElement('link');
     commonCssLink.rel = 'stylesheet';
     commonCssLink.href = '../../Source/core/html/forms/resources/pickerCommon.css?' + (new Date()).getTime();
     doc.head.appendChild(commonCssLink);
     var buttonCssLink = doc.createElement('link');
     buttonCssLink.rel = 'stylesheet';
     buttonCssLink.href = '../../Source/core/html/forms/resources/pickerButton.css?' + (new Date()).getTime();
     doc.head.appendChild(buttonCssLink);
     var suggestionPickerCssLink = doc.createElement('link');
     suggestionPickerCssLink.rel = 'stylesheet';
     suggestionPickerCssLink.href = '../../Source/core/html/forms/resources/suggestionPicker.css?' + (new Date()).getTime();
     doc.head.appendChild(suggestionPickerCssLink);
     var link = doc.createElement('link');
     link.rel = 'stylesheet';
     link.href = '../../Source/core/html/forms/resources/calendarPicker.css?' + (new Date()).getTime();
     doc.head.appendChild(link);
     var commonJsScript = doc.createElement('script');
     commonJsScript.src = '../../Source/core/html/forms/resources/pickerCommon.js?' + (new Date()).getTime();
     doc.body.appendChild(commonJsScript);
     var suggestionPickerJsScript = doc.createElement('script');
     suggestionPickerJsScript.src = '../../Source/core/html/forms/resources/suggestionPicker.js?' + (new Date()).getTime();
     doc.body.appendChild(suggestionPickerJsScript);
     var script = doc.createElement('script');
     script.src = '../../Source/core/html/forms/resources/calendarPicker.js?' + (new Date()).getTime();
     doc.body.appendChild(script);

     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>
	<!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 openCalendar() {
	var frame = document.getElementsByTagName('iframe')[0];
	var doc = frame.contentDocument;
	doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
	var commonCssLink = doc.createElement('link');
	commonCssLink.rel = 'stylesheet';
	commonCssLink.href = '../../Source/core/html/forms/resources/pickerCommon.css?' + (new Date()).getTime();
	doc.head.appendChild(commonCssLink);
	var buttonCssLink = doc.createElement('link');
	buttonCssLink.rel = 'stylesheet';
	buttonCssLink.href = '../../Source/core/html/forms/resources/pickerButton.css?' + (new Date()).getTime();
	doc.head.appendChild(buttonCssLink);
	var suggestionPickerCssLink = doc.createElement('link');
	suggestionPickerCssLink.rel = 'stylesheet';
	suggestionPickerCssLink.href = '../../Source/core/html/forms/resources/suggestionPicker.css?' + (new Date()).getTime();
	doc.head.appendChild(suggestionPickerCssLink);
	var link = doc.createElement('link');
	link.rel = 'stylesheet';
	link.href = '../../Source/core/html/forms/resources/calendarPicker.css?' + (new Date()).getTime();
	doc.head.appendChild(link);
	var commonJsScript = doc.createElement('script');
	commonJsScript.src = '../../Source/core/html/forms/resources/pickerCommon.js?' + (new Date()).getTime();
	doc.body.appendChild(commonJsScript);
	var suggestionPickerJsScript = doc.createElement('script');
	suggestionPickerJsScript.src = '../../Source/core/html/forms/resources/suggestionPicker.js?' + (new Date()).getTime();
	doc.body.appendChild(suggestionPickerJsScript);
	var script = doc.createElement('script');
	script.src = '../../Source/core/html/forms/resources/calendarPicker.js?' + (new Date()).getTime();
	doc.body.appendChild(script);

	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>