55207e4d3db7518e1b8f56fbe08021b54f268bdc
[WebKit-https.git] / ManualTests / forms / calendar-picker.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>Calendar Picker test</title>
6 <style>
7 body {
8     background-color: #eeffff;
9 }
10 iframe {
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 a calendar picker.</p>
22 <select onchange="selected(this)">
23  <option>English</option>
24  <option>Japanese</option>
25  <option>Arabic</option>
26  <option>with datalist</option>
27  <option>with long datalist</option>
28  <option>Arabic with datalist</option>
29  <option>Arabic with long datalist</option>
30  <option>Month</option>
31 </select>
32
33 <div><input type="text" id="date"></div>
34 <iframe></iframe>
35
36 <ol id="console" style="font-family:monospace;">
37 </ol>
38
39 <script>
40 var englishArguments = {
41     locale: 'en-US',
42     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
43     'July', 'August', 'September', 'October', 'November', 'December'],
44     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
45     todayLabel : 'Today',
46     clearLabel : 'Clear',
47     cancelLabel : 'Cancel',
48     weekStartDay : 0,
49     step : "86400000",
50     stepBase: "0",
51     max : '2099-12-31',
52 };
53 var japaneseArguments = {
54     locale: 'ja-JP',
55     monthLabels : ['1月', '2月', '3月', '4月', '5月', '6月',
56     '7月', '8月', '9月', '10月', '11月', '12月'],
57     dayLabels : ['日', '月', '火', '水', '木', '金', '土'],
58     todayLabel : '今日',
59     clearLabel : 'クリア',
60     cancelLabel : '取り消し',
61     weekStartDay : 0,
62     step : "86400000",
63     stepBase: "0",
64     max : '2099-03-15',
65 };
66 var arabicArguments = {
67     locale: 'ar',
68     isRTL: false,
69     isCalendarRTL: true,
70     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
71                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
72     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
73     todayLabel : 'اليوم',
74     clearLabel : 'مسح',
75     weekStartDay : 5,
76     step : "86400000",
77     stepBase: "0",
78     max : '2020-05-15',
79 };
80 var datalistArguments = {
81     locale: 'en-US',
82     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
83     'July', 'August', 'September', 'October', 'November', 'December'],
84     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
85     todayLabel : 'Today',
86     clearLabel : 'Clear',
87     cancelLabel : 'Cancel',
88     weekStartDay : 0,
89     step : "86400000",
90     stepBase: "0",
91     max : '2099-12-31',
92     suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
93     localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
94     suggestionLabels : ['', 'Birthday', '', 'Christmas'],
95     showOtherDateEntry: true,
96     otherDateLabel: 'Other...',
97     inputWidth: 127,
98     suggestionHighlightColor: "#0000ff",
99     suggestionHighlightTextColor: "#ffffff"
100 };
101 var longDatalistArguments = {
102     locale: 'en-US',
103     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
104     'July', 'August', 'September', 'October', 'November', 'December'],
105     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
106     todayLabel : 'Today',
107     clearLabel : 'Clear',
108     cancelLabel : 'Cancel',
109     weekStartDay : 0,
110     step : "86400000",
111     stepBase: "0",
112     max : '2099-12-31',
113     suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
114         "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
115         "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
116         "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
117         "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
118         "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
119         "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
120         "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
121         "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
122         "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
123         "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
124         "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
125         "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
126         "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
127         "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
128         "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
129         "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
130         "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
131         "2012-03-30", "2012-03-31"],
132     localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
133         "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
134         "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
135         "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
136         "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
137         "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
138         "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
139         "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
140         "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
141         "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
142         "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
143         "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
144         "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
145         "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
146         "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
147     suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
148         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
149         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
150         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
151         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
152         "", "", "", "", "", "", "", ""],
153     showOtherDateEntry: true,
154     otherDateLabel: 'Other...',
155     inputWidth: 127,
156     suggestionHighlightColor: "#0000ff",
157     suggestionHighlightTextColor: "#ffffff"
158 };
159
160 var arabicDatalistArguments = {
161     locale: 'ar',
162     isRTL: true,
163     isCalendarRTL: true,
164     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
165                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
166     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
167     todayLabel : 'اليوم',
168     clearLabel : 'مسح',
169     weekStartDay : 5,
170     step : "86400000",
171     stepBase: "0",
172     max : '2020-05-15',
173     suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
174     localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
175     suggestionLabels : ['', 'Birthday', '', 'Christmas'],
176     showOtherDateEntry: true,
177     otherDateLabel: 'Other...',
178     inputWidth: 127,
179     suggestionHighlightColor: "#0000ff",
180     suggestionHighlightTextColor: "#ffffff"
181 };
182
183 var arabicLongDatalistArguments = {
184     locale: 'ar',
185     isRTL: true,
186     isCalendarRTL: true,
187     monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
188                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
189     dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
190     todayLabel : 'اليوم',
191     clearLabel : 'مسح',
192     weekStartDay : 5,
193     step : "86400000",
194     stepBase: "0",
195     max : '2020-05-15',
196     suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
197         "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
198         "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
199         "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
200         "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
201         "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
202         "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
203         "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
204         "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
205         "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
206         "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
207         "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
208         "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
209         "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
210         "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
211         "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
212         "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
213         "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
214         "2012-03-30", "2012-03-31"],
215     localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
216         "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
217         "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
218         "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
219         "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
220         "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
221         "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
222         "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
223         "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
224         "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
225         "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
226         "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
227         "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
228         "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
229         "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
230     suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
231         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
232         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
233         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
234         "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
235         "", "", "", "", "", "", "", ""],
236     showOtherDateEntry: true,
237     otherDateLabel: 'Other...',
238     inputWidth: 127,
239     suggestionHighlightColor: "#0000ff",
240     suggestionHighlightTextColor: "#ffffff"
241 };
242 var monthArguments = {
243     locale: 'en-US',
244     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
245     'July', 'August', 'September', 'October', 'November', 'December'],
246     dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
247     todayLabel : 'This Month',
248     clearLabel : 'Clear',
249     cancelLabel : 'Cancel',
250     weekStartDay : 0,
251     step : "1",
252     stepBase: "0",
253     currentValue : '2000-01',
254     max : '2099-03',
255     mode: "month"
256 };
257
258 function openCalendar(args) {
259     var frame = document.getElementsByTagName('iframe')[0];
260     var doc = frame.contentDocument;
261     doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
262     var commonCssLink = doc.createElement('link');
263     commonCssLink.rel = 'stylesheet';
264     commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
265     doc.head.appendChild(commonCssLink);
266     var suggestionPickerCssLink = doc.createElement('link');
267     suggestionPickerCssLink.rel = 'stylesheet';
268     suggestionPickerCssLink.href = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.css?' + (new Date()).getTime();
269     doc.head.appendChild(suggestionPickerCssLink);
270     var link = doc.createElement('link');
271     link.rel = 'stylesheet';
272     link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
273     doc.head.appendChild(link);
274     var commonJsScript = doc.createElement('script');
275     commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
276     doc.body.appendChild(commonJsScript);
277     var suggestionPickerJsScript = doc.createElement('script');
278     suggestionPickerJsScript.src = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.js?' + (new Date()).getTime();
279     doc.body.appendChild(suggestionPickerJsScript);
280     var script = doc.createElement('script');
281     script.src = '../../Source/WebCore/Resources/pagepopups/calendarPicker.js?' + (new Date()).getTime();
282     doc.body.appendChild(script);
283
284     var pagePopupController = {
285         setValueAndClosePopup: function(numValue, stringValue) {
286             window.log('number=' + numValue + ', string="' + stringValue + '"');
287             if (numValue == 0)
288                 window.document.getElementById('date').value = stringValue;
289         },
290         localizeNumberString: function(numString) {
291             if (typeof numString == "number")
292                 return numString.toLocaleString();
293             return numString.toString();
294         }
295     }
296
297     setTimeout(function() {
298         frame.contentWindow.postMessage(JSON.stringify(args), "*");
299         frame.contentWindow.pagePopupController = pagePopupController;
300     }, 100);
301 }
302
303 function selected(select) {
304     var frame = document.getElementsByTagName('iframe')[0];
305     frame.style.width = '100px';
306     frame.style.height = '100px';
307     switch (select.selectedIndex) {
308     case 0:
309         openCalendar(englishArguments);
310         break;
311     case 1:
312         openCalendar(japaneseArguments);
313         break;
314     case 2:
315         openCalendar(arabicArguments);
316         break;
317     case 3:
318         openCalendar(datalistArguments);
319         break;
320     case 4:
321         openCalendar(longDatalistArguments);
322         break;
323     case 5:
324         openCalendar(arabicDatalistArguments);
325         break;
326     case 6:
327         openCalendar(arabicLongDatalistArguments);
328         break;
329     case 7:
330         openCalendar(monthArguments);
331         break;
332     }
333 }
334
335 function log(str) {
336     var entry = document.createElement('li');
337     entry.innerText = str;
338     document.getElementById('console').appendChild(entry);
339 }
340
341 openCalendar(englishArguments);
342 </script>
343 </body>
344 </html>