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.

bug: IonDateTime internal state breaks if navigating out of range

See original GitHub issue

Prequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x

Current Behavior

In the new IonDateTime component, if I navigate to a month that is outside of the range given by min and max or to a month that is partially outside of the range while the last selected day would be out of range in this month, onIonChange is triggered with a broken internal state that cannot be recovered. The returned value changes to something like 2022-01-15T19:aN:00-aN:aN. Selecting a valid date afterwards does not fix this and the time component remains in this broken state.

Tested in ionic react 6.0.0-beta.5

Expected Behavior

onIonChange should not be triggered and the internal state of the component should not break

Steps to Reproduce

<IonDatetime min='2021-09' max='2021-10' onIonChange={(event) => {console.log(event.detail.value)}} />

Use the arrows to navigate to August or November. Observe console output.

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Sep 15, 2021

Glad the issue is resolved!

Currently you cannot type into the time container, but we are adding that functionality soon!

1reaction
janrgcommented, Sep 15, 2021

I have tested it and it looks like it works, thanks! BTW: sorry this is a bit off-topic but is it intended that (at least in the browser) the time can only be changed by arrow up and down and not by typing into it?

Read more comments on GitHub >

github_iconTop Results From Across the Web

IonDateTime internal state breaks if navigating out of range ...
In the new IonDateTime component, if I navigate to a month that is outside of the range given by min and max or...
Read more >
ion-datetime - Ionic Framework
This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open...
Read more >
ion-datetime mode laptop Code Example - Code Grepper
File C:\Users\SHUBHAM KUNWAR\AppData\Roaming\npm\nodemon.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see ...
Read more >
@ionic/core | Yarn - Package Manager
Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......
Read more >
d8218 - CSDN
buttons: use proper button colors based on CSS variables when inside of a toolbar (#20633) (c1d7bf2). 5.0.3 (2020-02-26). Bug Fixes.
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