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="http://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   <script type="text/javascript">
  78   // Analytics.
  79   var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-123444-3"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()
  80   </script>
  81 </head>
  82
  83 <body>
  84 <h1>jQuery timePicker</h1>
  85 <p>A time picker for jQuery inspired by Google Calendar</p>
  86 <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>
  87
  88 <div><input type="text" id="time1" size="10" /></div>
  89 <pre><code>// Default.
  90 $("#time1").timePicker();</code></pre>
  91
  92 <div><input type="text" id="time2" size="10" value="12.00 PM"/></div>
  93 <pre><code>// 02.00 AM - 03.30 PM, 15 minutes steps.
  94 $("#time2").timePicker({
  95   startTime: "02.00", // Using string. Can take string or Date object.
  96   endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
  97   show24Hours: false,
  98   separator: '.',
  99   step: 15});</code></pre>
 100
 101 <div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div>
 102 <pre><code>// An example how the two helper functions can be used to achieve
 103 // advanced functionality.
 104 // - Linking: When changing the first input the second input is updated and the
 105 //   duration is kept.
 106 // - Validation: If the second input has a time earlier than the firs input,
 107 //   an error class is added.
 108
 109 // Use default settings
 110 $("#time3, #time4").timePicker();
 111
 112 // Store time used by duration.
 113 var oldTime = $.timePicker("#time3").getTime();
 114
 115 // Keep the duration between the two inputs.
 116 $("#time3").change(function() {
 117   if ($("#time4").val()) { // Only update when second input has a value.
 118     // Calculate duration.
 119     var duration = ($.timePicker("#time4").getTime() - oldTime);
 120     var time = $.timePicker("#time3").getTime();
 121     // Calculate and update the time in the second input.
 122     $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
 123     oldTime = time;
 124   }
 125 });
 126 // Validate.
 127 $("#time4").change(function() {
 128   if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
 129     $(this).addClass("error");
 130   }
 131   else {
 132     $(this).removeClass("error");
 133   }
 134 });</code></pre>
 135
 136 </body>
 137 </html>