<!DOCTYPE html PUBLIC "-//WHATWG//NONSGML HTML5//EN">
<html>
 <head>
  <title>Date Control Demo 01</title>
  <style type="text/css">
   fieldset { padding: 1em; }
  </style>
  <script type="text/javascript">
   var nowInput;
   function fixupHints() {
     if (!(typeof document == 'object') ||
         !document.getElementsByTagName) return;
     var inputs = document.getElementsByTagName('input');
     for (var i = 0; i < inputs.length; ++i) {
       if (inputs[i].name == 'timezone') {
         inputs[i].value = -(new Date).getTimezoneOffset() / 60;
         continue;
       }

       if (inputs[i].name == 'now') {
         nowInput = inputs[i];
         continue;
       }
     }
   }
   function fixupSubmit() {
     if (nowInput)
       nowInput.value = ((new Date).valueOf() / 1000).toFixed();
   }
  </script>
 </head>
 <body onload="fixupHints()">

  <p>This form uses some of the date and time controls of Web Forms 2
  for data entry, with server-side fallback for legacy clients. You
  can see <a href="test-source">the source of the script</a> if you
  are curious to see how this was implemented.</p>
  <form action="test" method="get" onsubmit="fixupSubmit()">
   <fieldset>
    <legend>Time between two times</legend>
    <p>
     <label>
      First date and time:
      <input type="datetime" name="t1" required="required">
      <format applyon="entry">DD/MM/YYYY HH:MM</format>
     </label>
    </p>
    <p>
     <label>
      Second date and time:
      <input type="datetime" name="t2" required="required">
      <format applyon="entry">DD/MM/YYYY HH:MM</format>
     </label>
    </p>
    <p>
     <input type="submit" value="Calculate">
    </p>
   </fieldset>

   <!-- XXX add more fieldsets here with other demos -->
   <input type="hidden" name="timezone" value="unknown">
   <input type="hidden" name="now" value="unknown">
  </form>
 </body>
</html>