Primeng: Multiselet calendar don't update ngModel on unselect date

Created on 7 Sep 2017  路  10Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/vG1QBJQuTVyEbhQRyM7s?p=preview

Current behavior
Multiselet calendar don't update ngModel when unselect date, until I select another one.

Expected behavior
Unselected date must update ngModel

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/vG1QBJQuTVyEbhQRyM7s?p=preview

1- Select two or more dates
2- Unselect a date
3- Displayed dates don't update

What is the motivation / use case for changing the behavior?
Can't unselect dates if I not select another one after

Please tell us about your environment:
Windows 7, Visual Studio Code.

  • Angular version:
    ^4.0.0

  • PrimeNG version:
    ^4.2.0-rc.1

  • Browser:
    Chrome 60.0.3112.113 (64 bits)
    Firefox 55.0.3 (32-bit)

  • Language:
    TypeScript ~2.3.3

  • Node (for AoT issues): node --version = 8.2.1

defect

Most helpful comment

I've been waiting for this issue to be resolved as I can also replicate the issue in my project. The link to the plunker in the original issue message above clearly replicates the issue.
This issue should not be closed

Here are the steps to replicate the issue of the model not updating:
- Open the Plunker link
1. Click the calendar icon
2. Click multiple dates on the calendar.
2a. Note that the dates are displayed behind the calendar ( {{fechas}} ), clicking off to hide the calendar will show the text of the selected dates as they are slightly hidden by the calendar
3. Open the calendar and deselect the dates highlighted
3a. Note that the calendar dates displayed on the screen do not change.
4. Open the calendar, select a non selected date, the model updates and the dates displayed are changed.

All 10 comments

I'm unable to replicate the issue. Feel free to attach a screencast.

I've been waiting for this issue to be resolved as I can also replicate the issue in my project. The link to the plunker in the original issue message above clearly replicates the issue.
This issue should not be closed

Here are the steps to replicate the issue of the model not updating:
- Open the Plunker link
1. Click the calendar icon
2. Click multiple dates on the calendar.
2a. Note that the dates are displayed behind the calendar ( {{fechas}} ), clicking off to hide the calendar will show the text of the selected dates as they are slightly hidden by the calendar
3. Open the calendar and deselect the dates highlighted
3a. Note that the calendar dates displayed on the screen do not change.
4. Open the calendar, select a non selected date, the model updates and the dates displayed are changed.

Hi, here is a gif replicating the problem, it follow the steps given by @DRSchallerSS

GIF replicating the problem

I also have the same issue as sgodoy is showning on the gif.

Does a new issue have to be opened to have this addressed?

Am always having the same issue ! is there any fix ?

Friends those who need a quick fix and can't wait upto next update can try this,
->Locate your calendar.js file inside /node_modules/primeng/calendar/
-> Replace the below lines with the if condition starting from line number 302 on your calendar.js file.

if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
// this.value = this.value.filter(function (date, i) {
// return !_this.isDateEquals(date, dateMeta);
// });
var temp = this.value.filter(function(date, i) {
return !_this.isDateEquals(date, dateMeta);});
this.updateModel(temp);
}

The above solution works for me..

Issue is still there.

May I know which version this is being resolved in?
I am using 4.1.3

I have tried 4.3.0 and this issue is till there

This issue just fixed from 5.2.0-rc2, @cagataycivici can you fix it in 4.3.0 please?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

miresk picture miresk  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

markgoho picture markgoho  路  3Comments

philly-vanilly picture philly-vanilly  路  3Comments

Helayxa picture Helayxa  路  3Comments