| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset=utf-8> |
| <title>Calendar Picker test</title> |
| <style> |
| body { |
| background-color: #eeffff; |
| } |
| 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> |
| <select onchange="selected(this)"> |
| <option>English</option> |
| <option>Japanese</option> |
| <option>Arabic</option> |
| </select> |
| |
| <div><input type="text" id="date"></div> |
| <iframe></iframe> |
| |
| <ol id="console" style="font-family:monospace;"> |
| </ol> |
| |
| <script> |
| var englishArguments = { |
| locale: 'en-US', |
| monthLabels : ['January', 'February', 'March', 'April', 'May', 'June', |
| 'July', 'August', 'September', 'October', 'November', 'December'], |
| dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], |
| todayLabel : 'Today', |
| clearLabel : 'Clear', |
| cancelLabel : 'Cancel', |
| weekStartDay : 0, |
| step : 1, |
| max : '2099-12-31', |
| }; |
| var japaneseArguments = { |
| locale: 'ja-JP', |
| monthLabels : ['1月', '2月', '3月', '4月', '5月', '6月', |
| '7月', '8月', '9月', '10月', '11月', '12月'], |
| dayLabels : ['日', '月', '火', '水', '木', '金', '土'], |
| todayLabel : '今日', |
| clearLabel : 'クリア', |
| cancelLabel : '取り消し', |
| weekStartDay : 0, |
| step : 1, |
| max : '2099-03-15', |
| }; |
| var arabicArguments = { |
| locale: 'ar', |
| isRTL: true, |
| monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', |
| 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'], |
| dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'], |
| todayLabel : 'اليوم', |
| clearLabel : 'مسح', |
| weekStartDay : 5, |
| step : 1, |
| max : '2020-05-15', |
| }; |
| |
| function openCalendar(args) { |
| 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/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime(); |
| doc.head.appendChild(commonCssLink); |
| var link = doc.createElement('link'); |
| link.rel = 'stylesheet'; |
| link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime(); |
| doc.head.appendChild(link); |
| var commonJsScript = doc.createElement('script'); |
| commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime(); |
| doc.body.appendChild(commonJsScript); |
| var script = doc.createElement('script'); |
| script.src = '../../Source/WebCore/Resources/pagepopups/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; |
| }, |
| localizeNumberString: function(numString) { |
| if (typeof numString == "number") |
| return numString.toLocaleString(); |
| return numString.toString(); |
| } |
| } |
| |
| setTimeout(function() { |
| frame.contentWindow.postMessage(JSON.stringify(args), "*"); |
| frame.contentWindow.pagePopupController = pagePopupController; |
| }, 100); |
| } |
| |
| function selected(select) { |
| var frame = document.getElementsByTagName('iframe')[0]; |
| frame.style.width = '100px'; |
| frame.style.height = '100px'; |
| switch (select.selectedIndex) { |
| case 0: |
| openCalendar(englishArguments); |
| break; |
| case 1: |
| openCalendar(japaneseArguments); |
| break; |
| case 2: |
| openCalendar(arabicArguments); |
| break; |
| } |
| } |
| |
| function log(str) { |
| var entry = document.createElement('li'); |
| entry.innerText = str; |
| document.getElementById('console').appendChild(entry); |
| } |
| |
| openCalendar(englishArguments); |
| </script> |
| </body> |
| </html> |
