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>
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();
}
}
.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>
What is going on here? Can anyone see any issue in this code?