Problem setting min and max for the new datetime comp


i’m trying to dynamically set the min and max values for the v6 datetime component.

If i use viewchild

<ion-datetime #datePicker size="cover" presentation="time" hourCycle="h23" [(ngModel)]="time"></ion-datetime>

 @ViewChild('datePicker') datePicker: IonDatetime;


I get TypeError: Cannot set properties of undefined (setting ‘min’)

And if i use

  <ion-datetime size="cover" presentation="time" hourCycle="h23" [(ngModel)]="time" min="min" max="max"></ion-datetime>

  min: string = "2021-12-20T13:00";
  max: string = "2021-12-20T23:59";

I get Cannot destructure property ‘month’ of ‘parseDate(…)’ as it is undefined.

I there a way to set these properties ? It was working with the prev datetime comp

Thank you

Update here :slight_smile:

I tried this

<ion-datetime size="cover" [min]="min" [max]="max"></ion-datetime>

  min = "2021-12-20T11:00";
  max = "2021-12-22T23:00";

It gave no error but but the results are not those set

kind of same problem here, the difference is that my datetime is not working at all, when I change the tabs of months it doesn’ change or just stop at half away, and the ionChange is not working as the example said

I made it working setting values on init instead of constructor

  ngOnInit() { 

But i think there is a glitch when you set hours in min or max

For exemple here, we should have 11,12,13,…,23 as selectable hours for the first day.

Instead of that, i have 00,01,02,…,11,23

It removed hours from 12 to 22 instead of 00 to 10

If i set min = 2021-12-20T15:01:32.745Z
Then it works but show time to incorrect format => 3 to 11 instead of 15 to 23

Case 1 : bad format + minutes not displaying

Case 2 : bad format

Case 3 : bad format + minutes stays with a minimal 29 even when hour is changed

Pls fix it in next version, for now, min and max are unusable with time picker

1 Like

Any update on this?
Still suffering with the same issue

Saw this in 6.0.4

  • datetime: datetime locale with h23 will respect max time range (#24610) (5925e76), closes #24588

Hi, facing the same issue. Did you find the solution ?

it was solved, upgrade your ionic dependencies and libraries

Can i know how ? i am using ionic 6 now

you can choose to do it manually:

npm install -g ionic@latest @ionic/angular@latest @ionic/angular-toolkit@latest --save

or using something like npm-check-updates which automatically updates all your dependencies
(but i DO not suggest this, because it can breaks your app).

anyway, do a backup / commit before updating

i placed in terminal and i got this error:

npm ERR! code EEXIST
npm ERR! path C:\Users\User\AppData\Roaming\npm\ionic.cmd
npm ERR! EEXIST: file already exists
npm ERR! File exists: C:\Users\User\AppData\Roaming\npm\ionic.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2022-12-05T01_33_19_049Z-debug-0.log

try to execute it with the flag --force

Do mean doing this ?

npm install -g ionic@latest @ionic/angular@latest @ionic/angular-toolkit@latest --save --force

yes, try it. Otherwise, uninstall those packages and install them again

ok, tried already. Seems the error still same.
Uninstall package using npm uninstall ?
and to install back, npm install ?

yes, do that. Anyway that error is something beyond the ionic version, i guess.

while doing

npm unistall

This error turn up

npm ERR! Must provide a package name to remove

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2022-12-05T08_31_34_886Z-debug-0.log

yes you must tell what to uninstall.

npm uninstall ionic@latest @ionic/angular@latest @ionic/angular-toolkit@latest --force
npm install -g ionic@latest @ionic/angular@latest @ionic/angular-toolkit@latest --save --force