Calendar appear and disappear on first click

[AltoDev]

Hello @kekeh, I got a problem with the input field.

I use it in profile edit form, so on init I initialize my form with my user datas, the date is correctly set in the date field but when I click on it to update the value the datepicker appear and disappear instantaneously. The datepicker appear normally after the first fail, it is pretty weird I can figure out why.

• When I open the datepicker with a button it works but I need to click on the input to open the datepicker
• When I remove the [value] property of the input the datepicker works fine but i can't see my initial date inside.

Can you help me please ?

here is my template :

            <div class="d-flex align-items-center" (click)="dp.toggleCalendar()">
              <div class="open-date-picker-btn">
                <img src="assets/img/my-profile/calendar-icon.svg" />
              </div>

              <input class="form-control right-border-radius" 
              angular-mydatepicker 
              id="profileBirthDate"
              name="profileBirthDate" 
              placeholder="Ajouter date de naissance"       
              #dp="angular-mydatepicker" 
              [value]="model.singleDate.jsDate | date: 'dd/MM/yyyy'" 
              [options]="myDatePickerOptions" 
              [locale]="locale"
              formControlName="birthDate"
              (dateChanged)="onDateChanged($event)"
              readonly
              />
          </div>

Here is my form control init

    this.model = {
      isRange: false,
      singleDate: {
        jsDate: this.user.birthDate,
      },
    };

    this.profileForm = new FormGroup({
      lastName: new FormControl(this.user.lastName, [Validators.required]),
      firstName: new FormControl(this.user.firstName, [Validators.required]),
      userName: new FormControl(this.user.userName, []),
      gender: new FormControl(this.user.gender, [Validators.required]),
      birthDate: new FormControl(this.model.singleDate.jsDate, [Validators.required]),
      email: new FormControl(this.user.email, [
        Validators.email,
        Validators.required,
      ]),
      password: new FormControl(undefined, []),
      website: new FormControl(this.user.website, []),
      description: new FormControl(this.user.description, []),
    });

Thank you in advance

Alex.

[AltoDev]

Ok I found out the problem,

First I removed the [value] from the input, I had no more problem with the datepicker appears and disappeasr but the date data was neverdisplayed in the input after I init it in my form builder

After a little headache I found out out why :

In my date picker option I have

  public myDatePickerOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd/mm/yyyy',
    minYear: 1930,
    maxYear: 2010
  };

And my user birth date was : 10/10/2020, so it was not in 1930-2010, but the error message was "invalid date format"

This message was a bit confusing to find the error, but all is Ok now

Sorry if I disturbed you

And thanks for this Datepicker it is very cool and useful