[ Index ] |
PHP Cross Reference of vtigercrm-6.1.0 |
[Summary view] [Print] [Text view]
1 Timepicker Plugin for jQuery 2 ======================== 3 4 [<img src="http://jonthornton.github.com/jquery-timepicker/lib/screenshot.png" alt="timepicker screenshot" />](http://jonthornton.github.com/jquery-timepicker) 5 6 [See a demo and examples here](http://jonthornton.github.com/jquery-timepicker) 7 8 jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.5kb minified and gzipped. 9 10 Requirements 11 ------------ 12 * [jQuery](http://jquery.com/) (>= 1.7) 13 14 Usage 15 ----- 16 17 ```javascript 18 $('.some-time-inputs').timepicker(options); 19 ``` 20 21 ```options``` is an optional javascript object with parameters explained below. 22 23 Options 24 ------- 25 26 - **className** 27 A class name to apply to the HTML element that contains the timepicker dropdown. 28 *default: null* 29 30 - **minTime** 31 The time that should appear first in the dropdown list. 32 *default: 12:00am* 33 34 - **maxTime** 35 The time that should appear last in the dropdown list. Can be used to limit the range of time options. 36 *default: 24 hours after minTime* 37 38 - **showDuration** 39 Shows the relative time for each item in the dropdown. ```minTime``` or ```durationTime``` must be set. 40 *default: false* 41 42 - **durationTime** 43 The time against which ```showDuration``` will compute relative times. 44 *default: minTime* 45 46 - **step** 47 The amount of time, in minutes, between each item in the dropdown. 48 *default: 30* 49 50 - **timeFormat** 51 How times should be displayed in the list and input element. Uses [PHP's date() formatting syntax](http://php.net/manual/en/function.date.php). 52 *default: 'g:ia'* 53 54 - **scrollDefaultNow** 55 If no time value is selected, set the dropdown scroll position to show the current time. 56 *default: false* 57 58 - **selectOnBlur** 59 Update the input with the currently highlighted time value when the timepicker loses focus. 60 *default: false* 61 62 - **appendTo** 63 Override where the dropdown is appended. 64 Takes either a `string` to use as a selector, a `function` that gets passed the clicked input element as argument or a jquery `object` to use directly 65 *default: "body"* 66 67 - **lang** 68 Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs. 69 *default:* ```{ 70 decimal: '.', 71 mins: 'mins', 72 hr: 'hr', 73 hrs: 'hrs' 74 }``` 75 76 77 78 Methods 79 ------- 80 81 - **getTime** 82 Get the time using a Javascript Date object, relative to today's date. 83 84 ```javascript 85 $('#getTimeExample').timepicker('getTime'); 86 ``` 87 88 You can get the time as a string using jQuery's built-in ```val()``` function: 89 90 ```javascript 91 $('#getTimeExample').val(); 92 ``` 93 94 - **getSecondsFromMidnight** 95 Get the time as an integer, expressed as seconds from 12am. 96 97 ```javascript 98 $('#getTimeExample').timepicker('getSecondsFromMidnight'); 99 ``` 100 101 - **setTime** 102 Set the time using a Javascript Date object. 103 104 ```javascript 105 $('#setTimeExample').timepicker('setTime', new Date()); 106 ``` 107 108 - **option** 109 Change the settings of an existing timepicker. 110 111 ```javascript 112 $('#optionExample').timepicker({ 'timeFormat': 'g:ia' }); 113 $('#optionExample').timepicker('option', 'minTime', '2:00am'); 114 $('#optionExample').timepicker('option', { 'minTime': '4:00am', 'timeFormat': 'H:i' }); 115 ``` 116 117 - **remove** 118 Unbind an existing timepicker element. 119 120 ```javascript 121 $('#removeExample').timepicker('remove'); 122 ``` 123 124 Events 125 ------ 126 127 - **showTimepicker** 128 Called when the timepicker is shown. 129 130 - **hideTimepicker** 131 Called when the timepicker is closed. 132 133 - **changeTime** 134 Called when a time value is selected. 135 136 - **timeFormatError** 137 Called if an unparseable time string is manually entered into the timepicker input. 138 139 Theming 140 ------- 141 142 Sample markup with class names: 143 144 ```html 145 <span class="ui-timepicker-container"> 146 <input value="5:00pm" class="ui-timepicker-input" type="text"> 147 <ul class="ui-timepicker-list optional-custom-classname" tabindex="-1"> 148 <li>12:00am</li> 149 <li>12:30am</li> 150 ... 151 <li>4:30pm</li> 152 <li class="ui-timepicker-selected">5:00pm</li> 153 <li>5:30pm</li> 154 ... 155 <li>11:30pm</li> 156 </ul> 157 </span> 158 ``` 159 160 Development guidelines 161 ---------------------- 162 163 1. Install dependencies (jquery + grunt) `npm install` 164 2. For sanity checks and minification run `grunt`, or just `grunt lint` to have the code linted 165 166 - - - 167 168 This software is made available under the open source MIT License. © 2012 [Jon Thornton](http://www.jonthornton.com), contributions from [Anthony Fojas](https://github.com/fojas), [Vince Mi](https://github.com/vinc3m1), [Nikita Korotaev](https://github.com/websirnik), [Spoon88](https://github.com/Spoon88), [elarkin](https://github.com/elarkin), [lodewijk](https://github.com/lodewijk), [jayzawrotny](https://github.com/jayzawrotny), [David Mazza](https://github.com/dmzza), [Matt Jurik](https://github.com/exabytes18), [Phil Freo](https://github.com/philfreo), [orloffv](https://github.com/orloffv), [patdenice](https://github.com/patdenice), [Raymond Julin](https://github.com/nervetattoo)
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 |