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