| [ Index ] |
PHP Cross Reference of vtigercrm-6.1.0 |
[Summary view] [Print] [Text view]
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 6 <title>Timepicker for jQuery – Demos and Documentation</title> 7 <meta name="description" content="A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar. Add a user-friendly timepicker dropdown to your app in minutes." /> 8 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 9 10 <script type="text/javascript" src="jquery.timepicker.js"></script> 11 <link rel="stylesheet" type="text/css" href="jquery.timepicker.css" /> 12 13 <script type="text/javascript" src="lib/base.js"></script> 14 <link rel="stylesheet" type="text/css" href="lib/base.css" /> 15 16 </head> 17 18 <body> 19 20 <div id="container"> 21 22 23 <h1><a href="https://github.com/jonthornton/jquery-timepicker">jquery.timepicker</a></h1> 24 <div class="description"> 25 A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar. 26 </div> 27 28 <p>Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.5kb minified and gzipped) and easy to customize. 29 <a href="https://github.com/jonthornton/jquery-timepicker">View the source code on GitHub</a> or <a href="https://github.com/jonthornton/jquery-timepicker/zipball/master">download (zip)</a>. 30 </p> 31 32 <p><a href="https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery">Full documentation available here</a></p> 33 34 <div class="example"> 35 <script> 36 $(function() { 37 $('#basicExample').timepicker(); 38 }); 39 </script> 40 41 <h3>Basic Example</h3> 42 <p><input id="basicExample" type="text" class="time" /></p> 43 44 <pre class="code" data-language="javascript">$('#basicExample').timepicker();</pre> 45 </div> 46 47 48 49 50 51 <div class="example"> 52 <script> 53 $(function() { 54 $('#defaultValueExample').timepicker({ 'scrollDefaultNow': true }) 55 }); 56 </script> 57 58 <h3>Scroll Default Example</h3> 59 <p>Set the scroll position to local time if no value selected.</p> 60 <p><input id="defaultValueExample" type="text" class="time" /></p> 61 62 <pre class="code" data-language="javascript">$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });</pre> 63 </div> 64 65 66 67 68 69 <div class="example"> 70 <script> 71 $(function() { 72 $('#setTimeExample').timepicker(); 73 $('#setTimeButton').on('click', function (){ 74 $('#setTimeExample').timepicker('setTime', new Date()); 75 }); 76 }); 77 </script> 78 79 <h3>Set Time Example</h3> 80 <p>Dynamically set the time using a Javascript Date object.</p> 81 <p> 82 <input id="setTimeExample" type="text" class="time" /> 83 <button id="setTimeButton">Set current time</button> 84 </p> 85 86 <pre class="code" data-language="javascript">$('#setTimeExample').timepicker(); 87 $('#setTimeButton').on('click', function (){ 88 $('#setTimeExample').timepicker('setTime', new Date()); 89 });</pre> 90 </div> 91 92 93 94 95 96 <div class="example"> 97 <script> 98 $(function() { 99 $('#durationExample').timepicker({ 'minTime': '2:00pm', 'maxTime': '11:30pm', 'showDuration': true }); 100 }); 101 </script> 102 103 <h3>Duration Example</h3> 104 <p>Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.</p> 105 <p><input id="durationExample" type="text" class="time" /></p> 106 107 <pre class="code" data-language="javascript">$('#durationExample').timepicker({ 108 'minTime': '2:00pm', 109 'maxTime': '11:30pm', 110 'showDuration': true 111 });</pre> 112 </div> 113 114 115 116 117 <div class="example"> 118 <script> 119 $(function() { 120 $('#onselectExample').timepicker(); 121 $('#onselectExample').on('changeTime', function() { 122 $('#onselectTarget').text($(this).val()); 123 }); 124 }); 125 </script> 126 127 <h3>Event Example</h3> 128 <p>Trigger an event after selecting a value. Fires before the input onchange event.</p> 129 <p> 130 <input id="onselectExample" type="text" class="time" /> 131 <span id="onselectTarget" style="margin-left: 30px;"></span> 132 </p> 133 134 <pre class="code" data-language="javascript">$('#onselectExample').timepicker(); 135 $('#onselectExample').on('changeTime', function() { 136 $('#onselectTarget').text($(this).val()); 137 });</pre> 138 </div> 139 140 141 142 143 144 <div class="example"> 145 <script> 146 $(function() { 147 $('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' }); 148 $('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' }); 149 }); 150 </script> 151 152 <h3>timeFormat Example</h3> 153 <p>timepicker.jquery uses the time portion of <a href="http://php.net/manual/en/function.date.php">PHP's date formatting commands</a>.</p> 154 <p><input id="timeformatExample1" type="text" class="time" /> <input id="timeformatExample2" type="text" class="time" /></p> 155 156 <pre class="code" data-language="javascript">$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' }); 157 $('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });</pre> 158 </div> 159 160 161 162 163 164 <div class="example"> 165 <script> 166 $(function() { 167 $('#stepExample1').timepicker({ 'step': 15 }); 168 $('#stepExample2').timepicker({ 'step': 60 }); 169 }); 170 </script> 171 172 <h3>Step Example</h3> 173 <p>Generate drop-down options with varying levels of precision.</p> 174 <p><input id="stepExample1" type="text" class="time" /> <input id="stepExample2" type="text" class="time" /></p> 175 176 <pre class="code" data-language="javascript">$('#stepExample1').timepicker({ 'step': 15 }); 177 $('#stepExample2').timepicker({ 'step': 60 });</pre> 178 </div> 179 180 181 182 183 184 <div class="example"> 185 <script> 186 $(function() { 187 $('#selectButton').click(function(e) { 188 e.preventDefault(); 189 $('#selectExample').timepicker(); 190 $(this).hide(); 191 }); 192 }); 193 </script> 194 195 <h3>Select Example</h3> 196 <p>Use jquery-timepicker with <select> elements too.</p> 197 <p><select id="selectExample" class="time"> 198 <option value="12:00am">12:00am</option> 199 <option value="1:00am">1:00am</option> 200 <option value="2:00am">2:00am</option> 201 <option value="3:00am">3:00am</option> 202 <option value="4:00am">4:00am</option> 203 <option value="5:00am">5:00am</option> 204 <option value="6:00am">6:00am</option> 205 <option value="7:00am">7:00am</option> 206 <option value="8:00am">8:00am</option> 207 <option value="9:00am">9:00am</option> 208 <option value="10:00am">10:00am</option> 209 <option value="11:00am">11:00am</option> 210 <option value="12:00pm">12:00pm</option> 211 <option value="1:00pm">1:00pm</option> 212 <option value="2:00pm">2:00pm</option> 213 <option value="3:00pm">3:00pm</option> 214 <option value="4:00pm">4:00pm</option> 215 <option value="5:00pm">5:00pm</option> 216 <option value="6:00pm">6:00pm</option> 217 <option value="7:00pm">7:00pm</option> 218 <option value="8:00pm">8:00pm</option> 219 <option value="9:00pm">9:00pm</option> 220 <option value="10:00pm">10:00pm</option> 221 <option value="11:00pm">11:00pm</option> 222 </select> <button id="selectButton">Convert to timepicker</button></p> 223 224 <pre class="code" data-language="javascript">$('#selectButton').click(function(e) { 225 e.preventDefault(); 226 $('#selectExample').timepicker(); 227 $(this).hide(); 228 });</pre> 229 </div> 230 231 232 233 234 235 <div class="example"> 236 <script src="lib/datepair.js"></script> 237 <h3>Datepair Example</h3> 238 239 <p class="datepair" data-language="javascript"> 240 <input type="text" class="date start" /> 241 <input type="text" class="time start" /> to 242 <input type="text" class="time end" /> 243 <input type="text" class="date end" /> 244 </p> 245 246 <p>Datepair source available <a href="http://jonthornton.github.com/jquery-timepicker/lib/datepair.js">here</a>.</p> 247 </div> 248 249 250 251 252 253 <div class="example" style="background: #ffd;"> 254 <h2>Want to get paid to work on stuff like this?</h2> 255 256 <p>Shameless plug: <a href="http://www.parkwhiz.com">ParkWhiz</a> is looking for talented 257 <a href="http://www.parkwhiz.com/about/jobs/designer/">designers</a> 258 and <a href="http://www.parkwhiz.com/about/jobs/developer/">developers</a> to help us drag the parking industry 259 out of the Stone Age. Visit ParkWhiz's <a href="http://www.parkwhiz.com/about/jobs/">jobs page</a> or email 260 <a href="mailto:[email protected]">[email protected]</a> and introduce yourself!</p> 261 </div> 262 263 <h2>Contact</h2> 264 <p><a href="http://jonthornton.com">Jon Thornton</a> — [lastname].[firstname]@gmail.com</p> 265 266 267 <h2>Download</h2> 268 <p> 269 You can download this project in either 270 <a href="https://github.com/jonthornton/jquery-timepicker/zipball/master">zip</a> or 271 <a href="https://github.com/jonthornton/jquery-timepicker/tarball/master">tar formats</a>. <br /> 272 Get the source code on GitHub: <a href="https://github.com/jonthornton/jquery-timepicker">jonthornton/jquery.timepicker</a> 273 </p> 274 <div class="p">You can also clone the project with <a href="http://git-scm.com">Git</a> 275 by running: 276 <pre>$ git clone git://github.com/jonthornton/jquery-timepicker</pre> 277 </div> 278 279 <div class="footer"> 280 © 2012 <a href="http://jonthornton.com">Jon Thornton</a>, contributions from 281 <a href="https://github.com/fojas">Anthony Fojas</a>, <a href="https://github.com/vinc3m1">Vince Mi</a>, 282 <a href="https://github.com/websirnik">Nikita Korotaev</a>, <a href="https://github.com/Spoon88">Spoon88</a>, 283 <a href="https://github.com/elarkin">elarkin</a>, , <a href="https://github.com/lodewijk">lodewijk</a>, 284 <a href="https://github.com/jayzawrotny">jayzawrotny</a>, <a href="https://github.com/dmzza">David Mazza</a>, 285 <a href="https://github.com/exabytes18">Matt Jurik</a>, <a href="https://github.com/philfreo">Phil Freo</a>, 286 <a href="https://github.com/orloffv">orloffv</a>, <a href="https://github.com/patdenice">patdenice</a>, 287 <a href="https://github.com/nervetattoo">Raymond Julin</a> 288 </div> 289 290 </div> 291 292 <script type="text/javascript"> 293 294 var _gaq = _gaq || []; 295 _gaq.push(['_setAccount', 'UA-15605525-1']); 296 _gaq.push(['_trackPageview']); 297 298 (function() { 299 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 300 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 301 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 302 })(); 303 304 </script> 305 306 </body> 307 </html>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Fri Nov 28 20:08:37 2014 | Cross-referenced by PHPXref 0.7.1 |