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="increaseHours()" ng-disabled="!canIncreaseHours">
+ ng-click="decreaseHours()" ng-disabled="!canDecreaseHours">
:
+ 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;