bugtest-hidden-selects.html 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
  2. <head>
  3. <title>Bug</title>
  4. <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-1.css" title="win2k-1" />
  5. <!-- import the calendar script -->
  6. <script type="text/javascript" src="calendar.js"></script>
  7. <!-- import the language module -->
  8. <script type="text/javascript" src="lang/calendar-en.js"></script>
  9. <!-- helper script that uses the calendar -->
  10. <script type="text/javascript">
  11. // This function gets called when the end-user clicks on some date.
  12. function selected(cal, date) {
  13. cal.sel.value = date; // just update the date in the input field.
  14. if (cal.sel.id == "sel1" || cal.sel.id == "sel3")
  15. // if we add this call we close the calendar on single-click.
  16. // just to exemplify both cases, we are using this only for the 1st
  17. // and the 3rd field, while 2nd and 4th will still require double-click.
  18. cal.callCloseHandler();
  19. }
  20. // And this gets called when the end-user clicks on the _selected_ date,
  21. // or clicks on the "Close" button. It just hides the calendar without
  22. // destroying it.
  23. function closeHandler(cal) {
  24. cal.hide(); // hide the calendar
  25. }
  26. // This function shows the calendar under the element having the given id.
  27. // It takes care of catching "mousedown" signals on document and hiding the
  28. // calendar if the click was outside.
  29. function showCalendar(id, format) {
  30. var el = document.getElementById(id);
  31. if (calendar != null) {
  32. // we already have some calendar created
  33. calendar.hide(); // so we hide it first.
  34. } else {
  35. // first-time call, create the calendar.
  36. var cal = new Calendar(false, null, selected, closeHandler);
  37. // uncomment the following line to hide the week numbers
  38. // cal.weekNumbers = false;
  39. calendar = cal; // remember it in the global var
  40. cal.setRange(1900, 2070); // min/max year allowed.
  41. cal.create();
  42. }
  43. calendar.setDateFormat(format); // set the specified date format
  44. calendar.parseDate(el.value); // try to parse the text in field
  45. calendar.sel = el; // inform it what input field we use
  46. calendar.showAtElement(el); // show the calendar below it
  47. return false;
  48. }
  49. var MINUTE = 60 * 1000;
  50. var HOUR = 60 * MINUTE;
  51. var DAY = 24 * HOUR;
  52. var WEEK = 7 * DAY;
  53. // If this handler returns true then the "date" given as
  54. // parameter will be disabled. In this example we enable
  55. // only days within a range of 10 days from the current
  56. // date.
  57. // You can use the functions date.getFullYear() -- returns the year
  58. // as 4 digit number, date.getMonth() -- returns the month as 0..11,
  59. // and date.getDate() -- returns the date of the month as 1..31, to
  60. // make heavy calculations here. However, beware that this function
  61. // should be very fast, as it is called for each day in a month when
  62. // the calendar is (re)constructed.
  63. function isDisabled(date) {
  64. var today = new Date();
  65. return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
  66. }
  67. </script>
  68. </head>
  69. <body>
  70. <form>
  71. <b>Date:</b>
  72. <br>
  73. <input type="text" name="date1" id="sel1" size="30">
  74. <input type="button" value="..." onclick="return showCalendar('sel1', 'y-m-d');">
  75. <p>
  76. <br>
  77. <br><b>Visible &lt;select&gt;, hides and unhides as expected</b>
  78. <br>
  79. <select name="foo" multiple>
  80. <option value="1">can use the functions date.getFullYear() -- returns</option>
  81. <option value="2">4 digit number, date.getMonth() -- returns the month</option>
  82. <option value="3">heavy calculations here. However, beware that this</option>
  83. </select>
  84. <p>
  85. <br><b>Hidden &lt;select&gt;, it should stay hidden (but doesn't)</b>
  86. <br>
  87. <select name="foo2" multiple style="visibility: hidden">
  88. <option value="1">this should</option>
  89. <option value="2">remain hidden right?</option>
  90. </select>
  91. <p>
  92. <br><b>Hidden textbox below, it stays hidden as expected</b>
  93. <br>
  94. <input type="text" name="foo3" value="this stays hidden just fine" style="visibility: hidden">
  95. </form>
  96. </body></html>