From f678cb85a15940879e35ef52e77c635b56d221b1 Mon Sep 17 00:00:00 2001 From: Michael Bester Date: Tue, 9 Jul 2013 16:48:38 -0400 Subject: [PATCH 1/2] Adding an option for use24HourClock --- Source/Picker.Date.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Source/Picker.Date.js b/Source/Picker.Date.js index 4955443..7495365 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,14 @@ 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 (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 +551,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 From 8c1cb8d5a952576b74ba49f49b320980587045fb Mon Sep 17 00:00:00 2001 From: Michael Bester Date: Tue, 9 Jul 2013 18:56:42 -0400 Subject: [PATCH 2/2] Adding AM/PM buttons and basic styling for both in datepicker_bootstrap --- Source/Picker.Date.js | 47 ++++++++++++++++++- .../_mixins_and_vars.scss | 1 + .../datepicker_bootstrap.css | 29 +++++++++++- .../datepicker_bootstrap.scss | 45 ++++++++++++++++-- Test/timepicker.html | 2 + 5 files changed, 117 insertions(+), 7 deletions(-) diff --git a/Source/Picker.Date.js b/Source/Picker.Date.js index 7495365..b14ef9b 100644 --- a/Source/Picker.Date.js +++ b/Source/Picker.Date.js @@ -535,6 +535,10 @@ var renderers = { var container = new Element('div.time'), // make sure that the minutes are timeWheelStep * k initMinutes = (date.get('minutes') / options.timeWheelStep).round() * options.timeWheelStep; + + if ( ! options.use24hourPicker ) { + container.addClass('hasAMPM'); + } if (initMinutes >= 60) initMinutes = 0; date.set('minutes', initMinutes); @@ -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 @@ +