kpDateParser

  1. - directive in module kpDateParser

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.

Dependencies

Directive Info

Usage

Arguments

Param Type Details
kpDateParserModelFormat String

Custom model format.

kpDateParserViewFormat String

Custom view 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.

Example

<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();
    }
});