dav/timepicker/index.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   3 <head>
   4   <title>jQuery timePicker</title>
   5  <style type="text/css" media="all">@import "timePicker.css";</style>
   6   <style type="text/css">
   7   div {
   8     margin-top:3em;
   9   }
  10   input {
  11   margin:0;
  12   padding:0;
  13   }
  14   body {
  15     background: #eee;
  16   }
  17   pre {
  18     background:#fff;
  19     border:1px solid #ddd;
  20     padding:4px;
  21   }
  22   .error {
  23     border:1px solid red;
  24   }
  25   </style>
  26
  27   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  28   <script type="text/javascript" src="jquery.timePicker.js"></script>
  29   <script type="text/javascript">
  30   jQuery(function() {
  31     // Default.
  32     $("#time1").timePicker();
  33     // 02.00 AM - 03.30 PM, 15 minutes steps.
  34     $("#time2").timePicker({
  35   startTime: "02.00",  // Using string. Can take string or Date object.
  36   endTime: new Date(0, 0, 0, 15, 30, 0),  // Using Date object.
  37   show24Hours: false,
  38   separator:'.',
  39   step: 15});
  40
  41     // An example how the two helper functions can be used to achieve
  42     // advanced functionality.
  43     // - Linking: When changing the first input the second input is updated and the
  44     //   duration is kept.
  45     // - Validation: If the second input has a time earlier than the firs input,
  46     //   an error class is added.
  47
  48     // Use default settings
  49     $("#time3, #time4").timePicker();
  50
  51     // Store time used by duration.
  52     var oldTime = $.timePicker("#time3").getTime();
  53
  54     // Keep the duration between the two inputs.
  55     $("#time3").change(function() {
  56       if ($("#time4").val()) { // Only update when second input has a value.
  57         // Calculate duration.
  58         var duration = ($.timePicker("#time4").getTime() - oldTime);
  59         var time = $.timePicker("#time3").getTime();
  60         // Calculate and update the time in the second input.
  61         $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
  62         oldTime = time;
  63       }
  64     });
  65     // Validate.
  66     $("#time4").change(function() {
  67       if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
  68         $(this).addClass("error");
  69       }
  70       else {
  71         $(this).removeClass("error");
  72       }
  73     });
  74
  75   });
  76   </script>
  77 </head>
  78
  79 <body>
  80 <h1>jQuery timePicker</h1>
  81 <p>A time picker for jQuery inspired by Google Calendar</p>
  82 <p>Get the latest code on Github (the files used on this page might not be the latest): <a href="http://github.com/perifer/timePicker">http://github.com/perifer/timePicker</a>
  83
  84 <div><input type="text" id="time1" size="10" /></div>
  85 <pre><code>// Default.
  86 $("#time1").timePicker();</code></pre>
  87
  88 <div><input type="text" id="time2" size="10" value="12.00 PM"/></div>
  89 <pre><code>// 02.00 AM - 03.30 PM, 15 minutes steps.
  90 $("#time2").timePicker({
  91   startTime: "02.00", // Using string. Can take string or Date object.
  92   endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
  93   show24Hours: false,
  94   separator: '.',
  95   step: 15});</code></pre>
  96
  97 <div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div>
  98 <pre><code>// An example how the two helper functions can be used to achieve
  99 // advanced functionality.
 100 // - Linking: When changing the first input the second input is updated and the
 101 //   duration is kept.
 102 // - Validation: If the second input has a time earlier than the firs input,
 103 //   an error class is added.
 104
 105 // Use default settings
 106 $("#time3, #time4").timePicker();
 107
 108 // Store time used by duration.
 109 var oldTime = $.timePicker("#time3").getTime();
 110
 111 // Keep the duration between the two inputs.
 112 $("#time3").change(function() {
 113   if ($("#time4").val()) { // Only update when second input has a value.
 114     // Calculate duration.
 115     var duration = ($.timePicker("#time4").getTime() - oldTime);
 116     var time = $.timePicker("#time3").getTime();
 117     // Calculate and update the time in the second input.
 118     $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
 119     oldTime = time;
 120   }
 121 });
 122 // Validate.
 123 $("#time4").change(function() {
 124   if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
 125     $(this).addClass("error");
 126   }
 127   else {
 128     $(this).removeClass("error");
 129   }
 130 });</code></pre>
 131
 132 </body>
 133 </html>