How to validate date in Angular 5 app using datepicker?

Question

I have the current template:

<input type="text" class="datepicker" name="my_date" placeholder="mm/dd/yyyy" #myDate="ngModel" [(ngModel)]="myDate" id="my_date">
<div class="error_message" *ngIf="myDate.errors?.invalidDate">
    Please enter valid date
</div>

I have the following code in onInit:

setTimeout(function () {
      $('.datepicker').datepicker({
        autoclose: true,
        dateFormat: 'MM/dd/yyyy'
      }).on('hide', function(e) {
          $('.datepicker').blur();
      });    
    }, 10);

And when saving the company I have the validation logic:

if (validateDate(this.myDate) == false) {     
        myFormDirective.form.controls['my_date'].setErrors({'invalidDate': true});
    }

The problem is that when the date is invalid datepicker put today date instead when onblur. To explain the question I'll give 2 scenarios: 1. 03/10/1800 is not valid date (less than 1900) and when onblur fired, the error is shown correctly. 2. 01/32/2002 is not valid date but, in this case datepicker instead select another valid date in year 2002 02/01/2002 instead of showing error.

Any idea how tom make sure validation happening on blur ?

General every form control has a method, updateOn, to set when they should update and validate itself (change' | 'blur' | 'submit'). Default is change, you can try to set it on blur. — Shadab Faiz
– Shadab Faiz, Commented Mar 10, 2019 at 9:23

Rich · Accepted Answer · 2019-03-11 14:12:16Z

2

I'd strongly recommend that you drop the jQuery datepicker for a more modern Angular datepicker component. There are many potential options available. The problem is that the way the two frameworks approaches DOM manipulation are inherently at odds. jQuery modifies the DOM after its been created, while Angular creates the DOM such that it will always be in the correct state, dependent on your model. While you can still use them together, it's probably not the best design approach.

In this specific case, if you used, for example, ngx Bootstrap's Date-picker component, you can easily attach an on Change event handler.

import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-datepicker-value-change-event',
  templateUrl: './value-change-event.html'
})
export class DemoDatepickerValueChangeEventComponent {
  data: Date;
  showWarning: boolean = false;
  
  onValueChange(value: Date): void {
    if(validateDatepicker(value)) showWarning = false;
    else showWarning = true;
  }
  
  validateDatepicker(value: Date){
    let isValid = false;
    //Custom validation here...
    return isValid;
  }
}

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
    <input class="form-control"
           placeholder="Datepicker"
           bsDatepicker
           (bsValueChange)="onValueChange($event)">
  </div>
  <div *ngIf="showWarning">Enter a valid date</div>
</div>

edited Mar 11, 2019 at 14:12

answered Mar 11, 2019 at 13:48

Rich

1,65515 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2304483 Over a year ago

I've installed now the full ngx-bootstrap and noticed that it include datepicker, but I have problem integrate it. The validation is working on the old value and not the new value. It look to me that datepicker had build in validation and if invalid it bring back the old value. Is there a way to disable the validation and provide my own ?

user2304483 Over a year ago

Your solution is working well, all I hade to change is the event type from bsValueChange to ngModelChange. I mark this question to resolve.

Collectives™ on Stack Overflow

How to validate date in Angular 5 app using datepicker?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related