Ionic-framework: bug: ion-datetime with a min/max does not update valid values on first picker change

Created on 11 Jul 2017  路  13Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

  1. Place a DateTime component on a page with a minimum (or maximum) date in the middle of a month/year, for example 06/15/2013
  2. In the model set the initial date that will be shown in the DateTime to the minimum date
  3. Open the date picker and make exactly one change that makes the valid values in the picker columns to change. For example, change the year to 2014
  4. The picker columns don't update, many valid dates are missing
  5. Make one more change in the same column. For example, change the year to 2015
  6. Everything updates and the picker is now in a correct state

Expected behavior:
The valid days and months should update at step 4

Steps to reproduce:
http://plnkr.co/edit/eHapiVZtvMqjjsTJT9Hs?p=preview

  1. Open the datetime picker at the top of the page
  2. Change the year to 2014. The valid values of the month and day picker columns don't update
  3. Change the year to 2015. Now the picker columns update

Related code:

Other information:
This is being caused by the logic in component/picker/picker-column.ts:

if (this.lastIndex === undefined) {
  // have not set a last index yet
  this.lastIndex = this.col.selectedIndex;

} else if (this.lastIndex !== this.col.selectedIndex) {
  // new selected index has changed from the last index
  // update the lastIndex and emit that it has changed
  this.lastIndex = this.col.selectedIndex;
  var ionChange = this.ionChange;
  if (ionChange.observers.length > 0) {
    this._zone.run(ionChange.emit.bind(ionChange, this.col.options[this.col.selectedIndex]));
  }
}

This prevents ionChange from firing the first time a picker column changes. The DateTime subscribes to this event in order to update the valid values of the picker columns. I tried making ionChange fire in both cases, can confirm it fixes the problem. I'm using a fork with this fix in my app and am not experiencing any other problems.

It's also what's causing #12070.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

System:

    Node       : v8.1.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : not installed
    npm        : 5.0.3
v3

Most helpful comment

I have a fix for this that we've been using for months now without issue. I'm happy to make a pull request. I was hoping to first get some info on the intended behavior from the core dev team but I can also just make the request.

All 13 comments

I can make a pull request with the fix I outlined in the issue, but I'm not sure what the intended behavior of picker-column is

It's been more than 2 weeks. Bump

I have the same problem. In this example, I set the min time to 2017-10-02T11:00:00
image

I changed the day to 3, and as you can see, the hours colun didn't change:
image
Then, I return he day o 2, and again o 3. but this time, the hours columns changed:
image

I have a fix for this that we've been using for months now without issue. I'm happy to make a pull request. I was hoping to first get some info on the intended behavior from the core dev team but I can also just make the request.

Hey @eisene can you please share your solution ?

Edit: Found the commit Bug fix commit

Thank you, will test it.

Edit 2: worked with no problems, i just tested with a ion-datetime no other pickers.

Cool. Very busy for a bit, will try to make a pull request end of next week.

Hey @eisene were you planning on creating the PR? If not I'm going to send one (and I'll just credit you with the fix in the PR).

I pushed up a PR and credited you there (linked above). If you find the time, feel free to open your own PR and I'll close mine, so that you get some cool points on github if it gets accepted.

PR works for me also, Thanks

I see that the PR above was closed. So I guess this is not going to be fixed?

I've created a new PR for v4 with the same fix: #14329

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings