p-calendar onSelect won't trigger on first click

[CelsoSantos]

Hello,

I'm having a weird issue and I seem to be unable to solve it.

Also, I'm using PrimeNG 2.0.4.

I've made a custom component that includes a p-calendar and this component is called by another page/component. However date selection won't trigger on the first click.

So, my shared component is the following:
html:

Code: Select all

<div class="formInput">
	<p-calendar class="mmkmaker" id="{{model.focusid}}" [(ngModel)]="model.value" dateFormat="dd/mm/yy" showAnim="slideDown"
	    (onSelect)="onSelect($event)" (onFocus)="onFocus()" [minDate]="getMinDate()"></p-calendar>
</div>

.ts:

Code: Select all

import { Calendar } from 'primeng/primeng';
import { DateInputModel } from './date-input.model';
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import Moment from './../../loaders/momentLoader';

@Component({
	moduleId: module.id,
	selector: "date-input",
	templateUrl: "index.html",
	styleUrls: ["date-input.css"],
})

export class DateInput {
	@Input() model: DateInputModel;
	@Output() change = new EventEmitter();
	@Output() focus = new EventEmitter();

	getMinDate() {
		return Moment().add(1, 'days').toDate();
	}

	onSelect(event) {
		this.change.emit(event);
	}
	onFocus() {
		this.focus.emit();
	}
}

This component is included into another (very) complex component, called like this:
.html:

Code: Select all

	<!-- STEP: DESCRIPTION DATE -->
	<div id="descdate" class="mmStepPart" [ngClass]="{focusedFormPart: currentId === 'descdate'}" [hidden]="!mmkService.steps['descdate'].active"
	    (click)="goToId('descdate')">
		<div class="subtitlecenter">{{ "MISSIONS.MISSION_MAKER.DETAIL_ADD_END_DATE" | translate}}</div>
		<div class="note">{{ "MISSIONS.MISSION_MAKER.DETAIL_IF" | translate}}</div>
		<date-input [model]="mmkService.steps['descdate'].model" (focus)="goToId('descdate')" (change)="processDescription('descdate');"></date-input>
	</div>

The onFocus method works flawlessly, however, the only thing that happens upon first click on the calendar is that the form will lose its pristine state (updating the css classes) but the value on the model won't change. That will only happen upon the second click.

What is going on here? Can anyone see any issue in this code?

[mahios]

HI,
I am also having the same issue. onselect method not triggered in first click and first click its going to another which i added for [minDate]. How to solve this issue?

[venkateshmech1990]

I am also facing the same issue. The first click is triggering the getMindate of mindate attribute. Kindly advise