p-calendar onSelect won't trigger on first click

UI Components for Angular
Post Reply
CelsoSantos
Posts: 4
Joined: 16 Aug 2016, 16:13

21 Mar 2017, 13:50

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?
---
Best Regards,
Celso Santos

mahios
Posts: 1
Joined: 13 Mar 2019, 14:06

13 Mar 2019, 14:13

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?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests