This directive converts model from date inserted by user to ISO format. Directive tries more formats specified in constant. If input does not match any format, ngModel is null.
Directive also adds some validation functions.
Validation name | Description |
---|---|
date | If inserted date is valid. |
minDate | If parsed date is greater then or equal date specified in minDate param. |
maxDate | If parsed date is lower then or equal date specified in maxDate param. |
<ANY data-kp-date-parser
data-kp-date-parser-model-format="string"
data-kp-date-parser-view-format="string"
data-[min-date="expression"]
data-[max-date="expression"]>
...
</ANY>
Param | Type | Details |
---|---|---|
kpDateParserModelFormat | String |
Custom model format. It supports formats from Luxon. |
kpDateParserViewFormat | String |
Custom view format. It supports formats from Luxon. Also, supports a special format |
minDate
(optional)
|
expression |
Minimum date validation given in String ISO format or null for disable it. |
maxDate
(optional)
|
expression |
Maximum date validation given in String ISO format or null for disable it. |
<main class="container-fluid" ng-form="form" ng-controller="ctrl as ctrl">
<div class="row">
<div class="col-sm-2 form-group">
<label><input type="checkbox" ng-model="minDateValidation">Min Date Validation: </label>
<input class="form-control" type="date" ng-disabled="!minDateValidation" ng-model="minDate">
</div>
</div>
<div class="row">
<div class="col-sm-2 form-group">
<label><input type="checkbox" ng-model="maxDateValidation">Max Date Validation: </label>
<input class="form-control" type="date" ng-disabled="!maxDateValidation" ng-model="maxDate">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<input class="form-control"
type="text" name="date"
ng-model="dateParserModel"
kp-date-parser
view-format="dd.LL.yyyy"
min-date="minDateValidation && minDate ? minDate.toISOString() : null"
max-date="maxDateValidation && maxDate ? maxDate.toISOString() : null"
>
</div>
<div class="col-sm-1">
<button class="btn btn-default" type="button" ng-click="dateParserModel = ctrl.getNow()">Now</button>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label>Date parser model:</label>
<input class="form-control" type="text" disabled="disabled" ng-model="dateParserModel">
</div>
</div>
<ng-messages for="form.date.$error">
<div ng-message="date">Invalid date</div>
<div ng-message="minDate">Min date error</div>
<div ng-message="maxDate">Max date error</div>
</ng-messages>
</main>
angular.module('kpDateParserExample', ['ngMessages', 'kpDateParser'])
.controller('ctrl', function Controller() {
this.getNow = function() {
return new Date().toISOString();
}
});