summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md1
-rw-r--r--index.html1021
-rw-r--r--jquery-ui-timepicker-addon.js258
3 files changed, 743 insertions, 537 deletions
diff --git a/README.md b/README.md
index 1210615..62907c4 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@ About
-----
- Author: [Trent Richardson](http://trentrichardson.com)
- Documentation: [http://trentrichardson.com/examples/timepicker/](http://trentrichardson.com/examples/timepicker/)
+- Twitter: [@practicalweb](http://twitter.com/practicalweb)
Use
---
diff --git a/index.html b/index.html
index 3af3667..9bb184d 100644
--- a/index.html
+++ b/index.html
@@ -7,27 +7,35 @@
<meta name="Keywords" content="jQuery, UI, datepicker, timepicker, datetime, time, format" />
<style type="text/css">
- body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,li,dl,dt,dd,pre,blockquote,fieldset,label{
+ body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{
margin:0;
padding:0;
border:0;
}
- body{ background-color: #363531; border-top: solid 4px #C60; font: 90% Arial, Helvetica, sans-serif; padding: 20px; }
- h1,h2{ margin: 10px 0; }
+ body{ background-color: #777; border-top: solid 10px #7b94b2; font: 90% Arial, Helvetica, sans-serif; padding: 20px; }
+ h1,h2,h3{ margin: 10px 0; }
+ h1{}
+ h2{ color: #f66; }
+ h3{ color: #7b94b2; }
p{ margin: 10px 0; }
-
- pre{ padding: 20px; background-color: #ffffcc; border: solid 1px #fff; }
+ a{ color: #7b94b2; }
+ ul,ol{ margin: 10px 0 10px 40px; }
+ li{ margin: 4px 0; }
+ dl.defs{ margin: 10px 0 10px 40px; }
+ dl.defs dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; }
+ dl.defs dd{ margin: -20px 0 10px 160px; padding-bottom: 10px; border-bottom: solid 1px #eee;}
+ pre{ font-size: 12px; padding: 0 0 0 10px; margin: 10px 0; border-left: solid 5px #9EC45F; overflow: auto; }
+
.wrapper{ background-color: #ffffff; width: 800px; border: solid 1px #eeeeee; padding: 20px; margin: 0 auto; }
- .example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 40px 0; padding: 20px; }
- .example-container p{ }
- .example-container > dl dt{ font-weight: bold; height: 20px; }
- .example-container > dl dd{ margin: -20px 0 10px 140px; border-bottom: solid 1px #fff; }
- .example-container input{ width: 150px; }
+ #tabs{ margin: 20px -20px; border: none; }
+ #tabs, #ui-datepicker-div, .ui-datepicker{ font-size: 85%; }
.clear{ clear: both; }
- #ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
+
+ .example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 20px 40px; padding: 20px; }
+ .example-container input{ border: solid 1px #aaa; padding: 4px; width: 175px; }
</style>
- <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.8.21/themes/ui-lightness/jquery-ui.css" />
+ <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
@@ -37,7 +45,7 @@
<script type="text/javascript">
$(function(){
-
+ $('#tabs').tabs();
$('.example-container > pre').each(function(i){
eval($(this).text());
@@ -54,25 +62,9 @@
<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>
- <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">Twitter</a></p>
+ <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>
- <a href="http://carbounce.com" title="Car Bounce" style="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>
-
- <h2>Download</h2>
- <p><a href="jquery-ui-timepicker-addon.js" title="Download Timepicker Addon">Download Timepicker Addon</a></p>
- <p><a href="http://github.com/trentrichardson/jQuery-Timepicker-Addon" title="Check out Timepicker on GitHub">Download/Contribute on GitHub</a> (Find a bug? See if its fixed here)</p>
- <p>There is a small bit of required CSS:</p>
-<pre>
-/* css for timepicker */
-.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
-.ui-timepicker-div dl { text-align: left; }
-.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
-.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
-.ui-timepicker-div td { font-size: 90%; }
-.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
-</pre>
-
- <p>You also need to include jQuery UI with datepicker and slider wigits. Order: jQuery, jQueryUI, Timepicker.</p>
+ <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>
<h2>Donation</h2>
<p>Has this Timepicker Addon been helpful to you?</p>
@@ -84,205 +76,308 @@
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
-
-
- <h2>Some Examples</h2>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Add a simple timepicker to jQuery UI's datepicker</p>
- <div>
- <input type="text" name="example1" id="example1" value="" />
- </div>
-
-<pre>
-$('#example1').datetimepicker();
-</pre>
- </div>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Show time in AM/PM 12 hour format</p>
- <div>
- <input type="text" name="example2" id="example2" value="" />
- </div>
-
-<pre>
-$('#example2').datetimepicker({
- ampm: true
-});
-</pre>
- </div>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Show only the time picker without date picker</p>
- <div>
- <input type="text" name="example3" id="example3" value="" />
- </div>
-
-<pre>
-$('#example3').timepicker({});
-</pre>
- </div>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Change the format (default is "hh:mm tt")</p>
- <dl>
- <dt>h</dt><dd>Hour with no leading 0</dd>
- <dt>hh</dt><dd>Hour with leading 0</dd>
- <dt>m</dt><dd>Minute with no leading 0</dd>
- <dt>mm</dt><dd>Minute with leading 0</dd>
- <dt>s</dt><dd>Second with no leading 0</dd>
- <dt>ss</dt><dd>Second with leading 0</dd>
- <dt>l</dt><dd>Milliseconds always with leading 0</dd>
- <dt>t</dt><dd>a or p for AM/PM</dd>
- <dt>T</dt><dd>A or P for AM/PM</dd>
- <dt>tt</dt><dd>am or pm for AM/PM</dd>
- <dt>TT</dt><dd>AM or PM for AM/PM</dd>
- <dt>z</dt><dd>Timezone (as defined by <a href="#example15a" title="timezoneList">timezoneList</a>)</dd>
- </dl>
- <p>Also related to your timeFormat, but not required, is the separator option</p>
- <dl>
- <dt>separator</dt><dd>Place holder between date and time, default=" "</dd>
- </dl>
- <div>
- <input type="text" name="example4" id="example4" value="" />
- </div>
-
-<pre>
-$('#example4').datetimepicker({
- timeFormat: 'h:m',
- separator: ' @ '
-});
-</pre>
- </div>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Show Seconds, Minutes, or Hours</p>
- <dl>
- <dt>showHour</dt><dd>Show the hour, default=true</dd>
- <dt>showMinute</dt><dd>Show the minute, default=true</dd>
- <dt>showSecond</dt><dd>Show the second, default=false</dd>
- <dt>showMillisec</dt><dd>Show the millisecond, default=false</dd>
- <dt>showTimezone</dt><dd>Show the timezone, default=false</dd>
- </dl>
- <div>
- <input type="text" name="example5" id="example5" value="" />
- </div>
-
-<pre>
-$('#example5').datetimepicker({
- showSecond: true,
- showMillisec: true,
- timeFormat: 'hh:mm:ss:l'
-});
-</pre>
- </div>
-
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Hours, Minutes, Seconds in steps</p>
-
- <dl>
- <dt>stepHour</dt><dd>hour steps, default=0.05 (for smooth, 1 would jump to each hour)</dd>
- <dt>stepMinute</dt><dd>minute steps, default=0.05</dd>
- <dt>stepSecond</dt><dd>second steps, default=0.05</dd>
- <dt>stepMillisec</dt><dd>second steps, default=0.5</dd>
- </dl>
- <div>
- <input type="text" name="example6" id="example6" value="" />
- </div>
-
-<pre>
-$('#example6').datetimepicker({
- showSecond: true,
- timeFormat: 'hh:mm:ss',
- stepHour: 2,
- stepMinute: 10,
- stepSecond: 10
-});
-</pre>
- </div>
-
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Default Hours, Minutes, Seconds</p>
- <dl>
- <dt>hour</dt><dd>default=0</dd>
- <dt>minute</dt><dd>default=0</dd>
- <dt>second</dt><dd>default=0</dd>
- <dt>millisec</dt><dd>default=0</dd>
- </dl>
- <div>
- <input type="text" name="example7" id="example7" value="" />
- </div>
-
-<pre>
-$('#example7').datetimepicker({
- hour: 13,
- minute: 15
-});
+
+ <div id="tabs">
+ <ul>
+ <li><a href="#tp-getting-started" title="Getting Started">Getting Started</a></li>
+ <li><a href="#tp-options" title="Options">Options</a></li>
+ <li><a href="#tp-formatting" title="Examples">Formatting</a></li>
+ <li><a href="#tp-localization" title="Examples">Localization</a></li>
+ <li><a href="#tp-examples" title="Examples">Examples</a></li>
+ </ul>
+
+ <!-- ############################################################################# -->
+ <!-- Getting Started
+ <!-- ############################################################################# -->
+ <div id="tp-getting-started">
+ <h2>Getting Started</h2>
+
+ <h3>Download</h3>
+
+ <p><a href="jquery-ui-timepicker-addon.js" title="Download Timepicker Addon">Download Timepicker Addon</a></p>
+ <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>
+ <p>There is a small bit of required CSS (<a href="jquery-ui-timepicker-addon.css" title="Download CSS">Download</a>):</p>
+<pre>/* css for timepicker */
+.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
+.ui-timepicker-div dl { text-align: left; }
+.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
+.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
+.ui-timepicker-div td { font-size: 90%; }
+.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</pre>
- </div>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>Set the time range. For instance if you only want to allow the user to choose times between 8AM and 5PM.</p>
- <dl>
- <dt>hourMin</dt><dd>default=0</dd>
- <dt>hourMax</dt><dd>default=23</dd>
- <dt>minuteMin</dt><dd>default=0</dd>
- <dt>minuteMax</dt><dd>default=59</dd>
- <dt>secondMin</dt><dd>default=0</dd>
- <dt>secondMax</dt><dd>default=59</dd>
- <dt>millisecMin</dt><dd>default=0</dd>
- <dt>millisecMax</dt><dd>default=999</dd>
- </dl>
-
-
-
- <div>
- <input type="text" name="example8" id="example8" value="" />
- </div>
-
-<pre>
+
+ <h3>Requirements</h3>
+ <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>
+ <ol>
+ <li>jQuery</li>
+ <li>jQueryUI (with datepicker and slider wigits)</li>
+ <li>Timepicker</li>
+ </ol>
+ <h3>Version</h3>
+ <p>Version 1.0.3</p>
+ <p>Last updated on 09/8/2012</p>
+ <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>
+ <p><a href="http://trentrichardson.com/Impromptu/GPL-LICENSE.txt" title="GPL License">GPL License</a></p>
+ <p><a href="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt" title="MIT License">MIT License</a></p>
-$('#example8').timepicker({
- ampm: true,
- hourMin: 8,
- hourMax: 16
-});
-</pre>
- </div>
-
-<!-- ============= example -->
- <div class="example-container">
- <p>There is also localization support. Read up on <a href="http://docs.jquery.com/UI/Datepicker/Localization" title="localization for datepicker" target="_BLANK">localization for datepicker</a> for adding support for more languages. There are a few new definitions you will need to add to your language file:</p>
- <dl>
- <dt>timeOnlyTitle</dt><dd>default="Choose Time"</dd>
- <dt>timeText</dt><dd>default="Time"</dd>
- <dt>hourText</dt><dd>default="Hour"</dd>
- <dt>minuteText</dt><dd>default="Minute"</dd>
- <dt>secondText</dt><dd>default="Second"</dd>
- <dt>millisecText</dt><dd>default="Milliecond"</dd>
- <dt>currentText</dt><dd>default="Now"</dd>
- <dt>closeText</dt><dd>default="Done"</dd>
- <dt>ampm</dt><dd>default=false (true/false, Some regions do use this, some don't)</dd>
- </dl>
- <p>Or optionally you may add them as options as shown below with Russian.</p>
- <div>
- <input type="text" name="example9" id="example9" value="" />
- </div>
-
-<pre>
-$('#example9').timepicker({
+ </div>
+
+ <!-- ############################################################################# -->
+ <!-- Options
+ <!-- ############################################################################# -->
+ <div id="tp-options">
+ <h2>Options</h2>
+
+ <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>
+
+ <h3>Localization Options</h3>
+ <dl class="defs">
+ <dt>currentText</dt>
+ <dd><em>Default: "Now", A Localization Setting</em> - Text for the Now button.</dd>
+
+ <dt>closeText</dt>
+ <dd><em>Default: "Done", A Localization Setting</em> - Text for the Close button.</dd>
+
+ <dt>ampm</dt>
+ <dd><em>Default: false, A Localization Setting</em> - Whether or not to use am/pm calculations.</dd>
+
+ <dt>amNames</dt>
+ <dd><em>Default: ['AM', 'A'], A Localization Setting</em> - Array of strings to try and parse against to determine AM.</dd>
+
+ <dt>pmNames</dt>
+ <dd><em>Default: ['PM', 'P'], A Localization Setting</em> - Array of strings to try and parse against to determine PM.</dd>
+
+ <dt>timeFormat</dt>
+ <dd><em>Default: "hh:mm tt", A Localization Setting</em> - String of format tokens to be replaced with the time. <a href="#tp-formatting" title="Formatting">See Formatting</a>.</dd>
+
+ <dt>timeSuffix</dt>
+ <dd><em>Default: "", A Localization Setting</em> - String to place after the formatted time.</dd>
+
+ <dt>timeOnlyTitle</dt>
+ <dd><em>Default: "Choose Time", A Localization Setting</em> - Title of the wigit when using only timepicker.</dd>
+
+ <dt>timeText</dt>
+ <dd><em>Default: "Time", A Localization Setting</em> - Label used within timepicker for the formatted time.</dd>
+
+ <dt>hourText</dt>
+ <dd><em>Default: "Hour", A Localization Setting</em> - Label used to identify the hour slider.</dd>
+
+ <dt>minuteText</dt>
+ <dd><em>Default: "Minute", A Localization Setting</em> - Label used to identify the minute slider.</dd>
+
+ <dt>secondText</dt>
+ <dd><em>Default: "Second", A Localization Setting</em> - Label used to identify the second slider.</dd>
+
+ <dt>millisecText</dt>
+ <dd><em>Default: "Millisecond", A Localization Setting</em> - Label used to identify the millisecond slider.</dd>
+
+ <dt>timezoneText</dt>
+ <dd><em>Default: "Timezone", A Localization Setting</em> - Label used to identify the timezone slider.</dd>
+ </dl>
+
+ <h3>Alt Field Options</h3>
+ <dl class="defs">
+
+ <dt>altFieldTimeOnly</dt>
+ <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>
+
+ <dt>altSeparator</dt>
+ <dd><em>Default: (separator option)</em> - String placed between formatted date and formatted time in the altField.</dd>
+
+ <dt>altTimeSuffix</dt>
+ <dd><em>Default: (timeSuffix option)</em> - String always placed after the formatted time in the altField.</dd>
+
+ <dt>altTimeFormat</dt>
+ <dd><em>Default: (timeFormat option)</em> - The time format to use with the altField.</dd>
+ </dl>
+
+ <h3>Timezone Options</h3>
+ <dl class="defs">
+
+ <dt>useLocalTimezone</dt>
+ <dd><em>Default: false</em> - Whether to default timezone to the browser's set timezone.</dd>
+
+ <dt>defaultTimezone</dt>
+ <dd><em>Default: "+0000"</em> - If not set, the default timezone used.</dd>
+
+ <dt>timezoneIso8601</dt>
+ <dd><em>Default: false</em> - Whether to follow the ISO 8601 standard.</dd>
+
+ <dt>timezoneList</dt>
+ <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>
+ </dl>
+
+ <h3>Time Field Settings</h3>
+ <dl class="defs">
+
+ <dt>showHour</dt>
+ <dd><em>Default: true</em> - Whether to show the hour slider.</dd>
+
+ <dt>showMinute</dt>
+ <dd><em>Default: true</em> - Whether to show the minute slider.</dd>
+
+ <dt>showSecond</dt>
+ <dd><em>Default: false</em> - Whether to show the second slider.</dd>
+
+ <dt>showMillisec</dt>
+ <dd><em>Default: false</em> - Whether to show the millisecond slider.</dd>
+
+ <dt>showTimezone</dt>
+ <dd><em>Default: false</em> - Whether to show the timezone select.</dd>
+
+ <dt>showTime</dt>
+ <dd><em>Default: true</em> - Whether to show the time selected within the datetimepicker.</dd>
+
+ <dt>stepHour</dt>
+ <dd><em>Default: 1</em> - Hours per step the slider makes.</dd>
+
+ <dt>stepMinute</dt>
+ <dd><em>Default: 1</em> - Minutes per step the slider makes.</dd>
+
+ <dt>stepSecond</dt>
+ <dd><em>Default: 1</em> - Seconds per step the slider makes.</dd>
+
+ <dt>stepMilliSec</dt>
+ <dd><em>Default: 1</em> - Milliseconds per step the slider makes.</dd>
+
+ <dt>hour</dt>
+ <dd><em>Default: 0</em> - Initial hour set.</dd>
+
+ <dt>minute</dt>
+ <dd><em>Default: 0</em> - Initial minute set.</dd>
+
+ <dt>second</dt>
+ <dd><em>Default: 0</em> - Initial second set.</dd>
+
+ <dt>millisec</dt>
+ <dd><em>Default: 0</em> - Initial millisecond set.</dd>
+
+ <dt>timezone</dt>
+ <dd><em>Default: 0</em> - Initial timezone set.</dd>
+
+ <dt>hourMin</dt>
+ <dd><em>Default: 0</em> - The minimum hour allowed for all dates.</dd>
+
+ <dt>minuteMin</dt>
+ <dd><em>Default: 0</em> - The minimum minute allowed for all dates.</dd>
+
+ <dt>secondMin</dt>
+ <dd><em>Default: 0</em> - The minimum second allowed for all dates.</dd>
+
+ <dt>millisecMin</dt>
+ <dd><em>Default: 0</em> - The minimum millisecond allowed for all dates.</dd>
+
+ <dt>hourMax</dt>
+ <dd><em>Default: 23</em> - The maximum hour allowed for all dates.</dd>
+
+ <dt>minuteMax</dt>
+ <dd><em>Default: 59</em> - The maximum minute allowed for all dates.</dd>
+
+ <dt>secondMax</dt>
+ <dd><em>Default: 59</em> - The maximum second allowed for all dates.</dd>
+
+ <dt>millisecMax</dt>
+ <dd><em>Default: 999</em> - The maximum millisecond allowed for all dates.</dd>
+
+ <dt>hourGrid</dt>
+ <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>
+
+ <dt>minuteGrid</dt>
+ <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>
+
+ <dt>secondGrid</dt>
+ <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>
+
+ <dt>millisecGrid</dt>
+ <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>
+ </dl>
+
+ <h3>Other Options</h3>
+ <dl class="defs">
+ <dt>showButtonPanel</dt>
+ <dd><em>Default: true</em> - Whether to show the button panel at the bottom. This is generally needed.</dd>
+
+ <dt>timeOnly</dt>
+ <dd><em>Default: false</em> - Hide the datepicker and only provide a time interface.</dd>
+
+ <dt>onSelect</dt>
+ <dd><em>Default: null</em> - Function to be called when a date is chosen or time has changed (parameters: datetimeText, datepickerInstance).</dd>
+
+ <dt>alwaysSetTime</dt>
+ <dd><em>Default: true</em> - Always have a time set internally, even before user has chosen one.</dd>
+
+ <dt>separator</dt>
+ <dd><em>Default: " "</em> - When formatting the time this string is placed between the formatted date and formatted time.</dd>
+
+ <dt>showTimepicker</dt>
+ <dd><em>Default: true</em> - Whether to show the timepicker within the datepicker.</dd>
+
+ <dt>addSliderAccess</dt>
+ <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>
+
+ <dt>sliderAccessArgs</dt>
+ <dd><em>Default: null</em> - Object to pass to sliderAccess when used.</dd>
+
+ <dt>defaultValue</dt>
+ <dd><em>Default: null</em> - String of the default time value placed in the input on focus when the input is empty.</dd>
+
+ <dt>minDateTime</dt>
+ <dd><em>Default: null</em> - Date object of the minimum datetime allowed. Also available as minDate.</dd>
+
+ <dt>maxDateTime</dt>
+ <dd><em>Default: null</em> - Date object of the maximum datetime allowed. Also Available as maxDate.</dd>
+ </dl>
+
+ </div>
+
+
+ <!-- ############################################################################# -->
+ <!-- Formatting
+ <!-- ############################################################################# -->
+ <div id="tp-formatting">
+
+ <h2>Formatting Your Time</h2>
+
+ <p>The default format is "hh:mm tt", however ampm is turned off by default, so you will see "hh:mm"</p>
+
+ <dl class="defs">
+ <dt>h</dt><dd>Hour with no leading 0</dd>
+ <dt>hh</dt><dd>Hour with leading 0</dd>
+ <dt>m</dt><dd>Minute with no leading 0</dd>
+ <dt>mm</dt><dd>Minute with leading 0</dd>
+ <dt>s</dt><dd>Second with no leading 0</dd>
+ <dt>ss</dt><dd>Second with leading 0</dd>
+ <dt>l</dt><dd>Milliseconds always with leading 0</dd>
+ <dt>t</dt><dd>a or p for AM/PM</dd>
+ <dt>T</dt><dd>A or P for AM/PM</dd>
+ <dt>tt</dt><dd>am or pm for AM/PM</dd>
+ <dt>TT</dt><dd>AM or PM for AM/PM</dd>
+ <dt>z</dt><dd>Timezone as defined by timezoneList</dd>
+ </dl>
+
+ <p>Formats are used in the following ways:</p>
+ <ul>
+ <li>timeFormat option</li>
+ <li>altTimeFormat option</li>
+ <li>$.datepicker.formatTime(format, timeObj, options) utility method</li>
+ <li>$.datepicker.parseTime(format, timeStr, options) utility method</li>
+ </ul>
+ </div>
+
+ <!-- ############################################################################# -->
+ <!-- Localization
+ <!-- ############################################################################# -->
+ <div id="tp-localization">
+
+ <h2>Working with Localizations</h2>
+
+ <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>
+
+ <p>The quick and cheap way to use localizations is to pass in options to a timepicker instance:</p>
+
+<pre>$('#example123').timepicker({
timeOnlyTitle: 'Выберите время',
timeText: 'Время',
hourText: 'Часы',
@@ -292,12 +387,9 @@ $('#example9').timepicker({
closeText: 'Закрыть'
});
</pre>
-
- <div class="documentation">
- <p>The first approach (as documented in the datepicker documentation and mentioned above) is to create your own regional objects per region, then use the setDefaults method to tie these together. Setting datepicker and timepicker regionals separtely will help ensure proper wording when only using datepicker or timepicker. Here is an example:</p>
+ <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>
-<pre>
-$.datepicker.regional['ru'] = {
+<pre>$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '&#x3c;Пред',
nextText: 'След&#x3e;',
@@ -335,130 +427,89 @@ $.timepicker.regional['ru'] = {
ampm: false
};
$.timepicker.setDefaults($.timepicker.regional['ru']);
-
</pre>
-
- </div>
- </div>
-
-
-
-<!-- ============= example -->
- <div class="example-container">
- <p>To show numbered grids under the sliders you may use the following options:</p>
- <dl>
- <dt>hourGrid</dt><dd>default=0</dd>
- <dt>minuteGrid</dt><dd>default=0</dd>
- <dt>secondGrid</dt><dd>default=0</dd>
- <dt>millisecGrid</dt><dd>default=0</dd>
- </dl>
- <p>When using ampm option hours will be displayed with an "a" or "p": 04a, 12p, etc...</p>
- <div>
- <input type="text" name="example10" id="example10" value="" />
- </div>
-
+ <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>
+ <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>
+ </div>
+
+ <!-- ############################################################################# -->
+ <!-- Examples
+ <!-- ############################################################################# -->
+ <div id="tp-examples">
+ <h2>Examples</h2>
+
+ <ul>
+ <li><a href="#basic_examples" title="Basic Initializations">Basic Initializations</a></li>
+ <li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
+ <li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
+ <li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
+ <li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
+ <li><a href="#utility_examples" title="Utilities">Utilities</a></li>
+ </ul>
+
+ <h3 id="basic_examples">Basic Initializations</h3>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Add a simple datetimepicker to jQuery UI's datepicker</p>
+ <div>
+ <input type="text" name="basic_example_1" id="basic_example_1" value="" />
+ </div>
<pre>
-$('#example10').timepicker({
- hourGrid: 4,
- minuteGrid: 10
-});
+$('#basic_example_1').datetimepicker();
</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>When showing more than one month:</p>
- <div>
- <input type="text" name="example11" id="example11" value="" />
- </div>
-
+ </div>
+
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Add only a timepicker:</p>
+ <div>
+ <input type="text" name="basic_example_2" id="basic_example_2" value="" />
+ </div>
<pre>
-$('#example11').datetimepicker({
- numberOfMonths: 3
-});
+$('#basic_example_2').timepicker({});
</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>With minDate and maxDate datepicker options:</p>
- <div>
- <input type="text" name="example12" id="example12" value="" />
- </div>
-
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Format the time:</p>
+ <div>
+ <input type="text" name="basic_example_3" id="basic_example_3" value="" />
+ </div>
<pre>
-$('#example12').datetimepicker({
- numberOfMonths: 2,
- minDate: 0,
- maxDate: 30
+$('#basic_example_3').datetimepicker({
+ timeFormat: "h:m",
+ ampm: true
});
</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>Get and Set Datetime:</p>
- <div>
- <input type="text" name="example13" id="example13" value="" />
- <button id="example13_setdt" value="1">Set Datetime</button>
- <button id="example13_getdt" value="1">Get Datetime</button>
- </div>
-
-<pre>
-var ex13 = $('#example13');
-
-ex13.datetimepicker();
+ </div>
-$('#example13_setdt').click(function(){
- ex13.datetimepicker('setDate', (new Date()) );
-});
+ <h3 id="timezone_examples">Using Timezones</h3>
-$('#example13_getdt').click(function(){
- alert(ex13.datetimepicker('getDate'));
-});
-</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>Use the datepicker minDate/maxDate options: (note: these must use Date objects)</p>
- <div>
- <input type="text" name="example14" id="example14" value="" />
- </div>
-
-<pre>
-$('#example14').datetimepicker({
- minDate: new Date(2010, 11, 20, 8, 30),
- maxDate: new Date(2010, 11, 31, 17, 30)
-});
-</pre>
- </div>
-
-
- <!-- ============= example -->
- <div class="example-container">
- <p>The following demonstrates how to use timezones and timezone options.</p>
- <dl>
- <dt>timezoneList</dt><dd>An array of timezones, either with strings ['-0500','-0600',..] or objects [ { value: '-0500', label: 'EST'}, { value: '-0600', label: 'CST' },..]</dd>
- <dt>defaultTimezone</dt><dd>The default selected timezone in the dropdown. default='+0000'</dd>
- <dt>useLocalTimezone</dt><dd>Use the local timezone of the client's browser. default=false</dd>
- <dt>timezoneIso8601</dt><dd>Formats the timezones in the timezone list in 8601 format</dd>
- </dl>
- <p>The third example here demonstrates using the abbreviation for timezones. If this is used defaultTimezone must match the value (abbreviation). Do note that useLocalTimezone may not function properly when using abbreviations as it will only work with '+0000' formats.</p>
- <p>Daylight savings time may be interpreted as a timezone. Create your own timezoneList and specify entries for Daylight Savings or use useLocalTimezone to help get the correct offset.</p>
- <div>
- <input type="text" name="example15a" id="example15a" value="" />
- <input type="text" name="example15b" id="example15b" value="" />
- <input type="text" name="example15c" id="example15c" value="" />
- </div>
-
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Simplest timezone usage:</p>
+ <div>
+ <input type="text" name="timezone_example_1" id="timezone_example_1" value="" />
+ </div>
<pre>
-$('#example15a').datetimepicker({
+$('#timezone_example_1').datetimepicker({
timeFormat: 'hh:mm z',
showTimezone: true
});
-
-$('#example15b').datetimepicker({
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Define your own timezone options:</p>
+ <div>
+ <input type="text" name="timezone_example_2" id="timezone_example_2" value="" />
+ </div>
+<pre>
+$('#timezone_example_2').datetimepicker({
timeFormat: 'hh:mm z',
showTimezone: true,
timezoneList: [
@@ -468,8 +519,17 @@ $('#example15b').datetimepicker({
{ value: '-0800', label: 'Pacific' }
]
});
-
-$('#example15c').datetimepicker({
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Use timezone string abbreviations for values:</p>
+ <div>
+ <input type="text" name="timezone_example_3" id="timezone_example_3" value="" />
+ </div>
+<pre>
+$('#timezone_example_3').datetimepicker({
timeFormat: 'hh:mm z',
showTimezone: true,
timezone: 'MT',
@@ -480,39 +540,160 @@ $('#example15c').datetimepicker({
{ value: 'PT', label: 'Pacific' }
]
});
+
+</pre>
+ </div>
+
+ <h3 id="slider_examples">Slider Modifications</h3>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Add a grid to each slider:</p>
+ <div>
+ <input type="text" name="slider_example_1" id="slider_example_1" value="" />
+ </div>
+<pre>
+$('#slider_example_1').timepicker({
+ hourGrid: 4,
+ minuteGrid: 10
+});
</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>Connect to the onSelect event (Use your browser's js console for this example).</p>
- <div>
- <input type="text" name="example16" id="example16" value="" />
- </div>
-
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Set the interval step of sliders:</p>
+ <div>
+ <input type="text" name="slider_example_2" id="slider_example_2" value="" />
+ </div>
<pre>
-$('#example16').datetimepicker({
+$('#slider_example_2').datetimepicker({
showSecond: true,
- showMillisec: true,
- timeFormat: 'hh:mm:ss:l',
- onSelect: function(dateText, inst){
- if(window.console)
- console.log(dateText);
- }
+ timeFormat: 'hh:mm:ss',
+ stepHour: 2,
+ stepMinute: 10,
+ stepSecond: 10
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Add sliderAccess plugin for touch devices:</p>
+ <div>
+ <div id="slider_example_3"></div>
+ </div>
+<pre>
+$('#slider_example_3').datetimepicker({
+ addSliderAccess: true,
+ sliderAccessArgs: { touchonly: false }
+});</pre>
+ </div>
+
+ <h3 id="alt_examples">Alternate Fields</h3>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Alt field in the simplest form:</p>
+ <div>
+ <input type="text" name="alt_example_1" id="alt_example_1" value="" />
+ <input type="text" name="alt_example_1_alt" id="alt_example_1_alt" value="" />
+ </div>
+<pre>
+$('#alt_example_1').datetimepicker({
+ altField: "#alt_example_1_alt"
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>With datetime in both:</p>
+ <div>
+ <input type="text" name="alt_example_2" id="alt_example_2" value="" />
+ <input type="text" name="alt_example_2_alt" id="alt_example_2_alt" value="" />
+ </div>
+<pre>
+$('#alt_example_2').datetimepicker({
+ altField: "#alt_example_2_alt",
+ altFieldTimeOnly: false
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Format the altField differently:</p>
+ <div>
+ <input type="text" name="alt_example_3" id="alt_example_3" value="" />
+ <input type="text" name="alt_example_3_alt" id="alt_example_3_alt" value="" />
+ </div>
+<pre>
+$('#alt_example_3').datetimepicker({
+ altField: "#alt_example_3_alt",
+ altFieldTimeOnly: false,
+ altTimeFormat: "h:m",
+ altSeparator: " @ "
+});
+</pre>
+ </div>
+
+ <h3 id="rest_examples">Time Restraints</h3>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Set the min/max hour of every date:</p>
+ <div>
+ <input type="text" name="rest_example_1" id="rest_example_1" value="" />
+ </div>
+<pre>
+$('#rest_example_1').timepicker({
+ ampm: true,
+ hourMin: 8,
+ hourMax: 16
});
</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>Create a datetime range with a start and end date.</p>
- <div>
- <input type="text" name="example17_start" id="example17_start" value="" /> <input type="text" name="example17_end" id="example17_end" value="" />
- </div>
-
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Set the min/max date numerically:</p>
+ <div>
+ <input type="text" name="rest_example_2" id="rest_example_2" value="" />
+ </div>
<pre>
-var startDateTextBox = $('#example17_start');
-var endDateTextBox = $('#example17_end');
+$('#rest_example_2').datetimepicker({
+ numberOfMonths: 2,
+ minDate: 0,
+ maxDate: 30
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Set the min/max date and time with a Date object:</p>
+ <div>
+ <input type="text" name="rest_example_3" id="rest_example_3" value="" />
+ </div>
+<pre>
+$('#rest_example_3').datetimepicker({
+ minDate: new Date(2010, 11, 20, 8, 30),
+ maxDate: new Date(2010, 11, 31, 17, 30)
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Restrict a start and end date (also shows using onSelect and onClose events):</p>
+ <div>
+ <input type="text" name="rest_example_4_start" id="rest_example_4_start" value="" />
+ <input type="text" name="rest_example_4_end" id="rest_example_4_end" value="" />
+ </div>
+<pre>
+var startDateTextBox = $('#rest_example_4_start');
+var endDateTextBox = $('#rest_example_4_end');
startDateTextBox.datetimepicker({
onClose: function(dateText, inst) {
@@ -547,53 +728,77 @@ endDateTextBox.datetimepicker({
}
});
</pre>
- </div>
-
- <!-- ============= example -->
- <div class="example-container">
- <p>Use the <a href="http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/" title="jQueryUI Slider Accessibility Addon">sliderAccess addon</a> to allow timepicker sliders to work on touch devices.</p>
- <div>
- <div id="example18"></div>
- </div>
-
+ </div>
+
+
+ <h3 id="utility_examples">Utilities</h3>
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Get and Set Datetime:</p>
+ <div>
+ <input type="text" name="utility_example_1" id="utility_example_1" value="" />
+ <button id="utility_example_1_setdt" value="1">Set Datetime</button>
+ <button id="utility_example_1_getdt" value="1">Get Datetime</button>
+ </div>
+
<pre>
-$('#example18').datetimepicker({
- addSliderAccess: true,
- sliderAccessArgs: { touchonly: false }
-});
-</pre>
- </div>
+var ex13 = $('#utility_example_1');
+ex13.datetimepicker();
- <!-- ============= example -->
- <div class="example-container">
- <p>Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)</p>
- <dl>
- <dt>format</dt><dd>required - string represenation of the time format to use</dd>
- <dt>time</dt><dd>required - hash: { hour, minute, second, millisecond, timezone }</dd>
- <dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
- </dl>
-
- <div>
- <div id="example19"></div>
- </div>
-
+$('#utility_example_1_setdt').click(function(){
+ ex13.datetimepicker('setDate', (new Date()) );
+});
+
+$('#utility_example_1_getdt').click(function(){
+ alert(ex13.datetimepicker('getDate'));
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)</p>
+ <dl class="defs">
+ <dt>format</dt><dd>required - string represenation of the time format to use</dd>
+ <dt>time</dt><dd>required - hash: { hour, minute, second, millisecond, timezone }</dd>
+ <dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
+ </dl>
+ <p>Returns a time string in the specified format.</p>
+ <div>
+ <div id="utility_example_2"></div>
+ </div>
+
<pre>
-$('#example19').text(
+$('#utility_example_2').text(
$.datepicker.formatTime('hh:mm z', { hour: 14, minute: 36, timezone: '+2000' }, { ampm: false })
);
</pre>
- </div>
-
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Use the utility function to parses a formatted time. $.datepicker.parseTime(format, timeString, options)</p>
+ <dl class="defs">
+ <dt>format</dt><dd>required - string represenation of the time format to use</dd>
+ <dt>time</dt><dd>required - time string matching the format given in parameter 1</dd>
+ <dt>options</dt><dd>optional - hash of any options in regional translation (ampm, amNames, pmNames..)</dd>
+ </dl>
+ <p>Returns an object with hours, minutes, seconds, milliseconds, timezone.</p>
+ <div>
+ <div id="utility_example_3"></div>
+ </div>
+
+<pre>
+$('#utility_example_3').text(
+ JSON.stringify( $.datepicker.parseTime('hh:mm:ss:l z', "14:36:21:765 +2000", { ampm: false }) )
+);
+</pre>
+ </div>
-
- <h2>Version</h2>
- <p>Version 1.0.2</p>
+ </div>
+ </div>
- <p>Last updated on 09/8/2012</p>
- <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>
- <p><a href="http://trentrichardson.com/Impromptu/GPL-LICENSE.txt" title="GPL License">GPL License</a></p>
- <p><a href="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt" title="MIT License">MIT License</a></p>
</div>
<script type="text/javascript"> /*
diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js
index f833178..6e30779 100644
--- a/jquery-ui-timepicker-addon.js
+++ b/jquery-ui-timepicker-addon.js
@@ -1,7 +1,7 @@
/*
* jQuery timepicker addon
* By: Trent Richardson [http://trentrichardson.com]
-* Version 1.0.2
+* Version 1.0.3-dev
* Last Modified: 07/01/2012
*
* Copyright 2012 Trent Richardson
@@ -18,7 +18,7 @@
* .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
*/
-/*jslint evil: true, maxlen: 300, white: false, undef: false, nomen: false, onevar: false */
+/*jslint evil: true, white: true, undef: false, nomen: true */
(function($) {
@@ -28,7 +28,7 @@ if ($.ui.timepicker.version) {
return;
}
-$.extend($.ui, { timepicker: { version: "1.0.2" } });
+$.extend($.ui, { timepicker: { version: "1.0.3" } });
/* Time picker manager.
Use the singleton instance of this class, $.timepicker, to interact with the time picker.
@@ -162,22 +162,22 @@ $.extend(Timepicker.prototype, {
beforeShow: function(input, dp_inst) {
if ($.isFunction(o.beforeShow)) {
return o.beforeShow(input, dp_inst, tp_inst);
- }
+ }
},
onChangeMonthYear: function(year, month, dp_inst) {
// Update the time as well : this prevents the time from disappearing from the $input field.
tp_inst._updateDateTime(dp_inst);
if ($.isFunction(o.onChangeMonthYear)) {
o.onChangeMonthYear.call($input[0], year, month, dp_inst, tp_inst);
- }
+ }
},
onClose: function(dateText, dp_inst) {
if (tp_inst.timeDefined === true && $input.val() !== '') {
tp_inst._updateDateTime(dp_inst);
- }
+ }
if ($.isFunction(o.onClose)) {
o.onClose.call($input[0], dateText, dp_inst, tp_inst);
- }
+ }
},
timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker');
});
@@ -208,7 +208,7 @@ $.extend(Timepicker.prototype, {
tp_inst.$altInput = $(o.altField)
.css({ cursor: 'pointer' })
.focus(function(){ $input.trigger("focus"); });
- }
+ }
if(tp_inst._defaults.minDate===0 || tp_inst._defaults.minDateTime===0)
{
@@ -222,19 +222,19 @@ $.extend(Timepicker.prototype, {
// datepicker needs minDate/maxDate, timepicker needs minDateTime/maxDateTime..
if(tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date) {
tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime());
- }
+ }
if(tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date) {
tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime());
- }
+ }
if(tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date) {
tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime());
- }
+ }
if(tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date) {
tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime());
- }
- tp_inst.$input.bind('focus', function() {
+ }
+ tp_inst.$input.bind('focus', function() {
tp_inst._onFocus();
- });
+ });
return tp_inst;
},
@@ -325,11 +325,11 @@ $.extend(Timepicker.prototype, {
if (tmph < 10) { tmph = '0' + tmph; }
if (o.ampm) {
if (h === 0) {
- tmph = 12 +'a';
- } else {
- if (h < 12) { tmph += 'a'; }
- else { tmph += 'p'; }
- }
+ tmph = 12 +'a';
+ } else {
+ if (h < 12) { tmph += 'a'; }
+ else { tmph += 'p'; }
+ }
}
html += '<td>' + tmph + '</td>';
}
@@ -410,7 +410,7 @@ $.extend(Timepicker.prototype, {
$dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide();
}
- this.hour_slider = $tp.find('.ui_tpicker_hour_slider').slider({
+ this.hour_slider = $tp.find('.ui_tpicker_hour_slider').prop('slide',null).slider({
orientation: "horizontal",
value: this.hour,
min: o.hourMin,
@@ -425,7 +425,7 @@ $.extend(Timepicker.prototype, {
// Updated by Peter Medeiros:
// - Pass in Event and UI instance into slide function
- this.minute_slider = $tp.find('.ui_tpicker_minute_slider').slider({
+ this.minute_slider = $tp.find('.ui_tpicker_minute_slider').prop('slide',null).slider({
orientation: "horizontal",
value: this.minute,
min: o.minuteMin,
@@ -437,7 +437,7 @@ $.extend(Timepicker.prototype, {
}
});
- this.second_slider = $tp.find('.ui_tpicker_second_slider').slider({
+ this.second_slider = $tp.find('.ui_tpicker_second_slider').prop('slide',null).slider({
orientation: "horizontal",
value: this.second,
min: o.secondMin,
@@ -449,7 +449,7 @@ $.extend(Timepicker.prototype, {
}
});
- this.millisec_slider = $tp.find('.ui_tpicker_millisec_slider').slider({
+ this.millisec_slider = $tp.find('.ui_tpicker_millisec_slider').prop('slide',null).slider({
orientation: "horizontal",
value: this.millisec,
min: o.millisecMin,
@@ -728,22 +728,22 @@ $.extend(Timepicker.prototype, {
if(adjustSliders !== undefined && adjustSliders === true){
var hourMax = parseInt((this._defaults.hourMax - ((this._defaults.hourMax - this._defaults.hourMin) % this._defaults.stepHour)) ,10),
- minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)) ,10),
- secMax = parseInt((this._defaults.secondMax - ((this._defaults.secondMax - this._defaults.secondMin) % this._defaults.stepSecond)) ,10),
+ minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)) ,10),
+ secMax = parseInt((this._defaults.secondMax - ((this._defaults.secondMax - this._defaults.secondMin) % this._defaults.stepSecond)) ,10),
millisecMax = parseInt((this._defaults.millisecMax - ((this._defaults.millisecMax - this._defaults.millisecMin) % this._defaults.stepMillisec)) ,10);
if(this.hour_slider) {
this.hour_slider.slider("option", { min: this._defaults.hourMin, max: hourMax }).slider('value', this.hour);
- }
+ }
if(this.minute_slider) {
this.minute_slider.slider("option", { min: this._defaults.minuteMin, max: minMax }).slider('value', this.minute);
- }
+ }
if(this.second_slider){
this.second_slider.slider("option", { min: this._defaults.secondMin, max: secMax }).slider('value', this.second);
- }
+ }
if(this.millisec_slider) {
this.millisec_slider.slider("option", { min: this._defaults.millisecMin, max: millisecMax }).slider('value', this.millisec);
- }
+ }
}
},
@@ -779,7 +779,7 @@ $.extend(Timepicker.prototype, {
var hasChanged = (hour != this.hour || minute != this.minute ||
second != this.second || millisec != this.millisec ||
(this.ampm.length > 0 &&
- (hour < 12) != ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) ||
+ (hour < 12) != ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) ||
((this.timezone == null && timezone != this.defaultTimezone) || (this.timezone != null && timezone != this.timezone)));
if (hasChanged) {
@@ -928,20 +928,20 @@ $.fn.extend({
if (typeof(o) == 'string'){
if(o == 'getDate') {
return $.fn.datepicker.apply($(this[0]), tmp_args);
- }
+ }
else {
return this.each(function() {
var $t = $(this);
$t.datepicker.apply($t, tmp_args);
});
- }
+ }
}
else {
return this.each(function() {
var $t = $(this);
$t.datepicker($.timepicker._newInst($t, o)._defaults);
});
- }
+ }
}
});
@@ -965,10 +965,10 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) {
var markers = [];
if (amNames) {
$.merge(markers, amNames);
- }
+ }
if (pmNames) {
$.merge(markers, pmNames);
- }
+ }
markers = $.map(markers, function(val) { return val.replace(/[.*+?|()\[\]{}\\]/g, '\\$&'); });
return '(' + markers.join('|') + ')?';
};
@@ -984,14 +984,14 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) {
for (var i = 0; i < finds.length; i++) {
if (orders[finds[i].toString().charAt(0)] == -1) {
orders[finds[i].toString().charAt(0)] = i + 1;
- }
- }
- }
+ }
+ }
+ }
return orders;
};
-
+
var o = extendRemove(extendRemove({}, $.timepicker._defaults), options || {});
-
+
var regstr = '^' + timeFormat.toString()
.replace(/h{1,2}/ig, '(\\d?\\d)')
.replace(/m{1,2}/ig, '(\\d?\\d)')
@@ -1007,7 +1007,7 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) {
treg = timeString.match(new RegExp(regstr, 'i'));
var resTime = {hour: 0, minute: 0, second: 0, millisec: 0};
-
+
if (treg) {
if (order.t !== -1) {
if (treg[order.t] === undefined || treg[order.t].length === 0) {
@@ -1023,11 +1023,11 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) {
if (ampm == 'AM' && treg[order.h] == '12') {
resTime.hour = 0; // 12am = 0 hour
} else {
- if (ampm == 'PM' && treg[order.h] != '12') {
- resTime.hour = parseInt(treg[order.h],10) + 12; // 12pm = 12 hour, any other pm = hour + 12
- }
- else { resTime.hour = Number(treg[order.h]); }
- }
+ if (ampm == 'PM' && treg[order.h] != '12') {
+ resTime.hour = parseInt(treg[order.h],10) + 12; // 12pm = 12 hour, any other pm = hour + 12
+ }
+ else { resTime.hour = Number(treg[order.h]); }
+ }
}
if (order.m !== -1) { resTime.minute = Number(treg[order.m]); }
@@ -1044,7 +1044,7 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) {
tz = tz.substring(1) == '0000' ?
'Z' :
tz.substring(0, 3) + ':' + tz.substring(3);
- }
+ }
break;
case 6: // +hh:mm
if (!o.timezoneIso8601) {
@@ -1052,10 +1052,10 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) {
'+0000' :
tz.replace(/:/, '');
} else {
- if (tz.substring(1) == '00:00') {
- tz = 'Z';
- }
- }
+ if (tz.substring(1) == '00:00') {
+ tz = 'Z';
+ }
+ }
break;
}
resTime.timezone = tz;
@@ -1088,11 +1088,11 @@ $.datepicker.formatTime = function(format, time, options) {
ampmName = options.pmNames[0];
if(hour > 12) {
hour = hour % 12;
- }
+ }
}
if (hour === 0) {
hour = 12;
- }
+ }
}
tmptime = tmptime.replace(/(?:hh?|mm?|ss?|[tT]{1,2}|[lz]|('.*?'|".*?"))/g, function(match) {
switch (match.toLowerCase()) {
@@ -1108,7 +1108,7 @@ $.datepicker.formatTime = function(format, time, options) {
if (options.ampm) {
if (match.length == 1) {
ampmName = ampmName.charAt(0);
- }
+ }
return match.charAt(0) === 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase();
}
return '';
@@ -1253,8 +1253,8 @@ $.datepicker._gotoToday = function(id) {
//#######################################################################################
$.datepicker._disableTimepickerDatepicker = function(target) {
var inst = this._getInst(target);
- if (!inst) { return; }
-
+ if (!inst) { return; }
+
var tp_inst = this._get(inst, 'timepicker');
$(target).datepicker('getDate'); // Init selected[Year|Month|Day]
if (tp_inst) {
@@ -1265,8 +1265,8 @@ $.datepicker._disableTimepickerDatepicker = function(target) {
$.datepicker._enableTimepickerDatepicker = function(target) {
var inst = this._getInst(target);
- if (!inst) { return; }
-
+ if (!inst) { return; }
+
var tp_inst = this._get(inst, 'timepicker');
$(target).datepicker('getDate'); // Init selected[Year|Month|Day]
if (tp_inst) {
@@ -1328,10 +1328,10 @@ $.datepicker._setTime = function(inst, date) {
//#######################################################################################
$.datepicker._setTimeDatepicker = function(target, date, withDate) {
var inst = this._getInst(target);
- if (!inst) { return; }
-
+ if (!inst) { return; }
+
var tp_inst = this._get(inst, 'timepicker');
-
+
if (tp_inst) {
this._setDateFromField(inst);
var tp_date;
@@ -1355,8 +1355,8 @@ $.datepicker._setTimeDatepicker = function(target, date, withDate) {
$.datepicker._base_setDateDatepicker = $.datepicker._setDateDatepicker;
$.datepicker._setDateDatepicker = function(target, date) {
var inst = this._getInst(target);
- if (!inst) { return; }
-
+ if (!inst) { return; }
+
var tp_date = (date instanceof Date) ? new Date(date.getTime()) : date;
this._updateDatepicker(inst);
@@ -1370,9 +1370,9 @@ $.datepicker._setDateDatepicker = function(target, date) {
$.datepicker._base_getDateDatepicker = $.datepicker._getDateDatepicker;
$.datepicker._getDateDatepicker = function(target, noDefault) {
var inst = this._getInst(target);
- if (!inst) { return; }
-
- var tp_inst = this._get(inst, 'timepicker');
+ if (!inst) { return; }
+
+ var tp_inst = this._get(inst, 'timepicker');
if (tp_inst) {
this._setDateFromField(inst, noDefault);
@@ -1389,7 +1389,7 @@ $.datepicker._getDateDatepicker = function(target, noDefault) {
//#######################################################################################
$.datepicker._base_parseDate = $.datepicker.parseDate;
$.datepicker.parseDate = function(format, value, settings) {
- var splitRes = splitDateTime(format, value, settings);
+ var splitRes = splitDateTime(format, value, settings);
return $.datepicker._base_parseDate(format, splitRes[0], settings);
};
@@ -1412,68 +1412,68 @@ $.datepicker._formatDate = function(inst, day, month, year){
$.datepicker._base_optionDatepicker = $.datepicker._optionDatepicker;
$.datepicker._optionDatepicker = function(target, name, value) {
var inst = this._getInst(target);
- if (!inst) { return null; }
-
+ if (!inst) { return null; }
+
var tp_inst = this._get(inst, 'timepicker');
if (tp_inst) {
var min = null, max = null, onselect = null;
if (typeof name == 'string') { // if min/max was set with the string
if (name === 'minDate' || name === 'minDateTime' ) {
min = value;
- }
+ }
else {
- if (name === 'maxDate' || name === 'maxDateTime') {
- max = value;
- }
- else {
- if (name === 'onSelect') {
- onselect = value;
- }
- }
- }
+ if (name === 'maxDate' || name === 'maxDateTime') {
+ max = value;
+ }
+ else {
+ if (name === 'onSelect') {
+ onselect = value;
+ }
+ }
+ }
} else {
- if (typeof name == 'object') { //if min/max was set with the JSON
- if (name.minDate) {
- min = name.minDate;
- } else {
- if (name.minDateTime) {
- min = name.minDateTime;
- } else {
- if (name.maxDate) {
- max = name.maxDate;
- } else {
- if (name.maxDateTime) {
- max = name.maxDateTime;
- }
- }
- }
- }
- }
- }
+ if (typeof name == 'object') { //if min/max was set with the JSON
+ if (name.minDate) {
+ min = name.minDate;
+ } else {
+ if (name.minDateTime) {
+ min = name.minDateTime;
+ } else {
+ if (name.maxDate) {
+ max = name.maxDate;
+ } else {
+ if (name.maxDateTime) {
+ max = name.maxDateTime;
+ }
+ }
+ }
+ }
+ }
+ }
if(min) { //if min was set
if (min === 0) {
min = new Date();
- } else {
+ } else {
min = new Date(min);
- }
+ }
tp_inst._defaults.minDate = min;
tp_inst._defaults.minDateTime = min;
} else if (max) { //if max was set
if(max===0) {
max=new Date();
- } else {
+ } else {
max= new Date(max);
- }
+ }
tp_inst._defaults.maxDate = max;
tp_inst._defaults.maxDateTime = max;
} else if (onselect) {
tp_inst._defaults.onSelect = onselect;
- }
+ }
}
if (value === undefined) {
return this._base_optionDatepicker(target, name);
- }
+ }
return this._base_optionDatepicker(target, name, value);
};
@@ -1485,8 +1485,8 @@ function extendRemove(target, props) {
for (var name in props) {
if (props[name] === null || props[name] === undefined) {
target[name] = props[name];
- }
- }
+ }
+ }
return target;
}
@@ -1504,11 +1504,11 @@ var splitDateTime = function(dateFormat, dateTimeString, dateSettings)
// Hack! The error message ends with a colon, a space, and
// the "extra" characters. We rely on that instead of
// attempting to perfectly reproduce the parsing algorithm.
- var dateStringLength = dateTimeString.length-(err.length-err.indexOf(':')-2);
- var timeString = dateTimeString.substring(dateStringLength);
+ var dateStringLength = dateTimeString.length-(err.length-err.indexOf(':')-2);
+ var timeString = dateTimeString.substring(dateStringLength);
- return [dateTimeString.substring(0, dateStringLength), dateTimeString.substring(dateStringLength)];
-
+ return [dateTimeString.substring(0, dateStringLength), dateTimeString.substring(dateStringLength)];
+
} else {
throw err;
}
@@ -1524,25 +1524,25 @@ var splitDateTime = function(dateFormat, dateTimeString, dateSettings)
//#######################################################################################
var parseDateTimeInternal = function(dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings)
{
- var date;
- var splitRes = splitDateTime(dateFormat, dateTimeString, dateSettings);
+ var date;
+ var splitRes = splitDateTime(dateFormat, dateTimeString, dateSettings);
date = $.datepicker._base_parseDate(dateFormat, splitRes[0], dateSettings);
- if (splitRes[1] !== '')
- {
- var timeString = splitRes[1];
- var separator = timeSettings && timeSettings.separator ? timeSettings.separator : $.timepicker._defaults.separator;
- if ( timeString.indexOf(separator) !== 0) {
- throw 'Missing time separator';
- }
- timeString = timeString.substring(separator.length);
- var parsedTime = $.datepicker.parseTime(timeFormat, timeString, timeSettings);
- if (parsedTime === null) {
- throw 'Wrong time format';
- }
- return {date: date, timeObj: parsedTime};
- } else {
- return {date: date};
- }
+ if (splitRes[1] !== '')
+ {
+ var timeString = splitRes[1];
+ var separator = timeSettings && timeSettings.separator ? timeSettings.separator : $.timepicker._defaults.separator;
+ if ( timeString.indexOf(separator) !== 0) {
+ throw 'Missing time separator';
+ }
+ timeString = timeString.substring(separator.length);
+ var parsedTime = $.datepicker.parseTime(timeFormat, timeString, timeSettings);
+ if (parsedTime === null) {
+ throw 'Wrong time format';
+ }
+ return {date: date, timeObj: parsedTime};
+ } else {
+ return {date: date};
+ }
};
//#######################################################################################
@@ -1556,7 +1556,7 @@ var selectLocalTimeZone = function(tp_inst, date)
var tzoffset = $.timepicker.timeZoneOffsetString(now);
if (tp_inst._defaults.timezoneIso8601) {
tzoffset = tzoffset.substring(0, 3) + ':' + tzoffset.substring(3);
- }
+ }
tp_inst.timezone_select.val(tzoffset);
}
};
@@ -1682,6 +1682,6 @@ $.timepicker.handleRange = function( method, startTime, endTime, options ) {
return $([startTime.get(0), endTime.get(0)]);
};
-$.timepicker.version = "1.0.2";
+$.timepicker.version = "1.0.3";
})(jQuery);
generated by cgit v1.1 at 2025-05-12 07:36:15 +0000