question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Ionic4-beta.6] Datetime restrictions based on maxDate do not update while modal is open

See original GitHub issue

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (C:\Users\Dani\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.6
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v8.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

Describe the Bug The fields in the selector do not update while the popup is open when a max value is set. Example: max value is 15.09.2018 (dd.MM.yyyy), so only 1-15d in month 9, 1-9m in year 2018 should be able to be selected, while in other months all days, and in other years all months should be available for selection. Change the year to 2017, fields do not update and month is still only 1-9 available. Accept the date, reopen the modal and you can select all months. Day is completely ignored there are always 31 days available for every month.

Steps to Reproduce Steps to reproduce the behavior:

  1. create datetime with maxDate set.
  2. open modal
  3. change date around to a date where there should be more selectable options based on maxDate restriction.
  4. restriction did not update
  5. accept date
  6. reopen modal, restrictions did update

Expected Behavior Restrictions update while selecting date.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
Waghubinger-Gruppecommented, Dec 4, 2018

I updated to beta.17 and the issue is still present.

I startet a new project from template to record a .gif showing the issue.

datetime

Whats happening in this gif: max for ion-datetime is set to “2018-07-08” and min is set to “2016-01-01”. when selecting in the year 2018 months and days above 07-08 are present but can’t be selected. After switching to a previous year where they should be able to be selected they are still shown but can’t be selected. Closing the modal on year 2016 and reopening it lets me select all dates even in the year 2018. Leading me to select 2018-12-31 at the end. Reopening then and the date jumps to 2018-07-08

Edit: max and min attributes are set via template binding.

<ion-item>
    <ion-label position="floating">Date</ion-label>
    <ion-datetime displayFormat="D.MM.YYYY" pickerFormat="D MM YYYY" [min]="minDate" [max]="maxDate" [(ngModel)]="date"></ion-datetime>
</ion-item>
0reactions
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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Ionic4-beta.6] Datetime restrictions based on maxDate do not ...
Steps to reproduce the behavior: create datetime with maxDate set. open modal; change date around to a date where there should be more ......
Read more >
Bootstrap datetimepicker minDate and maxDate cannot ...
No. Please try to understand my problem. Here i have just only one input and minDate/maxDate must be on the same datetimepocher. –...
Read more >
How to use the Ionic 6 Datetime component - YouTube
In this video we are taking a closer look at the Ionic 6 datetime component and implement a stylish modal that works for...
Read more >
Minimum and Maximum Constraints for Date and Time Pickers
React-datepicker component provides two properties to constraint the selection of dates: minDate and maxDate. When the minDate property is set, ...
Read more >
Angular and Ionic Date & Time Min & max values Example
Use the min and max options to restrict the selection. Setting the values will disable dates/times earlier than min and dates/times that come ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found