diff --git a/Source/Picker.Date.js b/Source/Picker.Date.js
index 4955443..b14ef9b 100644
--- a/Source/Picker.Date.js
+++ b/Source/Picker.Date.js
@@ -28,6 +28,7 @@ this.DatePicker = Picker.Date = new Class({
timePicker: false,
timePickerOnly: false, // deprecated, use onlyView = 'time'
timeWheelStep: 1, // 10,15,20,30
+ use24HourPicker: !((new Date('1999-12-31 23:59:59')).toLocaleTimeString().test(/pm$/i)), // Does the current locale use 24 hour time?
yearPicker: true,
yearsPerPage: 20,
@@ -533,14 +534,18 @@ var renderers = {
time: function(options, date, fn){
var container = new Element('div.time'),
// make sure that the minutes are timeWheelStep * k
- initMinutes = (date.get('minutes') / options.timeWheelStep).round() * options.timeWheelStep
+ initMinutes = (date.get('minutes') / options.timeWheelStep).round() * options.timeWheelStep;
+
+ if ( ! options.use24hourPicker ) {
+ container.addClass('hasAMPM');
+ }
if (initMinutes >= 60) initMinutes = 0;
date.set('minutes', initMinutes);
var hoursInput = new Element('input.hour[type=text]', {
title: Locale.get('DatePicker.use_mouse_wheel'),
- value: date.format('%H'),
+ value: date.format(options.use24HourPicker ? '%H' : '%I'),
events: {
click: function(event){
event.target.focus();
@@ -550,10 +555,9 @@ var renderers = {
event.stop();
hoursInput.focus();
var value = hoursInput.get('value').toInt();
- value = (event.wheel > 0) ? ((value < 23) ? value + 1 : 0)
- : ((value > 0) ? value - 1 : 23)
+ value = (event.wheel > 0) ? ((value < 23) ? value + 1 : 0) : ((value > 0) ? value - 1 : 23);
date.set('hours', value);
- hoursInput.set('value', date.format('%H'));
+ hoursInput.set('value', date.format(options.use24HourPicker ? '%H' : '%I'));
}.bind(this)
},
maxlength: 2
@@ -583,14 +587,55 @@ var renderers = {
maxlength: 2
}).inject(container);
+ if ( ! options.use24HourPicker ) {
+
+ var activateSelectedButton = function(e) {
+ e.preventDefault();
+ ampmWrapper.getElement('.active').removeClass('active');
+ this.addClass('active');
+ };
+
+ var ampmWrapper = new Element('div.ampmWrapper').inject(container);
+ var amButton = new Element('a.am', {
+ href : '#',
+ text : 'am',
+ events : {
+ click : activateSelectedButton
+ }
+ }).inject(ampmWrapper);
+ var pmButton = new Element('a.pm', {
+ href : '#',
+ text : 'pm',
+ events : {
+ click : activateSelectedButton
+ }
+ }).inject(ampmWrapper);
+
+ if ( date.get('hours') > 12 ) {
+ pmButton.addClass('active');
+ } else {
+ amButton.addClass('active');
+ }
+ }
+
new Element('input.ok', {
'type': 'submit',
value: Locale.get('DatePicker.time_confirm_button'),
events: {click: function(event){
+ var selectedHours = hoursInput.get('value').toInt(),
+ isPM;
event.stop();
+ if ( ! options.use24HourPicker ) {
+ isPM = pmButton.hasClass('active');
+ if ( selectedHours === 12 ) {
+ selectedHours = (isPM) ? selectedHours : 0;
+ } else {
+ selectedHours = (isPM) ? selectedHours + 12 : selectedHours;
+ }
+ }
date.set({
- hours: hoursInput.get('value').toInt(),
+ hours: selectedHours,
minutes: minutesInput.get('value').toInt()
});
fn(date.clone());
diff --git a/Source/datepicker_bootstrap/_mixins_and_vars.scss b/Source/datepicker_bootstrap/_mixins_and_vars.scss
index 9e036f4..f12be91 100644
--- a/Source/datepicker_bootstrap/_mixins_and_vars.scss
+++ b/Source/datepicker_bootstrap/_mixins_and_vars.scss
@@ -1,4 +1,5 @@
// Colors
+$backgroundColor : #fff;
$gray : #777;
$grayLight : #999;
$grayLightBetween : #CCC;
diff --git a/Source/datepicker_bootstrap/datepicker_bootstrap.css b/Source/datepicker_bootstrap/datepicker_bootstrap.css
index ad81ac0..6cf983b 100644
--- a/Source/datepicker_bootstrap/datepicker_bootstrap.css
+++ b/Source/datepicker_bootstrap/datepicker_bootstrap.css
@@ -144,11 +144,38 @@
display: inline-block; }
.datepicker_bootstrap .time .hour,
.datepicker_bootstrap .time .separator,
- .datepicker_bootstrap .time .minutes {
+ .datepicker_bootstrap .time .minutes,
+ .datepicker_bootstrap .time .ampmWrapper {
width: 3em;
font-size: 1.5em;
text-align: center;
padding: 0.2em; }
+ .datepicker_bootstrap .time .ampmWrapper {
+ text-transform: uppercase;
+ font-size: 0.825em;
+ float: right;
+ margin: -0.5em 0.5em 0 0; }
+ .datepicker_bootstrap .time .ampmWrapper a {
+ text-decoration: none;
+ display: block;
+ color: #cccccc;
+ line-height: 1.5;
+ border: 1px solid white;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px; }
+ .datepicker_bootstrap .time .ampmWrapper a.am {
+ margin-bottom: 0.25em; }
+ .datepicker_bootstrap .time .ampmWrapper a:hover {
+ background-color: #eeeeee; }
+ .datepicker_bootstrap .time .ampmWrapper a:active {
+ -webkit-box-shadow: inset 0 1px 5px #999999;
+ -moz-box-shadow: inset 0 1px 5px #999999;
+ box-shadow: inset 0 1px 5px #999999; }
+ .datepicker_bootstrap .time .ampmWrapper a.active {
+ border-color: #ccc;
+ background-color: #fbfbfb;
+ color: #049cdb; }
.datepicker_bootstrap .time .separator {
width: 1em; }
.datepicker_bootstrap .time .ok:active {
diff --git a/Source/datepicker_bootstrap/datepicker_bootstrap.scss b/Source/datepicker_bootstrap/datepicker_bootstrap.scss
index 3bdf7c6..135f4d6 100644
--- a/Source/datepicker_bootstrap/datepicker_bootstrap.scss
+++ b/Source/datepicker_bootstrap/datepicker_bootstrap.scss
@@ -42,7 +42,7 @@ $datepicker-header-height: 2.5em;
line-height : normal;
width : $datepicker-width;
padding : 0.3em;
- background-color: white;
+ background-color: $backgroundColor;
border : 1px solid $grayLightBetween;
@include box-shadow(0 5px 10px rgba(0,0,0,0.2));
@include border-radius(3px);
@@ -73,8 +73,8 @@ $datepicker-header-height: 2.5em;
overflow : hidden;
top : 1em;
display : block;
- border-top : 6px solid white;
- border-bottom : 6px solid white;
+ border-top : 6px solid $backgroundColor;
+ border-bottom : 6px solid $backgroundColor;
height : 0px;
}
.previous {
@@ -181,12 +181,47 @@ $datepicker-header-height: 2.5em;
.time .hour,
.time .separator,
- .time .minutes {
+ .time .minutes,
+ .time .ampmWrapper {
width : 3em;
font-size : 1.5em;
text-align : center;
padding : 0.2em;
}
+
+ .time .ampmWrapper {
+ text-transform: uppercase;
+ font-size: 0.825em;
+ float: right;
+ margin: -0.5em 0.5em 0 0;
+
+ a {
+ text-decoration: none;
+ display: block;
+ color: $grayLightBetween;
+ line-height: 1.5;
+ border: 1px solid $backgroundColor;
+ @include border-radius(2px);
+
+ &.am {
+ margin-bottom: 0.25em;
+ }
+
+ &:hover {
+ background-color: $grayLighter;
+ }
+
+ &:active {
+ @include box-shadow(inset 0 1px 5px $grayLight);
+ }
+
+ &.active {
+ border-color: #ccc;
+ background-color: lighten($grayLighter, 5%);
+ color: $selectedColor;
+ }
+ }
+ }
.time .separator {
width: 1em;
@@ -207,7 +242,7 @@ $datepicker-header-height: 2.5em;
box-shadow : none;
border : solid 1px #CCC;
outline : none;
- background-color: white;
+ background-color: $backgroundColor;
@include border-radius(2px);
}
}
diff --git a/Test/timepicker.html b/Test/timepicker.html
index b38644d..9223679 100644
--- a/Test/timepicker.html
+++ b/Test/timepicker.html
@@ -12,12 +12,14 @@
+