Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Timepicker: Globalize support

  • Loading branch information...
commit e3911a6bbc8c67bc414b6ac7a29733935a8bcf79 1 parent 6450d87
@gnarf gnarf authored
View
1  tests/unit/timepicker/timepicker.html
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.6.2.js"></script>
+ <script src="../../../external/globalize.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
View
14 tests/unit/timepicker/timepicker_events.js
@@ -12,22 +12,22 @@ test( "keydown: Up/Down/Left/Right behaviors", function() {
expect( 11 );
var i,
- input = $( "#timepicker1" ).val( "12:00:00 pm" ).timepicker(),
+ input = $( "#timepicker1" ).val( "12:00:00 PM" ).timepicker(),
timepicker = input.data( "timepicker" ),
mask = timepicker.mask;
mask._caret( 0, 0 );
- equal( input.val(), "12:00:00 pm", "Sanity Check" );
+ equal( input.val(), "12:00:00 PM", "Sanity Check" );
deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct" );
downup( input, $.ui.keyCode.UP );
- equal( input.val(), "01:00:00 pm", "After up keypress in hours field, value went to proper value" );
+ equal( input.val(), " 1:00:00 PM", "After up keypress in hours field, value went to proper value" );
downup( input, $.ui.keyCode.DOWN );
- equal( input.val(), "12:00:00 pm", "After down keypress in hours field, value went to proper value" );
+ equal( input.val(), "12:00:00 PM", "After down keypress in hours field, value went to proper value" );
downup( input, $.ui.keyCode.DOWN );
- equal( input.val(), "11:00:00 pm", "After down keypress in hours field, value went to proper value" );
+ equal( input.val(), "11:00:00 PM", "After down keypress in hours field, value went to proper value" );
deepEqual( mask._caret(), { begin: 0, end: 2 }, "Caret position selects hours" );
downup( input, $.ui.keyCode.RIGHT );
@@ -36,7 +36,7 @@ test( "keydown: Up/Down/Left/Right behaviors", function() {
for ( i = 0; i < 10; i++ ) {
downup( input, $.ui.keyCode.DOWN );
}
- equal( input.val(), "11:50:00 pm", "After 10 down keypress in minutes field, value went to proper value" );
+ equal( input.val(), "11:50:00 PM", "After 10 down keypress in minutes field, value went to proper value" );
downup( input, $.ui.keyCode.RIGHT );
deepEqual( mask._caret(), { begin: 6, end: 8 }, "After Right - Caret position selects seconds" );
@@ -45,7 +45,7 @@ test( "keydown: Up/Down/Left/Right behaviors", function() {
deepEqual( mask._caret(), { begin: 9, end: 11 }, "After Right - Caret position selects am/pm" );
downup( input, $.ui.keyCode.DOWN );
- equal( input.val(), "11:50:00 am", "After down keypress in am/pm field, value went to proper value" );
+ equal( input.val(), "11:50:00 AM", "After down keypress in am/pm field, value went to proper value" );
});
View
14 tests/unit/timepicker/timepicker_options.js
@@ -5,30 +5,30 @@ module( "timepicker: options" );
test( "seconds", function() {
expect( 3 );
- var input = $( "#timepicker1" ).val("12:30 am").timepicker({
+ var input = $( "#timepicker1" ).val("12:30 AM").timepicker({
seconds: false
});
- equal( input.val(), "12:30 am", "Seconds: false startup option" );
+ equal( input.val(), "12:30 AM", "Seconds: false startup option" );
input.timepicker( "option", "seconds", true );
- equal( input.val(), "12:30:00 am", "Seconds: enabled seconds via option method" );
+ equal( input.val(), "12:30:00 AM", "Seconds: enabled seconds via option method" );
input.timepicker( "option", "seconds", false );
- equal( input.val(), "12:30 am", "Seconds: disabled seconds via option method" );
+ equal( input.val(), "12:30 AM", "Seconds: disabled seconds via option method" );
});
test( "ampm", function() {
expect( 3 );
- var input = $( "#timepicker1" ).val("01:30:00 pm").timepicker({
+ var input = $( "#timepicker1" ).val(" 1:30:00 PM").timepicker({
ampm: true
});
- equal( input.val(), "01:30:00 pm", "Sanity Check" );
+ equal( input.val(), " 1:30:00 PM", "Sanity Check" );
input.timepicker( "option", "ampm", false );
@@ -36,7 +36,7 @@ test( "ampm", function() {
input.timepicker( "option", "ampm", true );
- equal( input.val(), "01:30:00 pm", "Enabled ampm option via method" );
+ equal( input.val(), " 1:30:00 PM", "Enabled ampm option via method" );
});
View
29 tests/visual/timepicker/timepicker.html
@@ -5,6 +5,9 @@
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
<script src="../../../jquery-1.6.2.js"></script>
+ <script src="../../../external/globalize.js"></script>
+ <script src="../../../external/globalize.culture.de-DE.js"></script>
+ <script src="../../../external/globalize.culture.ja-JP.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
@@ -13,11 +16,19 @@
<script src="../../../ui/jquery.ui.timepicker.js"></script>
<script>
$(function() {
- $("#timepicker").timepicker();
- $("#timepicker2").timepicker();
- $("#timepicker3").timepicker({ ampm: false });
- $("#timepicker4").timepicker({ seconds: false });
- $("#timepicker5").timepicker({ ampm: false, seconds: false });
+ $("#culture").change(function() {
+ Globalize.culture( $( this ).val() );
+ $( "input" ).timepicker( "destroy" );
+ setup();
+ });
+ function setup() {
+ $("#timepicker").timepicker();
+ $("#timepicker2").timepicker();
+ $("#timepicker3").timepicker({ ampm: false });
+ $("#timepicker4").timepicker({ seconds: false });
+ $("#timepicker5").timepicker({ ampm: false, seconds: false });
+ }
+ setup();
});
</script>
<style>
@@ -32,13 +43,19 @@
<label>Timepicker</label>
<input id="timepicker">
<label>Timepicker - With Initial Value</label>
- <input id="timepicker2" value="12:00:00 pm">
+ <input id="timepicker2" value="01:30:45 am">
<label>Timepicker - <code>{ ampm: false }</code></label>
<input id="timepicker3">
<label>Timepicker - <code>{ seconds: false }</code></label>
<input id="timepicker4">
<label>Timepicker - <code>{ ampm: false, seconds: false }</code></label>
<input id="timepicker5">
+ <label>Globalize Culture Selector</label>
+ <select id="culture" name="culture">
+ <option value="en-US">en-US</option>
+ <option value="de-DE">de-DE</option>
+ <option value="ja-JP">ja-JP</option>
+ </select>
</form>
</body>
</html>
View
82 ui/jquery.ui.timepicker.js
@@ -26,10 +26,32 @@ function makeBetweenMaskFunction( min, max, def, pad ) {
if ( value >= min && value <= max ) {
return ( value < 10 ? pad : "" ) + value;
}
+ };
+}
+
+// a wrapper function for Globalize integration
+function getAmPmArrays() {
+ if ( window.Globalize ) {
+ var calendar = Globalize.culture().calendars.standard;
+
+ return {
+ am: calendar.AM,
+ pm: calendar.PM
+ };
+ } else {
+ return {
+ am: [ "AM", "am" ],
+ pm: [ "PM", "pm" ]
+ };
}
}
-var maskDefinitions = {
+function validAmPm( value ) {
+}
+
+var rsingleh = /\b(h)(?=:)/i,
+ rlowerhg = /h/g,
+ maskDefinitions = {
_h: makeBetweenMaskFunction( 1, 12, "12", " " ),
hh: makeBetweenMaskFunction( 1, 12, "12", "0" ),
_H: makeBetweenMaskFunction( 0, 23, "12", " " ),
@@ -37,19 +59,19 @@ var maskDefinitions = {
mm: makeBetweenMaskFunction( 0, 59, "00", "0" ),
ss: makeBetweenMaskFunction( 0, 59, "00", "0" ),
tt: function( value ) {
+ var i, j, l,
+ valid = getAmPmArrays();
+
if ( value === "" ) {
- return "pm";
- }
- var lower = value.toLowerCase(),
- character = lower.charAt( 0 );
- if ( lower.length > 1 && lower.charAt( 1 ) !== "m" ) {
- return false;
+ return valid.pm && valid.pm[0];
}
- switch ( character ) {
- case "a":
- return "am";
- case "p":
- return "pm";
+
+ for ( i in valid ) {
+ for ( j = 0, l = valid[ i ].length; j < l; j++ ) {
+ if ( valid[ i ][ j ].substr( 0, value.length ) === value ) {
+ return valid[ i ][ 0 ];
+ }
+ }
}
}
};
@@ -90,6 +112,20 @@ $.widget( "ui.timepicker", {
_generateMask: function() {
var mask = "";
+ if ( window.Globalize ) {
+ mask = Globalize.culture().calendars.standard.patterns[ this.options.seconds ? "T" : "t" ];
+ mask = mask.replace( rsingleh, "_$1" );
+
+ // if the culture doesn't understand AM/PM - don't let timepickers understand it either.
+ if ( mask.indexOf( "tt" ) == -1 ) {
+ this.options.ampm = false;
+ } else if ( !this.options.ampm ) {
+ mask = mask.replace( rlowerhg, "H" ).replace( " tt", "" );
+ }
+
+ return mask;
+ }
+
mask += this.options.ampm ? "hh" : "HH";
mask += ":mm";
if ( this.options.seconds ) {
@@ -145,19 +181,27 @@ $.widget( "ui.timepicker", {
}
if ( key === "ampm" ) {
- var i, buffer, currentHour, currentTT;
- buffer = this.mask.buffer;
+ var i, currentHour, currentTT,
+ ampm = getAmPmArrays(),
+ buffer = this.mask.buffer,
+ newMask = this._generateMask();
+
+ // in the event that ampm was forced off due to locale, we need to check this again
+ if ( this.options.ampm === was ) {
+ return;
+ }
+
currentHour = parseInt( buffer[ 0 ].value, 10 );
for ( i = 0; i < buffer.length; i += 3 ) {
if ( buffer[ i ].valid === maskDefinitions.tt ) {
currentHour %= 12;
- if ( buffer[ i ].value === "pm" ) {
+ if ( jQuery.inArray( buffer[ i ].value, ampm.pm ) > -1 ) {
currentHour += 12;
}
}
}
- if ( value ) {
- currentTT = currentHour > 11 ? "pm" : "am";
+ if ( this.options.ampm ) {
+ currentTT = currentHour > 11 ? ampm.pm[0] : ampm.am[0];
currentHour = ( currentHour % 12 ) || 12;
buffer[ 0 ].value = ( currentHour < 10 ? "0" : "" ) + currentHour;
this.mask._paint();
@@ -185,14 +229,14 @@ $.widget( "ui.timepicker", {
_spinnerParse: function( val ) {
val = this.mask.buffer[ this.currentField * 3 ].value;
if ( this.currentField === ( this.options.seconds ? 3 : 2 ) ) {
- return val === "am" ? 0 : 1;
+ return jQuery.inArray( val, getAmPmArrays().am ) > -1 ? 0 : 1;
}
return parseInt( val, 10 ) || 0;
},
_spinnerValue: function( val ) {
var bufferObject = this.mask.buffer[ this.currentField * 3 ];
if ( this.currentField === ( this.options.seconds ? 3 : 2 ) ) {
- val = parseInt( val, 10 ) ? "pm" : "am";
+ val = getAmPmArrays()[ parseInt( val, 10 ) ? "pm" : "am" ][ 0 ];
}
bufferObject.value = bufferObject.valid( val );
this.mask._paint();
Please sign in to comment.
Something went wrong with that request. Please try again.