Angular 6 custom validator for comparing current date to selected date is not validating properly and allowing any value to be added

Question

I need to validate a date of birth control of a reactive form, so if a user selected a value from the future, to disable the save button:

import { AbstractControl } from '@angular/forms';

export function validateDOB(control: AbstractControl)
{

    let currentDateTime = new Date();
    let monthValue = currentDateTime.getMonth()+1;
    let formattedDate = currentDateTime.getFullYear() +'-'+ monthValue +'-'+currentDateTime.getDay();

    let controlValue = control.value;
    let monthOfControlValue = controlValue.getMonth()+1;
    let FinalControlValue = controlValue.getFullYear()+'-'+monthOfControlValue+'-'+controlValue.getDay;
    console.log(FinalControlValue)
    if(formattedDate<control.value)
    {
        return {response: true};
    }
    return null;
}

Explanation:

I am working with angular material date picker, so the date will be displayed like the following:

Mon Oct 01 2018 00:00:00 GMT+0300 (Eastern European Summer Time)

the first 3 line are getting the current date and transforming it to YYYY-mm-dd format:

let currentDateTime = new Date();
let monthValue = currentDateTime.getMonth()+1;
let formattedDate = currentDateTime.getFullYear() +'-'+ 
              monthValue +'-'+currentDateTime.getDay();

The last 3 lines are converting the date selected by the user:

let monthOfControlValue = controlValue.getMonth()+1;
let FinalControlValue = controlValue.getFullYear()+'-'+monthOfControlValue+'-'+controlValue.getDay;
console.log(FinalControlValue )

At the user side, any date, whether it was less than or greater than, the validation will not work.

I tried to make the comparison without converting into YYYY-mm-dd, but it didn't/wouldn't work.

I changed the script by changing the value of the control into a new date:

let controlValue = new Date(control.value);

And the script is now like:

import { AbstractControl } from '@angular/forms';

export function validateDOB(control: AbstractControl)
{

    let currentDateTime = new Date();
    let monthValue = currentDateTime.getMonth()+1;
    let formattedDate = currentDateTime.getFullYear() +'-'+ monthValue +'-'+currentDateTime.getDay();
    console.log(formattedDate)
    let controlValue = new Date(control.value);
    let monthOfControlValue = controlValue.getMonth()+1;
    let FinalControlValue = controlValue.getFullYear()+'-'+monthOfControlValue+'-'+controlValue.getDay();
    console.log(FinalControlValue)
    if(formattedDate<control.value)
    {
        return {response: true};
    }
    return null;
}

And still not working.

Did you try to format your dates with a formatter like DatePipe ? — veben, Oct 01 '18 at 11:21
You have to import it, construct it and then use the transform method like that `dateTransformed = this.datePipe.transform(date, 'yyyy-MM-dd');` — veben, Oct 01 '18 at 11:29
@droidnation why do you allow user to select the future date? — Prashant Pimpale, Oct 02 '18 at 06:24
I can't manage the date picker of angular material to display past dates. I searched for it but couldn't find any help. Anyway @PrashantPimpale I answered my own question, please check it. It works for me. — alim1990, Oct 02 '18 at 07:30
Good, but you could easily disable the today's date and future dates in the DatePicker so that part of writing the explicit code will be eliminated — Prashant Pimpale, Oct 02 '18 at 07:32
Yes I am unable to do it. Can you tell me how to do it @PrashantPimpale ? — alim1990, Oct 02 '18 at 07:39
Here is stackblitz: https://stackblitz.com/edit/angular-ftem5m — Prashant Pimpale, Oct 02 '18 at 07:52

score 3 · Answer 1 · answered Oct 02 '18 at 08:02

Instead of writing custom Validate function to disable the dates, I would use MAX property of date picker to disable the Today's Date and Future dates from being selected.

The HTML Code:

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

And in TS file:

 minDate = new Date(1900, 0, 1);
 maxDate =  new Date(new Date().setDate(new Date().getDate()-1))

Here is StackBlitz Example

Reference Link

score 1 · Answer 2 · answered Oct 01 '18 at 12:57

1

could you try this?

if(currentDateTime <controlValue )

with

let controlValue = new Date(control.value);

formattedDate is a string in this case.

answered Oct 01 '18 at 12:57

lesiano

288
3
9

score 1 · Answer 3 · answered Oct 02 '18 at 06:15

Part of the answer is based on the help provided by @lesiano. But the main problem was that the comparing is including the time. And as mentioned in this old stack overflow answer, we need to set the time of the date into 0's, so the comparison take place:

date1.setHours(0,0,0,0)

The working custom validator is:

import { AbstractControl } from '@angular/forms';

export function validateDOB(control: AbstractControl)
{

    let currentDateTime = new Date();
    currentDateTime.setHours(0,0,0,0);

    let controlValue = new Date(control.value);
    controlValue.setHours(0,0,0,0);

    //console.log(currentDateTime+'-'+controlValue)

    if(currentDateTime<control.value)
    {
        return {response: true};
    }
    return null;
}

Angular 6 custom validator for comparing current date to selected date is not validating properly and allowing any value to be added

3 Answers3