Date update wrong

Question

I have a date input and I need to select a date. I put a correct date when I choice from the calendar. Suppose to modify this date (31/07/2001) into a date that doensn't have a correct format (31/14/2007) with the key input. I click in the page and the date is updated in (02/03/2008). This isn't the correct beahaviuor because I want to that when the user put a incorrect format date, it doesn't update the input type date but the wrong input doesn't have been modified. I reproduce my problem in stack blitz.

PROJECT

Anyone can help me?

Answer 1

When parsing the date you are using this code :

if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
          const str = value.split('/');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
}

And you get this date : 2008-03-01T23:00:00.000Z

Then you format the date with this code:

let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
return   this._to2digit(day)+ '-' + this._to2digit(month) + '-'+year; 

and get : 02-03-2008

First, I would suggest to avoid adding '-' instead of '/', you could do this transformation later on your components or your api service.

And for parsing the date I would simply try :

if ((typeof value === 'string')) {
    return new Date(value);
}

This will return null for an invalid date so i guess the form will be invalid. Then just check the form validity on your component ;)