Problem setting min and max for the new datetime comp

bbarascou · December 20, 2021, 11:43am

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 · December 20, 2021, 1:48pm

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 · December 20, 2021, 2:21pm

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 · December 20, 2021, 2:54pm

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 · December 20, 2021, 4:39pm

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 · December 27, 2021, 10:33am

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

LgArcida · January 25, 2022, 8:14pm

Any update on this?
Still suffering with the same issue

bbarascou · January 31, 2022, 11:36am

Saw this in 6.0.4

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

Biha · November 29, 2022, 9:05am

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

ciccilleju · November 29, 2022, 11:06am

it was solved, upgrade your ionic dependencies and libraries

Biha · November 30, 2022, 12:43am

Can i know how ? i am using ionic 6 now

ciccilleju · November 30, 2022, 11:35am

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 · December 5, 2022, 1:34am

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 · December 5, 2022, 8:14am

try to execute it with the flag --force

Biha · December 5, 2022, 8:18am

Do mean doing this ?

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

ciccilleju · December 5, 2022, 8:21am

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

Biha · December 5, 2022, 8:23am

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

ciccilleju · December 5, 2022, 8:29am

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

Biha · December 5, 2022, 8:32am

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 · December 5, 2022, 8:44am

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