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

Commit

Permalink
feat(timepicker): added ability to handle empty model
Browse files Browse the repository at this point in the history
Closes #1114
Closes #4203
Closes #4617
  • Loading branch information
ftorghele-ef authored and wesleycho committed Oct 28, 2015
1 parent c7fa845 commit 8ffdaeb
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 20 deletions.
63 changes: 45 additions & 18 deletions src/timepicker/timepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,11 @@ angular.module('ui.bootstrap.timepicker', [])
return (seconds >= 0 && seconds < 60) ? seconds : undefined;
}

function pad( value ) {
function pad(value) {
if (value === null) {
return '';
}

return (angular.isDefined(value) && value.toString().length < 2) ? '0' + value : value.toString();
}

Expand Down Expand Up @@ -209,7 +213,6 @@ angular.module('ui.bootstrap.timepicker', [])
$scope.$apply((isScrollingUp(e)) ? $scope.incrementSeconds() : $scope.decrementSeconds());
e.preventDefault();
});

};

// Respond on up/down arrowkeys
Expand Down Expand Up @@ -281,6 +284,7 @@ angular.module('ui.bootstrap.timepicker', [])

if (angular.isDefined(hours) && angular.isDefined(minutes)) {
selected.setHours(hours);
selected.setMinutes(minutes);
if (selected < min || selected > max) {
invalidate(true);
} else {
Expand All @@ -292,7 +296,10 @@ angular.module('ui.bootstrap.timepicker', [])
};

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);
});
Expand All @@ -304,6 +311,7 @@ angular.module('ui.bootstrap.timepicker', [])
hours = getHoursFromTemplate();

if (angular.isDefined(minutes) && angular.isDefined(hours)) {
selected.setHours(hours);
selected.setMinutes(minutes);
if (selected < min || selected > max) {
invalidate(undefined, true);
Expand All @@ -316,7 +324,10 @@ angular.module('ui.bootstrap.timepicker', [])
};

minutesInputEl.bind('blur', function(e) {
if (!$scope.invalidMinutes && $scope.minutes < 10) {
ngModelCtrl.$setTouched();
if ($scope.minutes === null) {
invalidate(undefined, true);
} else if (!$scope.invalidMinutes && $scope.minutes < 10) {
$scope.$apply(function() {
$scope.minutes = pad($scope.minutes);
});
Expand Down Expand Up @@ -381,22 +392,31 @@ angular.module('ui.bootstrap.timepicker', [])
}

function updateTemplate(keyboardChange) {
var hours = selected.getHours(),
minutes = selected.getMinutes(),
seconds = selected.getSeconds();
if (ngModelCtrl.$modelValue == null) {
$scope.hours = null;
$scope.minutes = null;
$scope.seconds = null;
$scope.meridian = meridians[0];
} else {
var hours = selected.getHours(),
minutes = selected.getMinutes(),
seconds = selected.getSeconds();

if ($scope.showMeridian) {
hours = (hours === 0 || hours === 12) ? 12 : hours % 12; // Convert 24 to 12 hour system
}
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);
}
if (keyboardChange !== 's') {
$scope.seconds = pad(seconds);
$scope.hours = keyboardChange === 'h' ? hours : pad(hours);
if (keyboardChange !== 'm') {
$scope.minutes = pad(minutes);
}
$scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];

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

function addSecondsToSelected(seconds) {
Expand Down Expand Up @@ -455,8 +475,15 @@ angular.module('ui.bootstrap.timepicker', [])
};

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

if (!$scope.noToggleMeridian()) {
addSecondsToSelected(12 * 60 * (selected.getHours() < 12 ? 60 : -60));
if (angular.isDefined(minutes) && angular.isDefined(hours)) {
addSecondsToSelected(12 * 60 * (selected.getHours() < 12 ? 60 : -60));
} else {
$scope.meridian = $scope.meridian === meridians[0] ? meridians[1] : meridians[0];
}
}
};
}])
Expand Down
4 changes: 2 additions & 2 deletions template/timepicker/timepicker.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,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" tabindex="{{::tabindex}}">
<input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}">
</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" tabindex="{{::tabindex}}">
<input style="width:50px;" type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}">
</td>
<td ng-show="showSeconds">:</td>
<td class="form-group" ng-class="{'has-error': invalidSeconds}" ng-show="showSeconds">
Expand Down

0 comments on commit 8ffdaeb

Please sign in to comment.