monthSelector and yearSelector close Picker

[joworeiter]

Hi, I'm currently implementing the datepicker into a Angular 8.2 Application.

I got a really strange behavior: Basicly the picker works perfectly fine. Nevertheless the month/year overview gets onclick displayed, the picker closes and I can't figure out why.

I tried several different options like closeSelectorOnDateSelect: false and removing/adding different options whithout any changed behavior. Also different Browsers (FF, Chrome, Edge)

See my code blow:

date.component.ts:

export class DateComponent implements OnInit {

  @ViewChild('dp', {static: false}) myDp: AngularMyDatePickerDirective;

  public field: FieldConfig;
  public group: FormGroup;
  public config: any;
  public fieldControl: AbstractControl;
  public date;

  public locale = 'de';
  public myOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd.mm.yyyy',
    closeSelectorOnDateSelect: false
  };

  constructor(private cdr: ChangeDetectorRef) {

  }

  ngOnInit(): void {

    this.fieldControl = this.group.get(this.field.name);

    // if value isn't a DateObject make one
    if (!(this.fieldControl.value instanceof Date) && this.fieldControl.value !== null) {
      this.fieldControl.setValue(moment(this.fieldControl.value).set({
        hour: 12,
        minute: 0,
        second: 0,
        millisecond: 0
      }));
    }

    // get Dateobject from moment and save it into a buffer
    this.date = moment(this.fieldControl.value).toDate();

    this.initDatepickerOptions();

  }

  private initDatepickerOptions() {

    const model: IMyDateModel = {isRange: false, singleDate: {jsDate: this.date}, dateRange: null};

    this.fieldControl.setValue(model);

  }

  toggleCalendar(): void {
    this.cdr.detectChanges();
    this.myDp.toggleCalendar();
  }

date.component.html:

  <div class="input-group date" [ngClass]="{ 'form__control--error': hasError() }" (click)="toggleCalendar()">
        <input angular-mydatepicker
               [locale]="locale"
               [options]="myOptions"
               class="form-control Input_default Input_text"
               placeholder="{{ field.placeholder || field.label | translate }}"
               [name]="field.name"
               [formControlName]="field.name"
               #dp="angular-mydatepicker"
        />

      </div>

Maybe I'm doing something wrong and someone can help me.

[kekeh]

Hi @joworeiter

Not sure but maybe somewhere in your project has other click listener which closes the datepicker.

• What happens if you try to move the (click)="toggleCalendar()" handler to input element?
• What happens if you close the div element before the input element?

[joworeiter]

Hi @kekeh, thanks for the fast response. If I move the clickhandler to the input it doesnt work either. I added a cal icon with pos. absolute and add the handler there it is working... Dont know why, but it works. Thanks for help.

See new markup blow:

    <div class="input-group" [ngClass]="{ 'form__control--error': hasError() }">
        <input angular-mydatepicker
               [locale]="locale"
               [options]="myOptions"
               class="form-control Input_default Input_text"
               placeholder="{{ field.placeholder || field.label | translate }}"
               [name]="field.name"
               [(ngModel)]="model"
               [ngModelOptions]="{standalone: true}"
               (dateChanged)="updateValues($event)"
               #dp="angular-mydatepicker"/>
        <div class="input-group-append" (click)="toggleCalendar()">
          <span>
             <img src="assets/images/form-input-right-datepicker.svg">
          </span>
        </div>
      </div>