0

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?

Community
  • 1
  • 1
smartmouse
  • 13,912
  • 34
  • 100
  • 166
  • 1
    Date are much worse to be handled. I fear the only way to do it is using `ng-change` attribute on both elements to associate a custom check function, and manually create HTML element if you need to display any warning – Naigel Apr 26 '16 at 08:53

1 Answers1

1

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

Ron Dadon
  • 2,666
  • 1
  • 13
  • 27
  • I know there is not ng-model in my inputs, it is my HTML code before finding a solution. Anyway i tried your code but it doesn't work (tested both on Chrome and Firefox). – smartmouse Apr 26 '16 at 09:04
  • I'm on Chromium and it doesn't work. I even tried by Chrome Mobile, but the same happens. Thank you anyway for your reply. – smartmouse Apr 26 '16 at 09:17