Skip to content
This repository was archived by the owner on Feb 18, 2022. It is now read-only.

Commit b9b3f91

Browse files
committed
Updated README.md
1 parent e074cbb commit b9b3f91

File tree

1 file changed

+39
-1
lines changed

1 file changed

+39
-1
lines changed

README.md

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ date-max-limit="" | String | false | Set a maximum date limit - you can use all
8787
date-set-hidden="" | String(Boolean) | false | Set the default date to be shown only in calendar and not in the input field
8888
date-disabled-dates="" | String([Date(), Date(), ...]) | false | Disable specific dates using an _Array_ of dates
8989
date-refocus="" | String(Boolean) | false | Set the datepicker to re-focus the input after selecting a date
90-
date-typer="" | String(Boolean) | false | Set the datepicker to update calendar date when user is typing a date
90+
date-typer="" | String(Boolean) | false | Set the datepicker to update calendar date when user is typing a date, see validation [tips](#validation)
9191
datepicker-class="" | String('class1 class2 class3') | false | Set custom class/es for the datepicker calendar
9292
datepicker-append-to="" | String('#id','.classname', 'body') | false | Append the datepicker to #id or .class element or to body
9393
datepicker-toggle="" | String(Boolean) | true | Set the datepicker to toggle its visibility on focus and blur
@@ -153,6 +153,44 @@ To achieve this, you just have to use this CSS line:
153153
visibility:visible;
154154
}
155155
```
156+
###Tips
157+
158+
####Live input typing validation
159+
If you want to validate the input, while user is typing (live), you have to refer to `ngModel`.
160+
As long as you use something like:
161+
```html
162+
<div ng-controller="MyCtrl as ctrl">
163+
<input datepicker type="text" ng-model="myDate"/>
164+
</div>
165+
```
166+
You can show validation errors simply validating the ngModel, as you would do for any other type of input, for example:
167+
```javascript
168+
.controller('Ctrl', ['$scope', function ($scope) {
169+
var liveDate;
170+
171+
$scope.$watch('myDate', function (value) {
172+
try {
173+
liveDate = new Date(value);
174+
} catch(e) {}
175+
176+
if (!liveDate) {
177+
178+
$scope.error = "This is not a valid date";
179+
} else {
180+
$scope.error = false;
181+
}
182+
});
183+
}]);
184+
```
185+
186+
Then your final html:
187+
```html
188+
<div ng-controller="MyCtrl as ctrl">
189+
<input type="text" ng-model="myDate" datepicker/>
190+
<div ng-if="ctrl.error">{{ctrl.error}}</div>
191+
</div>
192+
```
193+
156194

157195
### Example
158196

0 commit comments

Comments
 (0)