Skip to content

Feature/add max time #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature/add max time #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3af757
feat(set max time):set max time
skyler54 May 1, 2017
43cb430
feat(set max time):set max time
skyler54 May 1, 2017
2e997a3
doc(README.md):upadte README doc
skyler54 May 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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.

Expand Down
14 changes: 7 additions & 7 deletions src/ionic-timepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,30 @@
<div class="row" ng-class="{'padding_left_15px':time.format == 12}">
<div class="col col-25" ng-class="{'col-offset-20 col-25':time.format == 24}">
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="increaseHours()">
ng-click="increaseHours()" ng-disabled="!canIncreaseHours">
<i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.hours" class="time_picker_box_text"></div>
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="decreaseHours()">
ng-click="decreaseHours()" ng-disabled="!canDecreaseHours">
<i class="icon ion-chevron-down"></i></button>
</div>
<label class="col col-10 time_picker_colon"> : </label>

<div class="col col-25" ng-class="{'col-25':time.format == 24}">
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="increaseMinutes()"><i class="icon ion-chevron-up"></i></button>
ng-click="increaseMinutes()" ng-disabled="!canIncreaseMinutes"><i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.minutes" class="time_picker_box_text"></div>
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="decreaseMinutes()"><i class="icon ion-chevron-down"></i></button>
ng-click="decreaseMinutes()" ng-disabled="!canDecreaseMinutes"><i class="icon ion-chevron-down"></i></button>
</div>
<label class="col col-10 time_picker_colon" ng-if="time.format == 12"> : </label>

<div class="col col-25" ng-if="time.format == 12">
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="changeMeridian()"><i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.meridian" class="time_picker_box_text"></div>
ng-click="changeMeridian()" ng-disabled="!canAdjustMeridian"><i class="icon ion-chevron-up"></i></button>
<div ng-bind="time.meridian" class="time_picker_box_text" ng-disabled="!canAdjustMeridian"></div>
<button type="button" class="button button-clear button-small button-dark time_picker_arrows"
ng-click="changeMeridian()"><i class="icon ion-chevron-down"></i></button>
ng-click="changeMeridian()" ng-disabled="!canAdjustMeridian"><i class="icon ion-chevron-down"></i></button>
</div>
</div>
</div>
193 changes: 177 additions & 16 deletions src/ionic-timepicker.provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -61,27 +172,77 @@ 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
$scope.changeMeridian = function () {
$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));

Expand All @@ -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';
}
}
Expand Down Expand Up @@ -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);
}
});
Expand All @@ -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;
Expand Down