From e3af757670533aeb340ea103da776b802af86e27 Mon Sep 17 00:00:00 2001 From: Rajesh Date: Mon, 1 May 2017 16:52:40 +0530 Subject: [PATCH 1/3] feat(set max time):set max time add feature max time if we need to restrict the users to choose time between a certain duration by providing a max time attribute --- src/ionic-timepicker.html | 14 +-- src/ionic-timepicker.provider.js | 171 ++++++++++++++++++++++++++++--- 2 files changed, 162 insertions(+), 23 deletions(-) diff --git a/src/ionic-timepicker.html b/src/ionic-timepicker.html index b5730e2..2a87447 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=true> +
+ ng-click="changeMeridian()" ng-disabled=true>
\ No newline at end of file diff --git a/src/ionic-timepicker.provider.js b/src/ionic-timepicker.provider.js index 5a2ec6c..e816019 100644 --- a/src/ionic-timepicker.provider.js +++ b/src/ionic-timepicker.provider.js @@ -17,7 +17,13 @@ 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.today = resetHMSM(new Date()).getTime(); $scope.time = {}; @@ -30,6 +36,95 @@ 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 (meridian === 'PM') { + return 12 + hours; + } + } + + //hanlde picker step buttons + function handlePickerStepButton() { + 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 () { @@ -38,6 +133,7 @@ angular.module('ionic-timepicker.provider', []) if ($scope.time.hours != 12) { $scope.time.hours += 1; } else { + toggleMeridian(); $scope.time.hours = 1; } } @@ -45,6 +141,7 @@ 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 @@ -54,6 +151,7 @@ angular.module('ionic-timepicker.provider', []) if ($scope.time.hours > 1) { $scope.time.hours -= 1; } else { + toggleMeridian(); $scope.time.hours = 12; } } @@ -61,20 +159,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 +197,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 +238,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 +274,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 +285,15 @@ 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 }); + maxTime = getHMMFromSeconds($scope.mainObj.maxTime, 24); + minTime = getHMMFromSeconds($scope.mainObj.inputTime, 24); + handlePickerStepButton(); }; return provider; From 43cb430a0cb92eabc055bcc76b66629cdd593216 Mon Sep 17 00:00:00 2001 From: Rajesh Date: Mon, 1 May 2017 17:18:20 +0530 Subject: [PATCH 2/3] feat(set max time):set max time add feature max time if we need to restrict the users to choose time between a certain duration by providing a max time attribute --- src/ionic-timepicker.html | 6 +- src/ionic-timepicker.provider.js | 124 ++++++++++++++++++------------- 2 files changed, 76 insertions(+), 54 deletions(-) diff --git a/src/ionic-timepicker.html b/src/ionic-timepicker.html index 2a87447..4e97e3a 100644 --- a/src/ionic-timepicker.html +++ b/src/ionic-timepicker.html @@ -23,10 +23,10 @@
-
+ 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 e816019..a9d733a 100644 --- a/src/ionic-timepicker.provider.js +++ b/src/ionic-timepicker.provider.js @@ -24,6 +24,7 @@ angular.module('ionic-timepicker.provider', []) $scope.canDecreaseHours = false; $scope.canIncreaseMinutes = false; $scope.canDecreaseMinutes = false; + $scope.canAdjustMeridian = false; $scope.today = resetHMSM(new Date()).getTime(); $scope.time = {}; @@ -57,64 +58,67 @@ angular.module('ionic-timepicker.provider', []) if (meridian === 'AM') { return hours; } - else if (meridian === 'PM') { + else if (hours !== 12 && meridian === 'PM') { return 12 + hours; } + return hours; } //hanlde picker step buttons function handlePickerStepButton() { - 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; + 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 (pickerTotalMinutes === minTimeTotalMinutes && pickerTotalMinutes < maxTimeTotalMinutes) { - $scope.canIncreaseMinutes = true; - $scope.canDecreaseMinutes = false; + else if (pickerHours > minTime.hours && pickerHours < maxTime.hours) { + $scope.canIncreaseHours = true; + $scope.canDecreaseHours = true; } - else if (pickerTotalMinutes > minTimeTotalMinutes && pickerTotalMinutes === maxTimeTotalMinutes) { - $scope.canIncreaseMinutes = false; - $scope.canDecreaseMinutes = 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 if (pickerTotalMinutes > minTimeTotalMinutes && pickerTotalMinutes < maxTimeTotalMinutes) { - $scope.canIncreaseMinutes = 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; } } - 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() { @@ -129,11 +133,16 @@ angular.module('ionic-timepicker.provider', []) //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 { - toggleMeridian(); $scope.time.hours = 1; } } @@ -148,10 +157,14 @@ angular.module('ionic-timepicker.provider', []) $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 { - toggleMeridian(); $scope.time.hours = 12; } } @@ -291,9 +304,18 @@ angular.module('ionic-timepicker.provider', []) buttons: buttons }); - maxTime = getHMMFromSeconds($scope.mainObj.maxTime, 24); - minTime = getHMMFromSeconds($scope.mainObj.inputTime, 24); - handlePickerStepButton(); + 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; From 2e997a3bfc5c6efea774579c8288e49edba68b73 Mon Sep 17 00:00:00 2001 From: Rajesh Date: Mon, 1 May 2017 17:33:59 +0530 Subject: [PATCH 3/3] doc(README.md):upadte README doc update the README doc by adding the attribute max time --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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.