| <!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 date suggestion picker.</p> |
| <select onchange="selected(this)"> |
| <option>with datalist</option> |
| <option>with long datalist</option> |
| <option>Arabic with datalist</option> |
| <option>Arabic with long datalist</option> |
| </select> |
| |
| <div><input type="text" id="date"></div> |
| <iframe></iframe> |
| |
| <ol id="console" style="font-family:monospace;"> |
| </ol> |
| |
| <script> |
| var datalistArguments = { |
| locale: 'en-US', |
| dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], |
| todayLabel : 'Today', |
| clearLabel : 'Clear', |
| cancelLabel : 'Cancel', |
| weekStartDay : 0, |
| step : "86400000", |
| stepBase: "0", |
| max : '2099-12-31', |
| suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'], |
| localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'], |
| suggestionLabels : ['', 'Birthday', '', 'Christmas'], |
| showOtherDateEntry: true, |
| otherDateLabel: 'Other...', |
| inputWidth: 127, |
| suggestionHighlightColor: "#0000ff", |
| suggestionHighlightTextColor: "#ffffff" |
| }; |
| var longDatalistArguments = { |
| locale: 'en-US', |
| dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], |
| todayLabel : 'Today', |
| clearLabel : 'Clear', |
| cancelLabel : 'Cancel', |
| weekStartDay : 0, |
| step : "86400000", |
| stepBase: "0", |
| max : '2099-12-31', |
| suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04", |
| "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09", |
| "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14", |
| "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19", |
| "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24", |
| "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29", |
| "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03", |
| "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08", |
| "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13", |
| "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18", |
| "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23", |
| "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28", |
| "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04", |
| "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09", |
| "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14", |
| "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19", |
| "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24", |
| "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29", |
| "2012-03-30", "2012-03-31"], |
| localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12", |
| "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12", |
| "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12", |
| "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12", |
| "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12", |
| "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12", |
| "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12", |
| "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12", |
| "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12", |
| "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12", |
| "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12", |
| "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", |
| "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12", |
| "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12", |
| "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"], |
| suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", ""], |
| showOtherDateEntry: true, |
| otherDateLabel: 'Other...', |
| inputWidth: 127, |
| suggestionHighlightColor: "#0000ff", |
| suggestionHighlightTextColor: "#ffffff" |
| }; |
| |
| var arabicDatalistArguments = { |
| locale: 'ar', |
| isRTL: true, |
| isCalendarRTL: true, |
| dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'], |
| todayLabel : 'اليوم', |
| clearLabel : 'مسح', |
| weekStartDay : 5, |
| step : "86400000", |
| stepBase: "0", |
| max : '2020-05-15', |
| suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'], |
| localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'], |
| suggestionLabels : ['', 'Birthday', '', 'Christmas'], |
| showOtherDateEntry: true, |
| otherDateLabel: 'Other...', |
| inputWidth: 127, |
| suggestionHighlightColor: "#0000ff", |
| suggestionHighlightTextColor: "#ffffff" |
| }; |
| |
| var arabicLongDatalistArguments = { |
| locale: 'ar', |
| isRTL: true, |
| isCalendarRTL: true, |
| dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'], |
| todayLabel : 'اليوم', |
| clearLabel : 'مسح', |
| weekStartDay : 5, |
| step : "86400000", |
| stepBase: "0", |
| max : '2020-05-15', |
| suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04", |
| "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09", |
| "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14", |
| "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19", |
| "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24", |
| "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29", |
| "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03", |
| "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08", |
| "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13", |
| "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18", |
| "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23", |
| "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28", |
| "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04", |
| "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09", |
| "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14", |
| "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19", |
| "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24", |
| "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29", |
| "2012-03-30", "2012-03-31"], |
| localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12", |
| "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12", |
| "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12", |
| "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12", |
| "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12", |
| "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12", |
| "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12", |
| "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12", |
| "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12", |
| "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12", |
| "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12", |
| "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", |
| "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12", |
| "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12", |
| "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"], |
| suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", |
| "", "", "", "", "", "", "", ""], |
| showOtherDateEntry: true, |
| otherDateLabel: 'Other...', |
| inputWidth: 127, |
| suggestionHighlightColor: "#0000ff", |
| suggestionHighlightTextColor: "#ffffff" |
| }; |
| |
| 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/web/resources/pickerCommon.css?' + (new Date()).getTime(); |
| doc.head.appendChild(commonCssLink); |
| var buttonCssLink = doc.createElement('link'); |
| buttonCssLink.rel = 'stylesheet'; |
| buttonCssLink.href = '../../Source/web/resources/pickerButton.css?' + (new Date()).getTime(); |
| doc.head.appendChild(buttonCssLink); |
| var suggestionPickerCssLink = doc.createElement('link'); |
| suggestionPickerCssLink.rel = 'stylesheet'; |
| suggestionPickerCssLink.href = '../../Source/web/resources/suggestionPicker.css?' + (new Date()).getTime(); |
| doc.head.appendChild(suggestionPickerCssLink); |
| var link = doc.createElement('link'); |
| link.rel = 'stylesheet'; |
| link.href = '../../Source/web/resources/calendarPicker.css?' + (new Date()).getTime(); |
| doc.head.appendChild(link); |
| var commonJsScript = doc.createElement('script'); |
| commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Date()).getTime(); |
| doc.body.appendChild(commonJsScript); |
| var suggestionPickerJsScript = doc.createElement('script'); |
| suggestionPickerJsScript.src = '../../Source/web/resources/suggestionPicker.js?' + (new Date()).getTime(); |
| doc.body.appendChild(suggestionPickerJsScript); |
| var script = doc.createElement('script'); |
| script.src = '../../Source/web/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; |
| }, |
| 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; |
| } |
| } |
| |
| 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(datalistArguments); |
| break; |
| case 1: |
| openCalendar(longDatalistArguments); |
| break; |
| case 2: |
| openCalendar(arabicDatalistArguments); |
| break; |
| case 3: |
| openCalendar(arabicLongDatalistArguments); |
| break; |
| } |
| } |
| |
| function log(str) { |
| var entry = document.createElement('li'); |
| entry.innerText = str; |
| document.getElementById('console').appendChild(entry); |
| } |
| |
| openCalendar(englishArguments); |
| </script> |
| </body> |
| </html> |
