Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Added ability to handle empty model in timepicker #4203

Closed
wants to merge 5 commits into from
+37 −13
Closed

Added ability to handle empty model in timepicker #4203

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8cd457b
Added ability to handle empty model
fmccown Aug 13, 2015
6cb0ea6
Added ability to handle empty model - fixed PR
ftorghele-ef Oct 5, 2015
d283102
Merge pull request #1 from Eurofunk/master
fmccown Oct 5, 2015
00e6d2e
chore(timepicker): Added ability to handle empty model - fixed tests
ftorghele-ef Oct 6, 2015
311244f
Merge pull request #2 from Eurofunk/master
fmccown Oct 6, 2015
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
80 changes: 54 additions & 26 deletions src/timepicker/timepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,9 @@ angular.module('ui.bootstrap.timepicker', [])
}

function pad(value) {
if (value === null) {
return '';
}
return (angular.isDefined(value) && value.toString().length < 2) ? '0' + value : value.toString();
}

Expand Down Expand Up @@ -218,22 +221,28 @@ angular.module('ui.bootstrap.timepicker', [])
var hours = getHoursFromTemplate(),
minutes = getMinutesFromTemplate();

if (angular.isDefined(hours) && angular.isDefined(minutes)) {
selected.setHours(hours);
if (selected < min || selected > max) {
invalidate(true);
} else {
refresh('h');
if (angular.isDefined(hours)) {
if (angular.isDefined(minutes)) {
selected.setHours(hours);
selected.setMinutes(minutes);
if (selected < min || selected > max) {
invalidate(true);
} else {
refresh('h');
}
}
} else {
invalidate(true);
}
};

hoursInputEl.bind('blur', function(e) {
if (!$scope.invalidHours && $scope.hours < 10) {
ngModelCtrl.$setTouched();
if ($scope.hours === null || $scope.hours === "") {
invalidate(true);
} else if (!$scope.invalidHours && $scope.hours < 10) {
$scope.$apply(function() {
$scope.hours = pad($scope.hours);
$scope.hours = pad($scope.hours);
});
}
});
Expand All @@ -242,20 +251,26 @@ angular.module('ui.bootstrap.timepicker', [])
var minutes = getMinutesFromTemplate(),
hours = getHoursFromTemplate();

if (angular.isDefined(minutes) && angular.isDefined(hours)) {
selected.setMinutes(minutes);
if (selected < min || selected > max) {
invalidate(undefined, true);
} else {
refresh('m');
if (angular.isDefined(minutes)) {
if (angular.isDefined(hours)) {
selected.setHours(hours);
selected.setMinutes(minutes);
if (selected < min || selected > max) {
invalidate(undefined, true);
} else {
refresh('m');
}
}
} else {
invalidate(undefined, true);
}
};

minutesInputEl.bind('blur', function(e) {
if (!$scope.invalidMinutes && $scope.minutes < 10) {
ngModelCtrl.$setTouched();
if ($scope.minutes === null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to if(!$scope.minutes) {

invalidate(undefined, true);
} else if (!$scope.invalidMinutes && $scope.minutes < 10) {
$scope.$apply(function() {
$scope.minutes = pad($scope.minutes);
});
Expand Down Expand Up @@ -300,17 +315,23 @@ angular.module('ui.bootstrap.timepicker', [])
}

function updateTemplate(keyboardChange) {
var hours = selected.getHours(), minutes = selected.getMinutes();

if ($scope.showMeridian) {
hours = (hours === 0 || hours === 12) ? 12 : hours % 12; // Convert 24 to 12 hour system
}
if (ngModelCtrl.$modelValue == null) {
$scope.hours = null;
$scope.minutes = null;
$scope.meridian = meridians[0];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation is off here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, seems like the whole block's indentation is off.

} else {
var hours = selected.getHours(), minutes = selected.getMinutes();

if ($scope.showMeridian) {
hours = (hours === 0 || hours === 12) ? 12 : hours % 12; // Convert 24 to 12 hour system
}

$scope.hours = keyboardChange === 'h' ? hours : pad(hours);
if (keyboardChange !== 'm') {
$scope.minutes = pad(minutes);
}
$scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
$scope.hours = keyboardChange === 'h' ? hours : pad(hours);
if (keyboardChange !== 'm') {
$scope.minutes = pad(minutes);
}
$scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
}
}

function addMinutes(date, minutes) {
Expand Down Expand Up @@ -353,8 +374,15 @@ angular.module('ui.bootstrap.timepicker', [])
};

$scope.toggleMeridian = function() {
var minutes = getMinutesFromTemplate(),
hours = getHoursFromTemplate();

if (!$scope.noToggleMeridian()) {
addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
if (angular.isDefined(minutes) && angular.isDefined(hours)) {
addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
} else {
$scope.meridian = $scope.meridian == meridians[0] ? meridians[1] : meridians[0];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use === here.

}
}
};
}])
Expand Down
4 changes: 2 additions & 2 deletions template/timepicker/timepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
</tr>
<tr>
<td class="form-group" ng-class="{'has-error': invalidHours}">
<input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
<input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
</td>
<td>:</td>
<td class="form-group" ng-class="{'has-error': invalidMinutes}">
<input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
<input style="width:50px;" type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
</td>
<td ng-show="showMeridian"><button type="button" ng-class="{disabled: noToggleMeridian()}" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
</tr>
Expand Down