Primeng: Calendar p-calendar onSelect event not firing

Created on 24 Mar 2017  路  4Comments  路  Source: primefaces/primeng

I'm submitting a ...

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://plnkr.co/edit/MaKQWDlNI774B3PKWic9

Current behavior
Whenever I insert a p-calendar into any of my pages/components, the onSelect event won't trigger. I can see that the form css classes lose the pristine state on the first click, but the input never changes, the bound model value doesn't change, and I need to click a second time to get the onSelect event to fire and get the model to update (I'm not updating the model on the onSelect, just noticing the changes that happen on 1st vs 2nd click).
The onFocus event, however, works flawlessly.

Expected behavior
A single click would be required to fire the onSelect event and get the bound model to change

Minimal reproduction of the problem with instructions
https://plnkr.co/edit/MaKQWDlNI774B3PKWic9
(somehow I can't make that work too, get's stuck at loading...)

Also reported on the forum on Monday: https://forum.primefaces.org/viewtopic.php?f=35&t=50090

What is the motivation / use case for changing the behavior?
This calendar is inside a shared component that gets reused on some parts of my application. I've also tried to place a p-calendar directly in the page I want to use my shared component and it also requires a second click

Please tell us about your environment:

Server: lite-server
IDE: Visual Studio Code
Node v6.7.0

  • Angular version: 2.4.5

  • PrimeNG version: 2.0.5
    Also reproducible on 2.0.4 and 2.0.0. Haven't tested prior versions.

  • Browser: all

  • Language: TypeScript 2.2.1

  • Node (for AoT issues): v6.7.0

Most helpful comment

Found the same double click behaviour as described above when using the PrimenG Calendar.

Angular version: 4.0.0
PrimeNG version: 4.0.0-rc1
Browser: chrome
Language: TypeScript 2.2.0

My situation was where I had a moment object e.g. dateOne and I converted it to Date object on the template side. In HTML I was using:
[minDate]="dateOne.toDate()" - dateOne is type moment.Moment
[maxDate]="dateTwo.toDate()"

Fixed the issue by converting the moment to a Date object on the ts side and using them as is.
[minDate]="dateOne" - dateOne is type Date
[maxDate]="dateTwo"

All 4 comments

Please provide a test case at;

http://plnkr.co/edit/77OG7zX3LToGoidKaKOS

Found the same double click behaviour as described above when using the PrimenG Calendar.

Angular version: 4.0.0
PrimeNG version: 4.0.0-rc1
Browser: chrome
Language: TypeScript 2.2.0

My situation was where I had a moment object e.g. dateOne and I converted it to Date object on the template side. In HTML I was using:
[minDate]="dateOne.toDate()" - dateOne is type moment.Moment
[maxDate]="dateTwo.toDate()"

Fixed the issue by converting the moment to a Date object on the ts side and using them as is.
[minDate]="dateOne" - dateOne is type Date
[maxDate]="dateTwo"

I can confirm that this was indeed the fix. I had my [minDate] bound to a function returning a Moment.(...).toDate().
As soon as I declared a component variable of type Date and assigned that variable to [minDate] everything started working accordingly.

Glad to hear.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

watalberto picture watalberto  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

garethlewis picture garethlewis  路  3Comments

papiroca-tm picture papiroca-tm  路  3Comments

Helayxa picture Helayxa  路  3Comments