third_party/WebKit/ManualTests/forms/date-suggestion-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 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/web/resources/pickerCommon.css?' + (new Date()).getTime();
 198     doc.head.appendChild(commonCssLink);
 199     var buttonCssLink = doc.createElement('link');
 200     buttonCssLink.rel = 'stylesheet';
 201     buttonCssLink.href = '../../Source/web/resources/pickerButton.css?' + (new Date()).getTime();
 202     doc.head.appendChild(buttonCssLink);
 203     var suggestionPickerCssLink = doc.createElement('link');
 204     suggestionPickerCssLink.rel = 'stylesheet';
 205     suggestionPickerCssLink.href = '../../Source/web/resources/suggestionPicker.css?' + (new Date()).getTime();
 206     doc.head.appendChild(suggestionPickerCssLink);
 207     var link = doc.createElement('link');
 208     link.rel = 'stylesheet';
 209     link.href = '../../Source/web/resources/calendarPicker.css?' + (new Date()).getTime();
 210     doc.head.appendChild(link);
 211     var commonJsScript = doc.createElement('script');
 212     commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Date()).getTime();
 213     doc.body.appendChild(commonJsScript);
 214     var suggestionPickerJsScript = doc.createElement('script');
 215     suggestionPickerJsScript.src = '../../Source/web/resources/suggestionPicker.js?' + (new Date()).getTime();
 216     doc.body.appendChild(suggestionPickerJsScript);
 217     var script = doc.createElement('script');
 218     script.src = '../../Source/web/resources/calendarPicker.js?' + (new Date()).getTime();
 219     doc.body.appendChild(script);
 220
 221     var pagePopupController = {
 222         setValueAndClosePopup: function(numValue, stringValue) {
 223             window.log('number=' + numValue + ', string="' + stringValue + '"');
 224             if (numValue == 0)
 225                 window.document.getElementById('date').value = stringValue;
 226         },
 227         localizeNumberString: function(numString) {
 228             if (typeof numString == "number")
 229                 return numString.toLocaleString();
 230             return numString.toString();
 231         },
 232         histogramEnumeration: function() {},
 233         formatMonth: function(year, zeroBaseMonth) {
 234             var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
 235                                '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
 236             return monthLabels[zeroBaseMonth] + " " + year;
 237         }
 238     }
 239
 240     setTimeout(function() {
 241         frame.contentWindow.postMessage(JSON.stringify(args), "*");
 242         frame.contentWindow.pagePopupController = pagePopupController;
 243     }, 100);
 244 }
 245
 246 function selected(select) {
 247     var frame = document.getElementsByTagName('iframe')[0];
 248     frame.style.width = '100px';
 249     frame.style.height = '100px';
 250     switch (select.selectedIndex) {
 251     case 0:
 252         openCalendar(datalistArguments);
 253         break;
 254     case 1:
 255         openCalendar(longDatalistArguments);
 256         break;
 257     case 2:
 258         openCalendar(arabicDatalistArguments);
 259         break;
 260     case 3:
 261         openCalendar(arabicLongDatalistArguments);
 262         break;
 263     }
 264 }
 265
 266 function log(str) {
 267     var entry = document.createElement('li');
 268     entry.innerText = str;
 269     document.getElementById('console').appendChild(entry);
 270 }
 271
 272 openCalendar(englishArguments);
 273 </script>
 274 </body>
 275 </html>