Start and End date validation in Angular

Question

<tr>
  <td class="p-10">
    <mat-form-field>
      <input matInput [matDatepicker]="picker" placeholder="Tarih" name="date" id="date"
             #date="ngModel" ngModel required>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="date.touched && date.invalid">
        Lütfen geçerli bir değer giriniz.
      </mat-error>
    </mat-form-field>
  </td>
  <td class="p-10">
    <mat-form-field>
      <mat-select placeholder="Talep Eden Kurum" #i_request_owner="ngModel"
                  ngModel id="i_request_owner" name="i_request_owner"
                  required>
        <mat-option *ngFor="let ro of requestOwners" [value]="ro.i_corporation"> {{
          ro.display_name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="i_request_owner.touched && i_request_owner.invalid">
        <div *ngIf="i_request_owner.errors.required">Bu alanı boş geçemezsiniz.
        </div>
      </mat-error>
    </mat-form-field>
  </td>
</tr>
<tr>
  <td class="p-10">
    <mat-form-field>
      <input matInput [matDatepicker]="endpicker" placeholder="İrtifak Bitiş Tarihi"
             name="endDate" min ="date" id="endDate"
             #endDate="ngModel" ngModel required>
      <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
      <mat-datepicker #endpicker></mat-datepicker>
      <mat-error *ngIf="endDate.touched && endDate.invalid">
        Lütfen geçerli bir değer giriniz.
      </mat-error>
    </mat-form-field>
  </td>
</tr>

I want to add a endDate to my form which should not be before the start date. What i did is to put a "min=sartDate" on endDate. But it did not worked. The EndDate should not be bafore the start date.

Question is not a duplicate, but there's a sample for you using reactive form and custom validator: https://stackoverflow.com/a/47670892/6294072 — AT82, Dec 19 '17 at 11:03

score 0 · Answer 1 · answered Dec 18 '17 at 12:29

Something like,

In Controller:

$scope.$watch('model.Template.StartDate', validateDates);
$scope.$watch('model.Template.EndDate', validateDates);

function validateDates() {
  if (!$scope.model) return;
  if ($scope.form.startDate.$error.invalidDate || 
  $scope.form.endDate.$error.invalidDate) {
  $scope.form.startDate.$setValidity("endBeforeStart", true);  //already 
  invalid (per validDate directive)
} else {
    //depending on whether the user used the date picker or typed it, this 
    //will be different (text or date type).  
    //creating a new date object takes care of that.  
    var endDate = new Date($scope.model.Template.EndDate);
    var startDate = new Date($scope.model.Template.StartDate);
    $scope.form.startDate.$setValidity("endBeforeStart", endDate >= 
    startDate);
 }
}

Html:

<form name="myForm">
    <input id="startDate" type="text" valid-date datepicker-
       popup="MM/dd/yyyy" 
       ng-model="model.Template.StartDate" name="startDate" 
       ng-required="true" 
   />

<input id="endDate" type="text" valid-date datepicker-popup="MM/dd/yyyy" ng-
 model="model.Template.EndDate" name="endDate" ng-required="true" />

<span ng-show="form.startDate.$error.endBeforeStart">End date must be on or 
after start date.</span>

 <span ng-show="form.startDate.$error.invalidDate || 
 form.endDate.$error.invalidDate">Check dates for validity</span>
<span ng-show="form.startDate.$error.required || 
form.endDate.$error.required">A required date is missing</span>

Hope it helps.

I could not convert it to Angular 4 which i am currently using. — , Dec 18 '17 at 18:42

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The md-datepicker properties for max and min are:

md-min-date Expression representing a min date (inclusive).

md-max-date Expression representing a max date (inclusive).

Next example code is extracted from the demos in the docs

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function() {
  this.myDate = new Date();

  this.minDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() - 2,
    this.myDate.getDate()
  );

  this.maxDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() + 2,
    this.myDate.getDate()
  );

  this.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 0 || day === 6;
  };
});

<md-content class="datepickerdemoValidations" ng-controller="AppCtrl as ctrl" ng-app="MyApp" ng-cloak="" layout-padding="">
  <div layout-gt-xs="row">
    <div flex-gt-xs="">
      <h4>Date-picker with min date and max date</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-max-date="ctrl.maxDate" md-min-date="ctrl.minDate"></md-datepicker>
    </div>
</md-content>

Here you have a codepen showing an example of how to use it.

This answer is for angularjs and so it's not the same that is being asked nor compatible — dchang, Sep 03 '20 at 23:55

Start and End date validation in Angular

2 Answers2