Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Min and max properties of ion-datetime are not working properly #17060

Closed
Artfloriani opened this issue Jan 11, 2019 · 6 comments
Closed

Min and max properties of ion-datetime are not working properly #17060

Artfloriani opened this issue Jan 11, 2019 · 6 comments
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@Artfloriani
Copy link
Contributor

Bug Report

Ionic version:
[x] 4.0.0-rc.1

Current behavior:
The selected date on the datetime picker does not update while choosing a date, this has a few issues with the min and max properties:

min property
If I set the the min property to today's date, the datetime picker does not show the past days from the current month as expected. But when scrolling to the next month, the previous days are still not available in the picker. To select a day that is lower than the current day, you need to first select the next month, tap "Done" and then open the picker again and select the desired day.

E.g.:

<ion-datetime
    displayFormat="DD/MMM"
    min="2019-01-11">
</ion-datetime>

If I want to select 2nd of February, I need first to select February, then re-open the picker and select the day.

max property
A similar issue happens with the max property. If you set the max property to any month in the future, you can first scroll to a day that is after the max day, and then scroll to the month from the max property. This will allow you to select a date that is after the max property. When using (ionChange) to view these values, you can check that the emitted value is actually after the max property.

Expected behavior:
When using the datetime picker, I expect to be able to select any value between the min and max properties, without having to close and open the picker again to update the available options.

Steps to reproduce:

For min bug:
Use the code below and scroll down to Feb. Days between 1 and 11 are to available unless you click done and open again.

<ion-datetime
    displayFormat="DD/MMM"
    min="2019-01-11">
</ion-datetime>

For max bug:
Use the code below and scroll down to day 30. Scroll down to May and you will be able to select a date after 2019-05-11.

<ion-datetime
    displayFormat="DD/MMM"
    max="2019-05-11">
</ion-datetime>

Related code:
Please, update the plunker links to provide a Ionic 4 same app 👍

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.4.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/~username~/Library/Android/sdk/)
   ios-deploy        : 1.9.2
   NodeJS            : v8.12.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 9.2 Build version 9C40b

Disclaimer: English is not my native language so the issue description might be a bit confusing. Please let me know if you need a clearer example in order to reproduce this issue.

@paulstelzer
Copy link
Contributor

ion datetime has a lot of issues, see collected here -> #16630

I added yours to the list because you made some easy understandable codes to reproduce :)

@paulstelzer paulstelzer added package: core @ionic/core package type: bug a confirmed bug report and removed triage labels Jan 11, 2019
@ankeetasingh
Copy link

ankeetasingh commented Jan 25, 2019

Ionic version:
[x] 4.0.0

Here is the screenshot of the issues i am running into

Scenario # 1

<ion-datetime display-format="MMM D, YYYY" min="2019-01-15" max="2020-01-01"></ion-datetime>

screen shot 2019-01-24 at 11 26 23 pm


Scenario # 2

<ion-datetime display-format="MMM D, YYYY" min="2019-01-15" max="2019-12-31"></ion-datetime>

screen shot 2019-01-24 at 11 30 49 pm

I cannot select Feb 01 on # 2 unless I select Feb 15 > Done > tap on date picker > then i can select Feb 1.
screen shot 2019-01-24 at 11 32 40 pm

@soumyanildas
Copy link

soumyanildas commented Jan 28, 2019

@iAmAnkeeta
Yeah the validation check is done on the datetimepicker modal open only.

@proartti
Copy link

proartti commented Feb 4, 2019

We are having the exact same issue here. A quick fix for this would be awesome. (related to this Ionic 3 bug - 12319)

@liamdebeasi
Copy link
Contributor

liamdebeasi commented Feb 12, 2019

Hi there,

Thanks for the issue! I’ve added this to issue #16630 to keep track of. We’re going to close out the individual issues and address all of the Datetime issues at once. We’re not forgetting about your issue, just trying to keep them all together.

Thanks for using Ionic!

@ionitron-bot
Copy link

ionitron-bot bot commented Mar 14, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Mar 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

No branches or pull requests

6 participants