Skip to content
This repository has been archived by the owner on Jan 19, 2022. It is now read-only.

Added option to use tel type for time fields #72

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added option to use tel type for time fields #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions src/picker-popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,23 +51,23 @@
<label class="col col-20">
<div class="item item-input">
<div>
<input type="text" ng-model="bind.hour" pattern="0?([01]?[0-9]|2[0-3])" ng-change="change('hour')" ng-blur="changed()" required>
<input type="{{timeFieldType}}" ng-model="bind.hour" pattern="0?([01]?[0-9]|2[0-3])" ng-change="change('hour')" ng-blur="changed()" required>
Copy link
Owner

Choose a reason for hiding this comment

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

Please use ng-attr-type= instead of type=, there were some problems in older browsers with it.

</div>
</div>
</label>
<div class="col colon">:</div>
<label class="col col-20">
<div class="item item-input">
<div>
<input type="text" ng-model="bind.minute" pattern="0?[0-5]?[0-9]" ng-change="change('minute')" ng-blur="changed()" required>
<input type="{{timeFieldType}}" ng-model="bind.minute" pattern="0?[0-5]?[0-9]" ng-change="change('minute')" ng-blur="changed()" required>
</div>
</div>
</label>
<div ng-if-start="secondsEnabled" class="col colon">:</div>
<label ng-if-end class="col col-20">
<div class="item item-input">
<div>
<input type="text" ng-model="bind.second" pattern="0?[0-5]?[0-9]" ng-change="change('second')" ng-blur="changed()" required>
<input type="{{timeFieldType}}" ng-model="bind.second" pattern="0?[0-5]?[0-9]" ng-change="change('second')" ng-blur="changed()" required>
</div>
</div>
</label>
Expand Down
7 changes: 6 additions & 1 deletion src/picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ angular.module("ion-datetime-picker", ["ionic"])
hourStep: "=?",
minuteStep: "=?",
secondStep: "=?",
onlyValid: "=?"
onlyValid: "=?",
telTypeForTimeFields: "=?"
Copy link
Owner

@katemihalikova katemihalikova Oct 7, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Remove this line (because all boolean attrs are handled differently, see below).

},
controller: function($scope, $ionicPopup, $ionicPickerI18n, $timeout) {
$scope.i18n = $ionicPickerI18n;
Expand Down Expand Up @@ -281,6 +282,10 @@ angular.module("ion-datetime-picker", ["ionic"])
changeViewData();
};

$scope.timeFieldType = function() {
Copy link
Owner

@katemihalikova katemihalikova Oct 7, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Remove this and instead use the same approach as for example mondayFirst attr on line 311, in the link function.

$scope.timeFieldType = "useTelType" in $attrs && $attrs.useTelType !== "false" ? "tel" : "text";

use-tel-type is shorter than tel-type-for-time-fields and IMHO still expresses its purpose.

return $scope.telTypeForTimeFields ? "tel" : "text";
Copy link
Owner

Choose a reason for hiding this comment

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

In the future, please try to maintain the existing code style, including indentation style, even if you think that it's weird and unusual :)

};

if ($scope.dateEnabled) {
$scope.$watch(function() {
return new Date().getDate();
Expand Down