Home | History | Annotate | Download | only in forms 
      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 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>
     36 var 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 };
     55 var 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 
    112 var 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 
    133 var 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 
    191 function 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 
    250 function 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 
    270 function log(str) {
    271     var entry = document.createElement('li');
    272     entry.innerText = str;
    273     document.getElementById('console').appendChild(entry);
    274 }
    275 
    276 openCalendar(englishArguments);
    277 </script>
    278 </body>
    279 </html>
    280