I have a form in one of my components with a date picker. The constructor for this component looks like this.

constructor(public navCtrl: NavController, private formBuilder: FormBuilder,
  private profileService: ProfileService) {
    this.formIsValid = true;

    let dobObj = JSON.parse(localStorage.getItem('current_profile')).stripeAccount.legal_entity.dob;
    let dob = (dobObj.year && dobObj.month && dobObj.day) ? dobObj.year + "-" + dobObj.month + "-" + dobObj.day : '';
    console.log(dob); // This prints "1999-12-31"

    this.dobForm = formBuilder.group({
      dob: [dob.toString(), Validators.required]
    });
  }

I get the following error message due to the dob.toString() that I am using to set the default value of my date picker.

WARN: Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

I console logged the value right before the formBuilder and the date prints out as expected. It seems like the string gets changed somehow before being used to set the default value in the formBuilder. If I hardcode the string "1999-12-31" in the formBuilder instead of using the variable, it works. I even checked to make sure that "dob === '1999-12-31'" was true.

Why does a hardcoded string work in setting the default value, but a variable with the exact same value not work?

EDIT:

This has got to be a bug with the date picker. If I input "1999-12-31" as the hard coded string, it works as expected. If I enter "1997-1-1" or "1997-12-3" it fails. It is accepting some valid dates, and not others.

EDIT 2:

Check this out:

constructor(public navCtrl: NavController, private formBuilder: FormBuilder,
              private profileService: ProfileService, private loadingService: LoadingService) {
    this.formIsValid = true;

    //TODO: What??? Why is this happening?
    console.log(new Date("1997-1-1")); // null
    console.log(new Date("1999-12-31")); // "1999-12-31T00:00:00.000Z"
    console.log(new Date("2010-11-7")); // null
    console.log(new Date("1992-4-21")); // null
    console.log(new Date("1842-2-27")); // null
    console.log(new Date("2000-8-20")); // null

    this.dobForm = formBuilder.group({
      dob: ['', Validators.required]
    });
  }

Why on Earth do so many strings fail to be parsed into dates? And what is the difference between "1999-12-31" and the others?

The reason for this issue is your datepicker is taking null as value. In the code of datepicker, they don't have validation for null value.

Refer: source code from https://github.com/driftyco/ionic/blob/master/src/util/datetime-util.ts

export function updateDate(existingData: DateTimeData, newData: any) {
  if (isPresent(newData) && newData !== '') {

    if (isString(newData)) {
      // new date is a string, and hopefully in the ISO format
      // convert it to our DateTimeData if a valid ISO
      newData = parseDate(newData);
      if (newData) {
        // successfully parsed the ISO string to our DateTimeData
        Object.assign(existingData, newData);
        return;
      }

    } else if ((isPresent(newData.year) || isPresent(newData.hour) || isPresent(newData.month) || isPresent(newData.day) || isPresent(newData.minute) || isPresent(newData.second))) {
      // newData is from of a datetime picker's selected values
      // update the existing DateTimeData data with the new values

      // do some magic for 12-hour values
      if (isPresent(newData.ampm) && isPresent(newData.hour)) {
        if (newData.ampm.value === 'pm') {
          newData.hour.value = (newData.hour.value === 12 ? 12 : newData.hour.value + 12);

        } else {
          newData.hour.value = (newData.hour.value === 12 ? 0 : newData.hour.value);
        }
      }

      // merge new values from the picker's selection
      // to the existing DateTimeData values
      for (var k in newData) {
        (<any>existingData)[k] = newData[k].value;
      }

      return;
    }

    // eww, invalid data
    console.warn(`Error parsing date: "${newData}". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime`);

  } else {
    // blank data, clear everything out
    for (var k in existingData) {
      delete (<any>existingData)[k];
    }
  }

}

more