diff --git a/README.md b/README.md index 3fbbc24..4d2bfd1 100755 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ Your config method may look like this if you wish to setup the configuration. Bu .config(function (ionicTimePickerProvider) { var timePickerObj = { inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)), + maxTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)) + 3600, //3600 in seconds format: 12, step: 15, setLabel: 'Set', @@ -61,13 +62,15 @@ The properties you can configure are as follows. **a) inputTime**(Optional) : This is the input epoch time which we can pass to the component. You can give any valid epoch time. Default value is `(((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60))`. -**b) format**(Optional) : This takes two values 12 or 24. If we give 12 as the value, then it will be `12` format time picker or else if you give `24` as the value, then it will be 24 hour format time picker. Default value is `12`. +**b) maxTime**(Optional) : This is the maximum time untill which the user is allowed to select the time. -**c) step**(Optional) : This is the value which will be used to increment/decrement the values of the minutes. You can give any value like 10/15/20/30. Default value is `15`. +**c) format**(Optional) : This takes two values 12 or 24. If we give 12 as the value, then it will be `12` format time picker or else if you give `24` as the value, then it will be 24 hour format time picker. Default value is `12`. -**d) setLabel**(Optional) : The label for `Set` button. Default value is `Set` +**d) step**(Optional) : This is the value which will be used to increment/decrement the values of the minutes. You can give any value like 10/15/20/30. Default value is `15`. -**e) closeLabel**(Optional) : The label for `Close` button. Default value is `Close` +**e) setLabel**(Optional) : The label for `Set` button. Default value is `Set` + +**f) closeLabel**(Optional) : The label for `Close` button. Default value is `Close` 5) Inject `ionicTimePicker` in the controller, where you wish to use this component. Then using the below method you can call the timepicker. diff --git a/src/ionic-timepicker.html b/src/ionic-timepicker.html index b5730e2..4e97e3a 100644 --- a/src/ionic-timepicker.html +++ b/src/ionic-timepicker.html @@ -3,30 +3,30 @@
+ ng-click="increaseMinutes()" ng-disabled="!canIncreaseMinutes">
+ ng-click="decreaseMinutes()" ng-disabled="!canDecreaseMinutes">
-
+ ng-click="changeMeridian()" ng-disabled="!canAdjustMeridian"> +
+ ng-click="changeMeridian()" ng-disabled="!canAdjustMeridian">
\ No newline at end of file diff --git a/src/ionic-timepicker.provider.js b/src/ionic-timepicker.provider.js index 5a2ec6c..a9d733a 100644 --- a/src/ionic-timepicker.provider.js +++ b/src/ionic-timepicker.provider.js @@ -17,7 +17,14 @@ angular.module('ionic-timepicker.provider', []) this.$get = ['$rootScope', '$ionicPopup', function ($rootScope, $ionicPopup) { var provider = {}; + var maxTime = {}; //in seconds + var minTime = {}; //in seconds var $scope = $rootScope.$new(); + $scope.canIncreaseHours = false; + $scope.canDecreaseHours = false; + $scope.canIncreaseMinutes = false; + $scope.canDecreaseMinutes = false; + $scope.canAdjustMeridian = false; $scope.today = resetHMSM(new Date()).getTime(); $scope.time = {}; @@ -30,11 +37,109 @@ angular.module('ionic-timepicker.provider', []) return currentDate; } + //get picker time in seconds + function getTimeInSeconds() { + var totalSec = 0; + if ($scope.time.format == 12) { + $scope.time.hours = Number($scope.time.hours); + if ($scope.time.meridian == 'PM' && $scope.time.hours != 12) { + $scope.time.hours += 12; + } else if ($scope.time.meridian == 'AM' && $scope.time.hours == 12) { + $scope.time.hours -= 12; + } + totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); + } else { + totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); + } + return totalSec; + } + + function getRailwayTime(hours, meridian) { //hours in 12 hour format + if (meridian === 'AM') { + return hours; + } + else if (hours !== 12 && meridian === 'PM') { + return 12 + hours; + } + return hours; + } + + //hanlde picker step buttons + function handlePickerStepButton() { + if (angular.isDefined($scope.mainObj.maxTime)) { + var pickerHours = getRailwayTime(Number($scope.time.hours), $scope.time.meridian); + var pickerMinutes = Number($scope.time.minutes); + + //handle hours + if (pickerHours === minTime.hours && pickerHours === maxTime.hours) { + $scope.canIncreaseHours = false; + $scope.canDecreaseHours = false; + } + else if (pickerHours > minTime.hours && pickerHours < maxTime.hours) { + $scope.canIncreaseHours = true; + $scope.canDecreaseHours = true; + } + else if (pickerHours === minTime.hours && pickerHours < maxTime.hours) { + $scope.canIncreaseHours = true; + $scope.canDecreaseHours = false; + } + else if (pickerHours > minTime.hours && pickerHours === maxTime.hours) { + $scope.canIncreaseHours = false; + $scope.canDecreaseHours = true; + } + + //handle minutes + var pickerTotalMinutes = Number(getRailwayTime(Number($scope.time.hours), $scope.time.meridian) * 60) + Number($scope.time.minutes); + var minTimeTotalMinutes = (minTime.hours * 60) + minTime.minutes; + var maxTimeTotalMinutes = (maxTime.hours * 60) + maxTime.minutes; + //check if its a valid time + if (pickerTotalMinutes <= maxTimeTotalMinutes) { + if (pickerTotalMinutes === minTimeTotalMinutes && pickerTotalMinutes === maxTimeTotalMinutes) { + $scope.canIncreaseMinutes = false; + $scope.canDecreaseMinutes = false; + } + else if (pickerTotalMinutes === minTimeTotalMinutes && pickerTotalMinutes < maxTimeTotalMinutes) { + $scope.canIncreaseMinutes = true; + $scope.canDecreaseMinutes = false; + } + else if (pickerTotalMinutes > minTimeTotalMinutes && pickerTotalMinutes === maxTimeTotalMinutes) { + $scope.canIncreaseMinutes = false; + $scope.canDecreaseMinutes = true; + } + else if (pickerTotalMinutes > minTimeTotalMinutes && pickerTotalMinutes < maxTimeTotalMinutes) { + $scope.canIncreaseMinutes = true; + $scope.canDecreaseMinutes = true; + } + } + else { + $scope.time.minutes = maxTime.minutes; + $scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; + + $scope.canIncreaseMinutes = false; + $scope.canDecreaseMinutes = true; + } + } + } + + function toggleMeridian() { + if ($scope.time.meridian === 'AM') { + $scope.time.meridian = 'PM'; + } + else if ($scope.time.meridian === 'PM') { + $scope.time.meridian = 'AM'; + } + } //Increasing the hours $scope.increaseHours = function () { $scope.time.hours = Number($scope.time.hours); + var minutes = Number($scope.time.minutes) if ($scope.mainObj.format == 12) { + //meridian update + if ($scope.time.hours === 11) { + toggleMeridian(); + } + if ($scope.time.hours != 12) { $scope.time.hours += 1; } else { @@ -45,12 +150,18 @@ angular.module('ionic-timepicker.provider', []) $scope.time.hours = ($scope.time.hours + 1) % 24; } $scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours; + handlePickerStepButton(); }; //Decreasing the hours $scope.decreaseHours = function () { $scope.time.hours = Number($scope.time.hours); if ($scope.mainObj.format == 12) { + //meridian update + if ($scope.time.hours === 12) { + toggleMeridian(); + } + if ($scope.time.hours > 1) { $scope.time.hours -= 1; } else { @@ -61,20 +172,37 @@ angular.module('ionic-timepicker.provider', []) $scope.time.hours = ($scope.time.hours + 23) % 24; } $scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours; + handlePickerStepButton(); }; //Increasing the minutes $scope.increaseMinutes = function () { $scope.time.minutes = Number($scope.time.minutes); + var minutesNow = $scope.time.minutes; $scope.time.minutes = ($scope.time.minutes + $scope.mainObj.step) % 60; + var minutesAfter = $scope.time.minutes; + if ($scope.mainObj.format == 24) { + if ((Number($scope.time.minutes) === 12) && (minutesNow === 59) && (minutesAfter === 0)) { + toggleMeridian(); + } + } $scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; + handlePickerStepButton(); }; //Decreasing the minutes $scope.decreaseMinutes = function () { $scope.time.minutes = Number($scope.time.minutes); + var minutesNow = $scope.time.minutes; $scope.time.minutes = ($scope.time.minutes + (60 - $scope.mainObj.step)) % 60; + var minutesAfter = $scope.time.minutes; + if ($scope.mainObj.format == 24) { + if ((Number($scope.time.minutes) === 1) && (minutesNow === 0) < (minutesAfter === 59)) { + toggleMeridian(); + } + } $scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; + handlePickerStepButton(); }; //Changing the meridian @@ -82,6 +210,39 @@ angular.module('ionic-timepicker.provider', []) $scope.time.meridian = ($scope.time.meridian === "AM") ? "PM" : "AM"; }; + function getHMMFromSeconds(time, format) { //time in seconds + var hours, minutes, meridian; + hours = Math.floor(time / (60 * 60)); + + var rem = time % (60 * 60); + if (format == 12) { + if (hours >= 12) { + meridian = 'PM'; + + if (hours > 12) { + hours -= 12; + } + } + else { + meridian = 'AM'; + } + } + + if (hours === 0) { + hours = 12; + } + + minutes = rem / 60; + hours = Math.floor(hours); + minutes = Math.floor(minutes); + + return { + hours: hours, + minutes: minutes, + meridian: meridian + } + } + function setMinSecs(ipTime, format) { $scope.time.hours = Math.floor(ipTime / (60 * 60)); @@ -90,11 +251,11 @@ angular.module('ionic-timepicker.provider', []) if ($scope.time.hours >= 12) { $scope.time.meridian = 'PM'; - if($scope.time.hours > 12){ + if ($scope.time.hours > 12) { $scope.time.hours -= 12; } } - else { + else { $scope.time.meridian = 'AM'; } } @@ -126,19 +287,7 @@ angular.module('ionic-timepicker.provider', []) text: $scope.mainObj.setLabel, type: 'button_set', onTap: function (e) { - var totalSec = 0; - - if ($scope.time.format == 12) { - $scope.time.hours = Number($scope.time.hours); - if ($scope.time.meridian == 'PM' && $scope.time.hours != 12) { - $scope.time.hours += 12; - } else if ($scope.time.meridian == 'AM' && $scope.time.hours == 12) { - $scope.time.hours -= 12; - } - totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); - } else { - totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); - } + var totalSec = getTimeInSeconds(); $scope.mainObj.callback(totalSec); } }); @@ -149,12 +298,24 @@ angular.module('ionic-timepicker.provider', []) }); $scope.popup = $ionicPopup.show({ - templateUrl: 'ionic-timepicker.html', + templateUrl: 'lib/ionic-timepicker/src/ionic-timepicker.html', scope: $scope, cssClass: 'ionic_timepicker_popup', buttons: buttons }); + if (angular.isDefined($scope.mainObj.maxTime)) { + maxTime = getHMMFromSeconds($scope.mainObj.maxTime, 24); + minTime = getHMMFromSeconds($scope.mainObj.inputTime, 24); + handlePickerStepButton(); + } + else { + $scope.canIncreaseHours = true; + $scope.canDecreaseHours = true; + $scope.canIncreaseMinutes = true; + $scope.canDecreaseMinutes = true; + $scope.canAdjustMeridian = true; + } }; return provider;