• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset=utf-8>
5<title>Calendar Picker test</title>
6<style>
7body {
8    background-color: #eeffff;
9}
10iframe {
11    z-index: 2147483647;
12    width: 100px;
13    height: 100px;
14    border: 0;
15    overflow: hidden;
16}
17</style>
18</head>
19<body>
20
21<p>This is a testbed for date suggestion picker.</p>
22<select onchange="selected(this)">
23 <option>with datalist</option>
24 <option>with long datalist</option>
25 <option>Arabic with datalist</option>
26 <option>Arabic with long datalist</option>
27</select>
28
29<div><input type="text" id="date"></div>
30<iframe></iframe>
31
32<ol id="console" style="font-family:monospace;">
33</ol>
34
35<script>
36var datalistArguments = {
37    locale: 'en-US',
38    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
39    todayLabel : 'Today',
40    clearLabel : 'Clear',
41    cancelLabel : 'Cancel',
42    weekStartDay : 0,
43    step : "86400000",
44    stepBase: "0",
45    max : '2099-12-31',
46    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
47    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
48    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
49    showOtherDateEntry: true,
50    otherDateLabel: 'Other...',
51    inputWidth: 127,
52    suggestionHighlightColor: "#0000ff",
53    suggestionHighlightTextColor: "#ffffff"
54};
55var longDatalistArguments = {
56    locale: 'en-US',
57    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
58    todayLabel : 'Today',
59    clearLabel : 'Clear',
60    cancelLabel : 'Cancel',
61    weekStartDay : 0,
62    step : "86400000",
63    stepBase: "0",
64    max : '2099-12-31',
65    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
66        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
67        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
68        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
69        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
70        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
71        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
72        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
73        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
74        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
75        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
76        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
77        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
78        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
79        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
80        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
81        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
82        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
83        "2012-03-30", "2012-03-31"],
84    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
85        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
86        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
87        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
88        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
89        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
90        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
91        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
92        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
93        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
94        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
95        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12",
96        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
97        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
98        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
99    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
100        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
101        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
102        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
103        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
104        "", "", "", "", "", "", "", ""],
105    showOtherDateEntry: true,
106    otherDateLabel: 'Other...',
107    inputWidth: 127,
108    suggestionHighlightColor: "#0000ff",
109    suggestionHighlightTextColor: "#ffffff"
110};
111
112var arabicDatalistArguments = {
113    locale: 'ar',
114    isRTL: true,
115    isCalendarRTL: true,
116    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
117    todayLabel : 'اليوم',
118    clearLabel : 'مسح',
119    weekStartDay : 5,
120    step : "86400000",
121    stepBase: "0",
122    max : '2020-05-15',
123    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
124    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
125    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
126    showOtherDateEntry: true,
127    otherDateLabel: 'Other...',
128    inputWidth: 127,
129    suggestionHighlightColor: "#0000ff",
130    suggestionHighlightTextColor: "#ffffff"
131};
132
133var arabicLongDatalistArguments = {
134    locale: 'ar',
135    isRTL: true,
136    isCalendarRTL: true,
137    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
138    todayLabel : 'اليوم',
139    clearLabel : 'مسح',
140    weekStartDay : 5,
141    step : "86400000",
142    stepBase: "0",
143    max : '2020-05-15',
144    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
145        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
146        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
147        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
148        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
149        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
150        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
151        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
152        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
153        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
154        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
155        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
156        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
157        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
158        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
159        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
160        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
161        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
162        "2012-03-30", "2012-03-31"],
163    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
164        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
165        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
166        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
167        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
168        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
169        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
170        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
171        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
172        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
173        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
174        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12",
175        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
176        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
177        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
178    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
179        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
180        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
181        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
182        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
183        "", "", "", "", "", "", "", ""],
184    showOtherDateEntry: true,
185    otherDateLabel: 'Other...',
186    inputWidth: 127,
187    suggestionHighlightColor: "#0000ff",
188    suggestionHighlightTextColor: "#ffffff"
189};
190
191function openCalendar(args) {
192    var frame = document.getElementsByTagName('iframe')[0];
193    var doc = frame.contentDocument;
194    doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
195    var commonCssLink = doc.createElement('link');
196    commonCssLink.rel = 'stylesheet';
197    commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
198    doc.head.appendChild(commonCssLink);
199    var commonChromiumCssLink = doc.createElement('link');
200    commonChromiumCssLink.rel = 'stylesheet';
201    commonChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css?' + (new Date()).getTime();
202    doc.head.appendChild(commonChromiumCssLink);
203    var suggestionPickerCssLink = doc.createElement('link');
204    suggestionPickerCssLink.rel = 'stylesheet';
205    suggestionPickerCssLink.href = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.css?' + (new Date()).getTime();
206    doc.head.appendChild(suggestionPickerCssLink);
207    var link = doc.createElement('link');
208    link.rel = 'stylesheet';
209    link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
210    doc.head.appendChild(link);
211    var calendarPickerChromiumCssLink = doc.createElement('link');
212    calendarPickerChromiumCssLink.rel = 'stylesheet';
213    calendarPickerChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css?' + (new Date()).getTime();
214    doc.head.appendChild(calendarPickerChromiumCssLink);
215    var commonJsScript = doc.createElement('script');
216    commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
217    doc.body.appendChild(commonJsScript);
218    var suggestionPickerJsScript = doc.createElement('script');
219    suggestionPickerJsScript.src = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.js?' + (new Date()).getTime();
220    doc.body.appendChild(suggestionPickerJsScript);
221    var script = doc.createElement('script');
222    script.src = '../../Source/WebCore/Resources/pagepopups/calendarPicker.js?' + (new Date()).getTime();
223    doc.body.appendChild(script);
224
225    var pagePopupController = {
226        setValueAndClosePopup: function(numValue, stringValue) {
227            window.log('number=' + numValue + ', string="' + stringValue + '"');
228            if (numValue == 0)
229                window.document.getElementById('date').value = stringValue;
230        },
231        localizeNumberString: function(numString) {
232            if (typeof numString == "number")
233                return numString.toLocaleString();
234            return numString.toString();
235        },
236        histogramEnumeration: function() {},
237        formatMonth: function(year, zeroBaseMonth) {
238            var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
239                               '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
240            return monthLabels[zeroBaseMonth] + " " + year;
241        }
242    }
243
244    setTimeout(function() {
245        frame.contentWindow.postMessage(JSON.stringify(args), "*");
246        frame.contentWindow.pagePopupController = pagePopupController;
247    }, 100);
248}
249
250function selected(select) {
251    var frame = document.getElementsByTagName('iframe')[0];
252    frame.style.width = '100px';
253    frame.style.height = '100px';
254    switch (select.selectedIndex) {
255    case 0:
256        openCalendar(datalistArguments);
257        break;
258    case 1:
259        openCalendar(longDatalistArguments);
260        break;
261    case 2:
262        openCalendar(arabicDatalistArguments);
263        break;
264    case 3:
265        openCalendar(arabicLongDatalistArguments);
266        break;
267    }
268}
269
270function log(str) {
271    var entry = document.createElement('li');
272    entry.innerText = str;
273    document.getElementById('console').appendChild(entry);
274}
275
276openCalendar(englishArguments);
277</script>
278</body>
279</html>
280