third-party/timepicker-addon-1.2/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   3         <head>
   4                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   5                 <title>Adding a Timepicker to jQuery UI Datepicker</title>
   6                 <meta name="Description" content="jQuery Timepicker Addon.  Add a timepicker to your jQuery UI Datepicker.  With options to show only time, format time, and much more." />
   7                 <meta name="Keywords" content="jQuery, UI, datepicker, timepicker, datetime, time, format" />
   8
   9                 <style type="text/css">
  10                         body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{
  11                                 margin:0;
  12                                 padding:0;
  13                                 border:0;
  14                         }
  15                         body{ background-color: #777; border-top: solid 10px #7b94b2; font: 90% Arial, Helvetica, sans-serif; padding: 20px; }
  16                         h1,h2,h3{ margin: 10px 0; }
  17                         h1{}
  18                         h2{ color: #f66; }
  19                         h3{ color: #6b84a2; }
  20                         p{ margin: 10px 0; }
  21                         a{ color: #7b94b2; }
  22                         ul,ol{ margin: 10px 0 10px 40px; }
  23                         li{ margin: 4px 0; }
  24                         dl.defs{ margin: 10px 0 10px 40px; }
  25                         dl.defs dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; }
  26                         dl.defs dd{ margin: -20px 0 10px 160px; padding-bottom: 10px; border-bottom: solid 1px #eee;}
  27                         pre{ font-size: 12px; line-height: 16px; padding: 5px 5px 5px 10px; margin: 10px 0; background-color: #e4f4d4; border-left: solid 5px #9EC45F; overflow: auto; }
  28
  29                         .wrapper{ background-color: #ffffff; width: 800px; border: solid 1px #eeeeee; padding: 20px; margin: 0 auto; }
  30                         #tabs{ margin: 20px -20px; border: none; }
  31                         #tabs, #ui-datepicker-div, .ui-datepicker{ font-size: 85%; }
  32                         .clear{ clear: both; }
  33
  34                         .example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 20px 40px; padding: 20px; }
  35                         .example-container input{ border: solid 1px #aaa; padding: 4px; width: 175px; }
  36                 </style>
  37
  38                 <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" />
  39                 <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
  40
  41                 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  42                 <script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
  43                 <script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
  44                 <script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
  45                 <script type="text/javascript">
  46
  47                         $(function(){
  48                                 $('#tabs').tabs();
  49
  50                                 $('.example-container > pre').each(function(i){
  51                                         eval($(this).text());
  52                                 });
  53                         });
  54
  55                 </script>
  56         </head>
  57         <body>
  58                 <div class="wrapper">
  59                         <h1>Adding a Timepicker to jQuery UI Datepicker</h1>
  60
  61                         <p>The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these.  In addition all datepicker options are still available through the timepicker addon.</p>
  62
  63                         <p>If you are interested in contributing to Timepicker Addon please <a href="http://github.com/trentrichardson/jQuery-Timepicker-Addon" title="Check out Timepicker on GitHub">check it out on GitHub</a>.  If you do make additions please keep in mind I enjoy tabs over spaces,.. But contributions are welcome in any form.</p>
  64
  65                         <p><a href="http://trentrichardson.com" title="Back to Blog">Back to Blog</a> or <a href="http://twitter.com/practicalweb" title="Follow Me on Twitter">Follow on Twitter</a></p>
  66
  67                         <a href="http://carbounce.com" title="Car Bounce" style="float: right;display: inline-block;width:380px;padding: 10px;background-color: #fbfbfb;border: dotted 4px #e8e8e8;color: #9EC45F;font-size: 16px;text-decoration:none;letter-spacing:1px;"><img src="http://carbounce.com/img/logo_small.png" alt="Car Bounce" align="left" style="margin-right: 20px;"/>Try my new app to keep you informed of your car's financing status and value.</a>
  68
  69                         <h2>Donation</h2>
  70                         <p>Has this Timepicker Addon been helpful to you?</p>
  71                         <div class="donation">
  72                                 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  73                                 <input type="hidden" name="cmd" value="_s-xclick">
  74                                 <input type="hidden" name="hosted_button_id" value="C2QQHR7JQGD28">
  75                                 <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
  76                                 <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
  77                                 </form>
  78                         </div>
  79
  80                         <div id="tabs">
  81                                 <ul>
  82                                         <li><a href="#tp-getting-started" title="Getting Started">Getting Started</a></li>
  83                                         <li><a href="#tp-options" title="Options">Options</a></li>
  84                                         <li><a href="#tp-formatting" title="Examples">Formatting</a></li>
  85                                         <li><a href="#tp-localization" title="Examples">Localization</a></li>
  86                                         <li><a href="#tp-examples" title="Examples">Examples</a></li>
  87                                 </ul>
  88
  89                                 <!-- ############################################################################# -->
  90                                 <!-- Getting Started
  91                                 <!-- ############################################################################# -->
  92                                 <div id="tp-getting-started">
  93                                         <h2>Getting Started</h2>
  94
  95                                         <h3>Highly Recommended</h3>
  96                                         <p><a href="http://trentrichardson.com" title="Subscribe to TrentRichardson.com via email">Subscribe to my blog via email</a> and follow <a href="http://twitter.com/practicalweb" title="Follow Me on Twitter">@PracticalWeb</a> on Twitter.  I post for nearly every new version, so you know about updates.</p>
  97
  98                                         <h3>Download</h3>
  99                                         <p><a href="jquery-ui-timepicker-addon.js" title="Download Timepicker Addon">Download Timepicker Addon</a></p>
 100                                         <p><a href="http://github.com/trentrichardson/jQuery-Timepicker-Addon" title="Check out Timepicker on GitHub">Download/Contribute on GitHub</a> (Need the entire repo? Find a bug? See if its fixed here)</p>
 101                                         <p>There is a small bit of required CSS (<a href="jquery-ui-timepicker-addon.css" title="Download CSS">Download</a>):</p>
 102 <pre>/* css for timepicker */
 103 .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
 104 .ui-timepicker-div dl { text-align: left; }
 105 .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
 106 .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
 107 .ui-timepicker-div td { font-size: 90%; }
 108 .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
 109
 110 .ui-timepicker-rtl{ direction: rtl; }
 111 .ui-timepicker-rtl dl { text-align: right; }
 112 .ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
 113 </pre>
 114
 115                                         <h3>Requirements</h3>
 116                                         <p>You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page in the following order:</p>
 117                                         <ol>
 118                                                 <li>jQuery</li>
 119                                                 <li>jQueryUI (with datepicker and slider wigits)</li>
 120                                                 <li>Timepicker</li>
 121                                         </ol>
 122
 123
 124                                         <h3>Version</h3>
 125                                         <p>Version 1.2</p>
 126
 127                                         <p>Last updated on 02/02/2013</p>
 128                                         <p>jQuery Timepicker Addon is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly. </p>
 129                                         <p><a href="http://trentrichardson.com/Impromptu/GPL-LICENSE.txt" title="GPL License">GPL License</a></p>
 130                                         <p><a href="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt" title="MIT License">MIT License</a></p>
 131
 132                                 </div>
 133
 134                                 <!-- ############################################################################# -->
 135                                 <!-- Options
 136                                 <!-- ############################################################################# -->
 137                                 <div id="tp-options">
 138                                         <h2>Options</h2>
 139
 140                                         <p>The timepicker does inherit all options from datepicker.  However, there are many options that are shared by them both, and many timepicker only options:</p>
 141
 142                                         <h3>Localization Options</h3>
 143                                         <dl class="defs">
 144                                                 <dt>currentText</dt>
 145                                                         <dd><em>Default: "Now", A Localization Setting</em> - Text for the Now button.</dd>
 146
 147                                                 <dt>closeText</dt>
 148                                                         <dd><em>Default: "Done", A Localization Setting</em> - Text for the Close button.</dd>
 149
 150                                                 <dt>amNames</dt>
 151                                                         <dd><em>Default: ['AM', 'A'], A Localization Setting</em> - Array of strings to try and parse against to determine AM.</dd>
 152
 153                                                 <dt>pmNames</dt>
 154                                                         <dd><em>Default: ['PM', 'P'], A Localization Setting</em> - Array of strings to try and parse against to determine PM.</dd>
 155
 156                                                 <dt>timeFormat</dt>
 157                                                         <dd><em>Default: "HH:mm", A Localization Setting</em> - String of format tokens to be replaced with the time. <a href="#tp-formatting" title="Formatting" onclick="$('#tabs').tabs('select',2);">See Formatting</a>.</dd>
 158
 159                                                 <dt>timeSuffix</dt>
 160                                                         <dd><em>Default: "", A Localization Setting</em> - String to place after the formatted time.</dd>
 161
 162                                                 <dt>timeOnlyTitle</dt>
 163                                                         <dd><em>Default: "Choose Time", A Localization Setting</em> - Title of the wigit when using only timepicker.</dd>
 164
 165                                                 <dt>timeText</dt>
 166                                                         <dd><em>Default: "Time", A Localization Setting</em> - Label used within timepicker for the formatted time.</dd>
 167
 168                                                 <dt>hourText</dt>
 169                                                         <dd><em>Default: "Hour", A Localization Setting</em> - Label used to identify the hour slider.</dd>
 170
 171                                                 <dt>minuteText</dt>
 172                                                         <dd><em>Default: "Minute", A Localization Setting</em> - Label used to identify the minute slider.</dd>
 173
 174                                                 <dt>secondText</dt>
 175                                                         <dd><em>Default: "Second", A Localization Setting</em> - Label used to identify the second slider.</dd>
 176
 177                                                 <dt>millisecText</dt>
 178                                                         <dd><em>Default: "Millisecond", A Localization Setting</em> - Label used to identify the millisecond slider.</dd>
 179
 180                                                 <dt>timezoneText</dt>
 181                                                         <dd><em>Default: "Timezone", A Localization Setting</em> - Label used to identify the timezone slider.</dd>
 182
 183                                                 <dt>isRTL</dt>
 184                                                         <dd><em>Default: false, A Localization Setting</em> - Right to Left support.</dd>
 185                                         </dl>
 186
 187                                         <h3>Alt Field Options</h3>
 188                                         <dl class="defs">
 189
 190                                                 <dt>altFieldTimeOnly</dt>
 191                                                         <dd><em>Default: true</em> - When altField is used from datepicker altField will only receive the formatted time and the original field only receives date.</dd>
 192
 193                                                 <dt>altSeparator</dt>
 194                                                         <dd><em>Default: (separator option)</em> - String placed between formatted date and formatted time in the altField.</dd>
 195
 196                                                 <dt>altTimeSuffix</dt>
 197                                                         <dd><em>Default: (timeSuffix option)</em> - String always placed after the formatted time in the altField.</dd>
 198
 199                                                 <dt>altTimeFormat</dt>
 200                                                         <dd><em>Default: (timeFormat option)</em> - The time format to use with the altField.</dd>
 201                                         </dl>
 202
 203                                         <h3>Timezone Options</h3>
 204                                         <dl class="defs">
 205
 206                                                 <dt>useLocalTimezone</dt>
 207                                                         <dd><em>Default: false</em> - Whether to default timezone to the browser's set timezone.</dd>
 208
 209                                                 <dt>defaultTimezone</dt>
 210                                                         <dd><em>Default: "+0000"</em> - If not set, the default timezone used.</dd>
 211
 212                                                 <dt>timezoneIso8601</dt>
 213                                                         <dd><em>Default: false</em> - Whether to follow the ISO 8601 standard.</dd>
 214
 215                                                 <dt>timezoneList</dt>
 216                                                         <dd><em>Default: [generated timezones]</em> - An array of timezones used to populate the timezone select. Can be an array of values or an array of objects: { label: "EST", value: "+0400" }</dd>
 217                                         </dl>
 218
 219                                         <h3>Time Field Options</h3>
 220                                         <dl class="defs">
 221
 222                                                 <dt>controlType</dt>
 223                                                         <dd><em>Default: 'slider'</em> - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects.  See the _controls property in the source code for more details.
 224 <pre>{
 225         create: function(tp_inst, obj, unit, val, min, max, step){
 226                 // generate whatever controls you want here, just return obj
 227         },
 228         options: function(tp_inst, obj, unit, opts, val){
 229                 // if val==undefined return the value, else return obj
 230         },
 231         value: function(tp_inst, obj, unit, val){
 232                 // if val==undefined return the value, else return obj
 233         }
 234 }</pre>
 235                                                         </dd>
 236
 237                                                 <dt>showHour</dt>
 238                                                         <dd><em>Default: true</em> - Whether to show the hour slider.</dd>
 239
 240                                                 <dt>showMinute</dt>
 241                                                         <dd><em>Default: true</em> - Whether to show the minute slider.</dd>
 242
 243                                                 <dt>showSecond</dt>
 244                                                         <dd><em>Default: false</em> - Whether to show the second slider.</dd>
 245
 246                                                 <dt>showMillisec</dt>
 247                                                         <dd><em>Default: false</em> - Whether to show the millisecond slider.</dd>
 248
 249                                                 <dt>showTimezone</dt>
 250                                                         <dd><em>Default: false</em> - Whether to show the timezone select.</dd>
 251
 252                                                 <dt>showTime</dt>
 253                                                         <dd><em>Default: true</em> - Whether to show the time selected within the datetimepicker.</dd>
 254
 255                                                 <dt>stepHour</dt>
 256                                                         <dd><em>Default: 1</em> - Hours per step the slider makes.</dd>
 257
 258                                                 <dt>stepMinute</dt>
 259                                                         <dd><em>Default: 1</em> - Minutes per step the slider makes.</dd>
 260
 261                                                 <dt>stepSecond</dt>
 262                                                         <dd><em>Default: 1</em> - Seconds per step the slider makes.</dd>
 263
 264                                                 <dt>stepMilliSec</dt>
 265                                                         <dd><em>Default: 1</em> - Milliseconds per step the slider makes.</dd>
 266
 267                                                 <dt>hour</dt>
 268                                                         <dd><em>Default: 0</em> - Initial hour set.</dd>
 269
 270                                                 <dt>minute</dt>
 271                                                         <dd><em>Default: 0</em> - Initial minute set.</dd>
 272
 273                                                 <dt>second</dt>
 274                                                         <dd><em>Default: 0</em> - Initial second set.</dd>
 275
 276                                                 <dt>millisec</dt>
 277                                                         <dd><em>Default: 0</em> - Initial millisecond set.</dd>
 278
 279                                                 <dt>timezone</dt>
 280                                                         <dd><em>Default: 0</em> - Initial timezone set.</dd>
 281
 282                                                 <dt>hourMin</dt>
 283                                                         <dd><em>Default: 0</em> - The minimum hour allowed for all dates.</dd>
 284
 285                                                 <dt>minuteMin</dt>
 286                                                         <dd><em>Default: 0</em> - The minimum minute allowed for all dates.</dd>
 287
 288                                                 <dt>secondMin</dt>
 289                                                         <dd><em>Default: 0</em> - The minimum second allowed for all dates.</dd>
 290
 291                                                 <dt>millisecMin</dt>
 292                                                         <dd><em>Default: 0</em> - The minimum millisecond allowed for all dates.</dd>
 293
 294                                                 <dt>hourMax</dt>
 295                                                         <dd><em>Default: 23</em> - The maximum hour allowed for all dates.</dd>
 296
 297                                                 <dt>minuteMax</dt>
 298                                                         <dd><em>Default: 59</em> - The maximum minute allowed for all dates.</dd>
 299
 300                                                 <dt>secondMax</dt>
 301                                                         <dd><em>Default: 59</em> - The maximum second allowed for all dates.</dd>
 302
 303                                                 <dt>millisecMax</dt>
 304                                                         <dd><em>Default: 999</em> - The maximum millisecond allowed for all dates.</dd>
 305
 306                                                 <dt>hourGrid</dt>
 307                                                         <dd><em>Default: 0</em> - When greater than 0 a label grid will be generated under the slider.  This number represents the units (in hours) between labels.</dd>
 308
 309                                                 <dt>minuteGrid</dt>
 310                                                         <dd><em>Default: 0</em> - When greater than 0 a label grid will be generated under the slider.  This number represents the units (in minutes) between labels.</dd>
 311
 312                                                 <dt>secondGrid</dt>
 313                                                         <dd><em>Default: 0</em> - When greater than 0 a label grid will be genereated under the slider.  This number represents the units (in seconds) between labels.</dd>
 314
 315                                                 <dt>millisecGrid</dt>
 316                                                         <dd><em>Default: 0</em> - When greater than 0 a label grid will be genereated under the slider.  This number represents the units (in milliseconds) between labels.</dd>
 317                                         </dl>
 318
 319                                         <h3>Other Options</h3>
 320                                         <dl class="defs">
 321                                                 <dt>showButtonPanel</dt>
 322                                                         <dd><em>Default: true</em> - Whether to show the button panel at the bottom.  This is generally needed.</dd>
 323
 324                                                 <dt>timeOnly</dt>
 325                                                         <dd><em>Default: false</em> - Hide the datepicker and only provide a time interface.</dd>
 326
 327                                                 <dt>onSelect</dt>
 328                                                         <dd><em>Default: null</em> - Function to be called when a date is chosen or time has changed (parameters: datetimeText, datepickerInstance).</dd>
 329
 330                                                 <dt>alwaysSetTime</dt>
 331                                                         <dd><em>Default: true</em> - Always have a time set internally, even before user has chosen one.</dd>
 332
 333                                                 <dt>separator</dt>
 334                                                         <dd><em>Default: " "</em> - When formatting the time this string is placed between the formatted date and formatted time.</dd>
 335
 336                                                 <dt>pickerTimeFormat</dt>
 337                                                         <dd><em>Default: (timeFormat option)</em> - How to format the time displayed within the timepicker.</dd>
 338
 339                                                 <dt>pickerTimeSuffix</dt>
 340                                                         <dd><em>Default: (timeSuffix option)</em> - String to place after the formatted time within the timepicker.</dd>
 341
 342                                                 <dt>showTimepicker</dt>
 343                                                         <dd><em>Default: true</em> - Whether to show the timepicker within the datepicker.</dd>
 344
 345                                                 <dt>addSliderAccess</dt>
 346                                                         <dd><em>Default: false</em> - Adds the <a href="http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/" title="jQueryUI Slider Access Plugin">sliderAccess plugin</a> to sliders within timepicker</dd>
 347
 348                                                 <dt>sliderAccessArgs</dt>
 349                                                         <dd><em>Default: null</em> - Object to pass to sliderAccess when used.</dd>
 350
 351                                                 <dt>defaultValue</dt>
 352                                                         <dd><em>Default: null</em> - String of the default time value placed in the input on focus when the input is empty.</dd>
 353
 354                                                 <dt>minDateTime</dt>
 355                                                         <dd><em>Default: null</em> - Date object of the minimum datetime allowed.  Also available as minDate.</dd>
 356
 357                                                 <dt>maxDateTime</dt>
 358                                                         <dd><em>Default: null</em> - Date object of the maximum datetime allowed. Also Available as maxDate.</dd>
 359
 360                                                 <dt>parse</dt>
 361                                                         <dd><em>Default: 'strict'</em> - How to parse the time string.  Two methods are provided: 'strict' which must match the timeFormat exactly, and 'loose' which uses javascript's new Date(timeString) to guess the time.  You may also pass in a function(timeFormat, timeString, options) to handle the parsing yourself, returning a simple object:
 362 <pre>{
 363         hour: 19,
 364         minute: 10,
 365         second: 23,
 366         millisec: 45,
 367         timezone: '-0400'
 368 }</pre>
 369                                                         </dd>
 370                                         </dl>
 371
 372                                 </div>
 373
 374
 375                                 <!-- ############################################################################# -->
 376                                 <!-- Formatting
 377                                 <!-- ############################################################################# -->
 378                                 <div id="tp-formatting">
 379
 380                                         <h2>Formatting Your Time</h2>
 381
 382                                         <p>The default format is "HH:mm".  To use 12 hour time use something similar to: "hh:mm tt".  When both "t" and lower case "h" are present in the timeFormat, 12 hour time will be used.</p>
 383
 384                                         <dl class="defs">
 385                                                 <dt>H</dt><dd>Hour with no leading 0 (24 hour)</dd>
 386                                                 <dt>HH</dt><dd>Hour with leading 0 (24 hour)</dd>
 387                                                 <dt>h</dt><dd>Hour with no leading 0 (12 hour)</dd>
 388                                                 <dt>hh</dt><dd>Hour with leading 0 (12 hour)</dd>
 389                                                 <dt>m</dt><dd>Minute with no leading 0</dd>
 390                                                 <dt>mm</dt><dd>Minute with leading 0</dd>
 391                                                 <dt>s</dt><dd>Second with no leading 0</dd>
 392                                                 <dt>ss</dt><dd>Second with leading 0</dd>
 393                                                 <dt>l</dt><dd>Milliseconds always with leading 0</dd>
 394                                                 <dt>t</dt><dd>a or p for AM/PM</dd>
 395                                                 <dt>T</dt><dd>A or P for AM/PM</dd>
 396                                                 <dt>tt</dt><dd>am or pm for AM/PM</dd>
 397                                                 <dt>TT</dt><dd>AM or PM for AM/PM</dd>
 398                                                 <dt>z</dt><dd>Timezone as defined by timezoneList</dd>
 399                                                 <dt>'...'</dt><dd>Literal text (Uses single quotes)</dd>
 400                                         </dl>
 401
 402                                         <p>Formats are used in the following ways:</p>
 403                                         <ul>
 404                                                 <li>timeFormat option</li>
 405                                                 <li>altTimeFormat option</li>
 406                                                 <li>pickerTimeFormat option</li>
 407                                                 <li>$.datepicker.formatTime(format, timeObj, options) utility method</li>
 408                                                 <li>$.datepicker.parseTime(format, timeStr, options) utility method</li>
 409                                         </ul>
 410
 411                                         <p>For help with  formatting the date portion, visit the datepicker documentation for <a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="jQuery UI Datepicker Formatting">formatting dates</a>.</p>
 412                                 </div>
 413
 414                                 <!-- ############################################################################# -->
 415                                 <!-- Localization
 416                                 <!-- ############################################################################# -->
 417                                 <div id="tp-localization">
 418
 419                                         <h2>Working with Localizations</h2>
 420
 421                                         <p>Timepicker comes with many translations and localizations, thanks to all the contributors.  They can be found in the localization folder in the git repo.</p>
 422
 423                                         <p>The quick and cheap way to use localizations is to pass in options to a timepicker instance:</p>
 424
 425 <pre>$('#example123').timepicker({
 426         timeOnlyTitle: 'Выберите время',
 427         timeText: 'Время',
 428         hourText: 'Часы',
 429         minuteText: 'Минуты',
 430         secondText: 'Секунды',
 431         currentText: 'Теперь',
 432         closeText: 'Закрыть'
 433 });
 434 </pre>
 435                                         <p>However, if you plan to use timepicker extensively you will need to include (build your own) localization.  It is simply assigning those same variables to an object.  As you see in the example below we maintain a separate object for timepicker.  This way we aren't bound to any changes within datepicker.</p>
 436
 437 <pre>$.datepicker.regional['ru'] = {
 438         closeText: 'Закрыть',
 439         prevText: '&#x3c;Пред',
 440         nextText: 'След&#x3e;',
 441         currentText: 'Сегодня',
 442         monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
 443         'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
 444         monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн',
 445         'Июл','Авг','Сен','Окт','Ноя','Дек'],
 446         dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
 447         dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
 448         dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
 449         weekHeader: 'Не',
 450         dateFormat: 'dd.mm.yy',
 451         firstDay: 1,
 452         isRTL: false,
 453         showMonthAfterYear: false,
 454         yearSuffix: ''
 455 };
 456 $.datepicker.setDefaults($.datepicker.regional['ru']);
 457
 458
 459 $.timepicker.regional['ru'] = {
 460         timeOnlyTitle: 'Выберите время',
 461         timeText: 'Время',
 462         hourText: 'Часы',
 463         minuteText: 'Минуты',
 464         secondText: 'Секунды',
 465         millisecText: 'Миллисекунды',
 466         timezoneText: 'Часовой пояс',
 467         currentText: 'Сейчас',
 468         closeText: 'Закрыть',
 469         timeFormat: 'HH:mm',
 470         amNames: ['AM', 'A'],
 471         pmNames: ['PM', 'P'],
 472         isRTL: false
 473 };
 474 $.timepicker.setDefaults($.timepicker.regional['ru']);
 475 </pre>
 476                                         <p>Now all you have to do is call timepicker and the Russian localization is used.  Generally you only need to include the localization file, it will setDefaults() for you.</p>
 477                                         <p>You can also visit <a href="http://docs.jquery.com/UI/Datepicker/Localization" title="localization for datepicker" target="_BLANK">localization for datepicker</a> for more information about datepicker localizations.</p>
 478                                 </div>
 479
 480                                 <!-- ############################################################################# -->
 481                                 <!-- Examples
 482                                 <!-- ############################################################################# -->
 483                                 <div id="tp-examples">
 484                                         <h2>Examples</h2>
 485
 486                                         <ul>
 487                                                 <li><a href="#basic_examples" title="Basic Initializations">Basic Initializations</a></li>
 488                                                 <li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
 489                                                 <li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
 490                                                 <li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
 491                                                 <li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
 492                                                 <li><a href="#utility_examples" title="Utilities">Utilities</a></li>
 493                                         </ul>
 494
 495                                         <h3 id="basic_examples">Basic Initializations</h3>
 496
 497                                         <!-- ============= example -->
 498                                         <div class="example-container">
 499                                                 <p>Add a simple datetimepicker to jQuery UI's datepicker</p>
 500                                                 <div>
 501                                                         <input type="text" name="basic_example_1" id="basic_example_1" value="" />
 502                                                 </div>
 503 <pre>
 504 $('#basic_example_1').datetimepicker();
 505 </pre>
 506                                         </div>
 507
 508
 509                                         <!-- ============= example -->
 510                                         <div class="example-container">
 511                                                 <p>Add only a timepicker:</p>
 512                                                 <div>
 513                                                         <input type="text" name="basic_example_2" id="basic_example_2" value="" />
 514                                                 </div>
 515 <pre>
 516 $('#basic_example_2').timepicker();
 517 </pre>
 518                                         </div>
 519
 520                                         <!-- ============= example -->
 521                                         <div class="example-container">
 522                                                 <p>Format the time:</p>
 523                                                 <div>
 524                                                         <input type="text" name="basic_example_3" id="basic_example_3" value="" />
 525                                                 </div>
 526 <pre>
 527 $('#basic_example_3').datetimepicker({
 528         timeFormat: "hh:mm tt"
 529 });
 530 </pre>
 531                                         </div>
 532
 533                                         <h3 id="timezone_examples">Using Timezones</h3>
 534
 535                                         <!-- ============= example -->
 536                                         <div class="example-container">
 537                                                 <p>Simplest timezone usage:</p>
 538                                                 <div>
 539                                                         <input type="text" name="timezone_example_1" id="timezone_example_1" value="" />
 540                                                 </div>
 541 <pre>
 542 $('#timezone_example_1').datetimepicker({
 543         timeFormat: 'hh:mm tt z',
 544         showTimezone: true
 545 });
 546 </pre>
 547                                         </div>
 548
 549                                         <!-- ============= example -->
 550                                         <div class="example-container">
 551                                                 <p>Define your own timezone options:</p>
 552                                                 <div>
 553                                                         <input type="text" name="timezone_example_2" id="timezone_example_2" value="" />
 554                                                 </div>
 555 <pre>
 556 $('#timezone_example_2').datetimepicker({
 557         timeFormat: 'HH:mm z',
 558         showTimezone: true,
 559         timezoneList: [
 560                         { value: '-0500', label: 'Eastern'},
 561                         { value: '-0600', label: 'Central' },
 562                         { value: '-0700', label: 'Mountain' },
 563                         { value: '-0800', label: 'Pacific' }
 564                 ]
 565 });
 566 </pre>
 567                                         </div>
 568
 569                                         <!-- ============= example -->
 570                                         <div class="example-container">
 571                                                 <p>Use timezone string abbreviations for values:</p>
 572                                                 <div>
 573                                                         <input type="text" name="timezone_example_3" id="timezone_example_3" value="" />
 574                                                 </div>
 575 <pre>
 576 $('#timezone_example_3').datetimepicker({
 577         timeFormat: 'HH:mm z',
 578         showTimezone: true,
 579         timezone: 'MT',
 580         timezoneList: [
 581                         { value: 'ET', label: 'Eastern'},
 582                         { value: 'CT', label: 'Central' },
 583                         { value: 'MT', label: 'Mountain' },
 584                         { value: 'PT', label: 'Pacific' }
 585                 ]
 586 });
 587
 588 </pre>
 589                                         </div>
 590
 591                                         <h3 id="slider_examples">Slider Modifications</h3>
 592
 593                                         <!-- ============= example -->
 594                                         <div class="example-container">
 595                                                 <p>Add a grid to each slider:</p>
 596                                                 <div>
 597                                                         <input type="text" name="slider_example_1" id="slider_example_1" value="" />
 598                                                 </div>
 599 <pre>
 600 $('#slider_example_1').timepicker({
 601         hourGrid: 4,
 602         minuteGrid: 10,
 603         timeFormat: 'hh:mm tt'
 604 });
 605 </pre>
 606                                         </div>
 607
 608                                         <!-- ============= example -->
 609                                         <div class="example-container">
 610                                                 <p>Set the interval step of sliders:</p>
 611                                                 <div>
 612                                                         <input type="text" name="slider_example_2" id="slider_example_2" value="" />
 613                                                 </div>
 614 <pre>
 615 $('#slider_example_2').datetimepicker({
 616         showSecond: true,
 617         timeFormat: 'HH:mm:ss',
 618         stepHour: 2,
 619         stepMinute: 10,
 620         stepSecond: 10
 621 });
 622 </pre>
 623                                         </div>
 624
 625                                         <!-- ============= example -->
 626                                         <div class="example-container">
 627                                                 <p>Add sliderAccess plugin for touch devices:</p>
 628                                                 <div>
 629                                                         <input type="text" name="slider_example_3" id="slider_example_3" value="" />
 630                                                 </div>
 631 <pre>
 632 $('#slider_example_3').datetimepicker({
 633         addSliderAccess: true,
 634         sliderAccessArgs: { touchonly: false }
 635 });</pre>
 636                                         </div>
 637
 638                                         <!-- ============= example -->
 639                                         <div class="example-container">
 640                                                 <p>Use dropdowns instead of sliders.  By default if slider is not available dropdowns will be used.</p>
 641                                                 <div>
 642                                                         <input type="text" name="slider_example_4" id="slider_example_4" value="" />
 643                                                 </div>
 644 <pre>
 645 $('#slider_example_4').datetimepicker({
 646         controlType: 'select',
 647         timeFormat: 'hh:mm tt'
 648 });</pre>
 649                                         </div>
 650
 651                                         <!-- ============= example -->
 652                                         <div class="example-container">
 653                                                 <p>Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).</p>
 654                                                 <div>
 655                                                         <input type="text" name="slider_example_5" id="slider_example_5" value="" />
 656                                                 </div>
 657 <pre>var myControl=  {
 658         create: function(tp_inst, obj, unit, val, min, max, step){
 659                 $('&lt;input class="ui-timepicker-input" value="'+val+'" style="width:50%"&gt;')
 660                         .appendTo(obj)
 661                         .spinner({
 662                                 min: min,
 663                                 max: max,
 664                                 step: step,
 665                                 change: function(e,ui){ // key events
 666                                                 // don't call if api was used and not key press
 667                                                 if(e.originalEvent !== undefined)
 668                                                         tp_inst._onTimeChange();
 669                                                 tp_inst._onSelectHandler();
 670                                         },
 671                                 spin: function(e,ui){ // spin events
 672                                                 tp_inst.control.value(tp_inst, obj, unit, ui.value);
 673                                                 tp_inst._onTimeChange();
 674                                                 tp_inst._onSelectHandler();
 675                                         }
 676                         });
 677                 return obj;
 678         },
 679         options: function(tp_inst, obj, unit, opts, val){
 680                 if(typeof(opts) == 'string' && val !== undefined)
 681                                 return obj.find('.ui-timepicker-input').spinner(opts, val);
 682                 return obj.find('.ui-timepicker-input').spinner(opts);
 683         },
 684         value: function(tp_inst, obj, unit, val){
 685                 if(val !== undefined)
 686                         return obj.find('.ui-timepicker-input').spinner('value', val);
 687                 return obj.find('.ui-timepicker-input').spinner('value');
 688         }
 689 };
 690
 691 $('#slider_example_5').datetimepicker({
 692         controlType: myControl
 693 });</pre>
 694                                         </div>
 695
 696                                         <h3 id="alt_examples">Alternate Fields</h3>
 697
 698                                         <!-- ============= example -->
 699                                         <div class="example-container">
 700                                                 <p>Alt field in the simplest form:</p>
 701                                                 <div>
 702                                                         <input type="text" name="alt_example_1" id="alt_example_1" value="09/15/2012" />
 703                                                         <input type="text" name="alt_example_1_alt" id="alt_example_1_alt" value="10:15" />
 704                                                 </div>
 705 <pre>
 706 $('#alt_example_1').datetimepicker({
 707         altField: "#alt_example_1_alt"
 708 });
 709 </pre>
 710                                         </div>
 711
 712                                         <!-- ============= example -->
 713                                         <div class="example-container">
 714                                                 <p>With datetime in both:</p>
 715                                                 <div>
 716                                                         <input type="text" name="alt_example_2" id="alt_example_2" value="" />
 717                                                         <input type="text" name="alt_example_2_alt" id="alt_example_2_alt" value="" />
 718                                                 </div>
 719 <pre>
 720 $('#alt_example_2').datetimepicker({
 721         altField: "#alt_example_2_alt",
 722         altFieldTimeOnly: false
 723 });
 724 </pre>
 725                                         </div>
 726
 727                                         <!-- ============= example -->
 728                                         <div class="example-container">
 729                                                 <p>Format the altField differently:</p>
 730                                                 <div>
 731                                                         <input type="text" name="alt_example_3" id="alt_example_3" value="" />
 732                                                         <input type="text" name="alt_example_3_alt" id="alt_example_3_alt" value="" />
 733                                                 </div>
 734 <pre>
 735 $('#alt_example_3').datetimepicker({
 736         altField: "#alt_example_3_alt",
 737         altFieldTimeOnly: false,
 738         altFormat: "yy-mm-dd",
 739         altTimeFormat: "h:m t",
 740         altSeparator: " @ "
 741 });
 742 </pre>
 743                                         </div>
 744
 745                                         <!-- ============= example -->
 746                                         <div class="example-container">
 747                                                 <p>With inline mode using altField:</p>
 748                                                 <div>
 749                                                         <input type="text" name="alt_example_4_alt" id="alt_example_4_alt" value="" />
 750                                                         <span id="alt_example_4" ></span>
 751                                                 </div>
 752 <pre>
 753 $('#alt_example_4').datetimepicker({
 754         altField: "#alt_example_4_alt",
 755         altFieldTimeOnly: false
 756 });
 757 </pre>
 758                                         </div>
 759
 760                                         <h3 id="rest_examples">Time Restraints</h3>
 761
 762                                         <!-- ============= example -->
 763                                         <div class="example-container">
 764                                                 <p>Set the min/max hour of every date:</p>
 765                                                 <div>
 766                                                         <input type="text" name="rest_example_1" id="rest_example_1" value="" />
 767                                                 </div>
 768 <pre>
 769 $('#rest_example_1').timepicker({
 770         hourMin: 8,
 771         hourMax: 16
 772 });
 773 </pre>
 774                                         </div>
 775
 776                                         <!-- ============= example -->
 777                                         <div class="example-container">
 778                                                 <p>Set the min/max date numerically:</p>
 779                                                 <div>
 780                                                         <input type="text" name="rest_example_2" id="rest_example_2" value="" />
 781                                                 </div>
 782 <pre>
 783 $('#rest_example_2').datetimepicker({
 784         numberOfMonths: 2,
 785         minDate: 0,
 786         maxDate: 30
 787 });
 788 </pre>
 789                                         </div>
 790
 791                                         <!-- ============= example -->
 792                                         <div class="example-container">
 793                                                 <p>Set the min/max date and time with a Date object:</p>
 794                                                 <div>
 795                                                         <input type="text" name="rest_example_3" id="rest_example_3" value="" />
 796                                                 </div>
 797 <pre>
 798 $('#rest_example_3').datetimepicker({
 799         minDate: new Date(2010, 11, 20, 8, 30),
 800         maxDate: new Date(2010, 11, 31, 17, 30)
 801 });
 802 </pre>
 803                                         </div>
 804
 805                                         <!-- ============= example -->
 806                                         <div class="example-container">
 807                                                 <p>Restrict a start and end date (also shows using onSelect and onClose events):</p>
 808                                                 <div>
 809                                                         <input type="text" name="rest_example_4_start" id="rest_example_4_start" value="" />
 810                                                         <input type="text" name="rest_example_4_end" id="rest_example_4_end" value="" />
 811                                                 </div>
 812 <pre>
 813 var startDateTextBox = $('#rest_example_4_start');
 814 var endDateTextBox = $('#rest_example_4_end');
 815
 816 startDateTextBox.datetimepicker({
 817         onClose: function(dateText, inst) {
 818                 if (endDateTextBox.val() != '') {
 819                         var testStartDate = startDateTextBox.datetimepicker('getDate');
 820                         var testEndDate = endDateTextBox.datetimepicker('getDate');
 821                         if (testStartDate > testEndDate)
 822                                 endDateTextBox.datetimepicker('setDate', testStartDate);
 823                 }
 824                 else {
 825                         endDateTextBox.val(dateText);
 826                 }
 827         },
 828         onSelect: function (selectedDateTime){
 829                 endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
 830         }
 831 });
 832 endDateTextBox.datetimepicker({
 833         onClose: function(dateText, inst) {
 834                 if (startDateTextBox.val() != '') {
 835                         var testStartDate = startDateTextBox.datetimepicker('getDate');
 836                         var testEndDate = endDateTextBox.datetimepicker('getDate');
 837                         if (testStartDate > testEndDate)
 838                                 startDateTextBox.datetimepicker('setDate', testEndDate);
 839                 }
 840                 else {
 841                         startDateTextBox.val(dateText);
 842                 }
 843         },
 844         onSelect: function (selectedDateTime){
 845                 startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
 846         }
 847 });
 848 </pre>
 849                                         </div>
 850
 851
 852                                         <h3 id="utility_examples">Utilities</h3>
 853
 854                                         <!-- ============= example -->
 855                                         <div class="example-container">
 856                                                 <p>Get and Set Datetime:</p>
 857                                                 <div>
 858                                                         <input type="text" name="utility_example_1" id="utility_example_1" value="" />
 859                                                         <button id="utility_example_1_setdt" value="1">Set Datetime</button>
 860                                                         <button id="utility_example_1_getdt" value="1">Get Datetime</button>
 861                                                 </div>
 862
 863 <pre>
 864 var ex13 = $('#utility_example_1');
 865
 866 ex13.datetimepicker({
 867         dateFormat: "D MM d, yy",
 868         separator: ' @ '
 869 });
 870
 871 $('#utility_example_1_setdt').click(function(){
 872         ex13.datetimepicker('setDate', (new Date()) );
 873 });
 874
 875 $('#utility_example_1_getdt').click(function(){
 876         alert(ex13.datetimepicker('getDate'));
 877 });
 878 </pre>
 879                                         </div>
 880
 881                                         <!-- ============= example -->
 882                                         <div class="example-container">
 883                                                 <p>Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)</p>
 884                                                 <dl class="defs">
 885                                                         <dt>format</dt><dd>required - string represenation of the time format to use</dd>
 886                                                         <dt>time</dt><dd>required - hash: { hour, minute, second, millisecond, timezone }</dd>
 887                                                         <dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
 888                                                 </dl>
 889                                                 <p>Returns a time string in the specified format.</p>
 890                                                 <div>
 891                                                         <div id="utility_example_2"></div>
 892                                                 </div>
 893
 894 <pre>
 895 $('#utility_example_2').text(
 896         $.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
 897 );
 898 </pre>
 899                                         </div>
 900
 901                                         <!-- ============= example -->
 902                                         <div class="example-container">
 903                                                 <p>Use the utility function to parses a formatted time. $.datepicker.parseTime(format, timeString, options)</p>
 904                                                 <dl class="defs">
 905                                                         <dt>format</dt><dd>required - string represenation of the time format to use</dd>
 906                                                         <dt>time</dt><dd>required - time string matching the format given in parameter 1</dd>
 907                                                         <dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
 908                                                 </dl>
 909                                                 <p>Returns an object with hours, minutes, seconds, milliseconds, timezone.</p>
 910                                                 <div>
 911                                                         <div id="utility_example_3"></div>
 912                                                 </div>
 913
 914 <pre>
 915 $('#utility_example_3').text(JSON.stringify(
 916         $.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
 917 ));
 918 </pre>
 919                                         </div>
 920
 921                                 </div>
 922                         </div>
 923
 924
 925                 </div>
 926                 <script type="text/javascript"> /*
 927                 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 928                 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 929                 */</script>
 930                 <script type="text/javascript"> /*
 931                 try {
 932                 var pageTracker = _gat._getTracker("UA-7602218-1");
 933                 pageTracker._trackPageview();
 934                 } catch(err) {}*/</script>
 935         </body>
 936 </html>