Problem setting min and max for the new datetime comp

[bbarascou]

Hello,

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;

this.datePicker.min='2021-12-20T11:00';

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

[bbarascou]

Update here

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

[gabriel-arrvda]

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

[bbarascou]

I made it working setting values on init instead of constructor

  ngOnInit() { 
   this.min='2021-12-20T11:00';
   this.max='2021-12-29';
  }

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

[bbarascou]

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

[bbarascou]

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

[LgArcida]

Any update on this?
Still suffering with the same issue

[bbarascou]

Saw this in 6.0.4

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

[Biha]

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

[ciccilleju]

it was solved, upgrade your ionic dependencies and libraries

[Biha]

@ciccilleju

upgrade your ionic dependencies and libraries

Can i know how ? i am using ionic 6 now

[ciccilleju]

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

[Biha]

@ciccilleju

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

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

[ciccilleju]

try to execute it with the flag --force

[Biha]

@ciccilleju

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

Do mean doing this ?

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

[ciccilleju]

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

[Biha]

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

[ciccilleju]

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

[Biha]

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

[ciccilleju]

yes you must tell what to uninstall.

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