CODEWITHSUNDEEP
angularjsformsvalidationdateinput
smartmouse
smartmouse

Reputation: 14404

Custom validation for two date input

I'm using Angular to create a web app. I have a form with two date inputs:

    <label for="date-from">From: </label>
    <input class="range-data" type="date" name="date-from" id="date-from" value="">
    <label for="date-to">To: </label>
    <input class="range-data" type="date" name="date-to" id="date-to" value="">

How to check if two date ranges overlap? Searching here on SO i have found this answer

<input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/>

Do you have any other recommendation?

Upvotes: 0

Views: 1044

Answers (1)

Ron Dadon
Ron Dadon

Reputation: 2706

First, there is not ng-model in your inputs, that is required for the "angular way" of using forms. After that, HTML5 support min and max for dates, when the date need to be supplied in the format of "YYYY-MM-DD". Notice that not all browsers support "date" input.

An optional implementation:

<label for="date-from">From: </label>
<input class="range-data" ng-model="fromDate" type="date" name="date-from" id="date-from"  max="{{toDate|date:'yyyy-MM-dd'}}">
<label for="date-to">To: </label>
<input class="range-data" ng-model="toDate" type="date" name="date-to" id="date-to" min="{{fromDate|date:'yyyy-MM-dd'}}">

enter image description here

Upvotes: 1

Related Questions