@@ -87,7 +87,7 @@ date-max-limit="" | String | false | Set a maximum date limit - you can use all
8787date-set-hidden="" | String(Boolean) | false | Set the default date to be shown only in calendar and not in the input field
8888date-disabled-dates="" | String([ Date(), Date(), ...] ) | false | Disable specific dates using an _ Array_ of dates
8989date-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 )
9191datepicker-class="" | String('class1 class2 class3') | false | Set custom class/es for the datepicker calendar
9292datepicker-append-to="" | String('#id','.classname', 'body') | false | Append the datepicker to #id or .class element or to body
9393datepicker-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