Struggling to get ion-datetime min & max working correctly

Ionic Framework ionic-v3
1

Hi,

I’m struggling to get the ion-datetime component working correctly.

My issue is with setting the min and max values.

The error I get is the following:
caused by: Cannot read property ‘year’ of null

What is the correct date format to enter for min and max?

Are min and max meant to be used like [min]="" or min="{{…}}"

Thanks

1 Like
2

The docs say ISO-8601.

3

So I’ve set the time as per ISO-8601 and while I dont get the error, it still doesnt respect my minimum.

min=“2017-04-23”

Any ideas?

4

I believe if you set a min, you must also specify a max (and a starting point in between the two somewhere). The following seems to work for me:

dt: string = "2017-07-01";

<ion-datetime [(ngModel)]="dt" min="2017-04-23" max="2020-10-10"></ion-datetime>
4 Likes
5

Thanks :slight_smile:

That got me sorted.

6

Hi,
I am new to ionic framework and trying to use ion-datetime in ionic2.

I have two ion-datetime fields in my page ,one is start date and other is end date to show energy consumption graphs. start date should be set to current month first date(Ex: if current month is june 01-06-2017,if july 01-07-2017 …) and end date should be set to today. I am done with End date,but I am stuck with setting start date as month first date dynamically… Expecting some immediate help.
Thanks in advance!

7

Hi :blush:,
I tried this approach to get my bug cracked after crushing 6-7 days. In my case, I have to pass the getMinimum value as the minimum time while checking out. So users should not be able to check-out before the check-in time.

.ts File
check_in_value: 2021-12-06T13:15:11.684Z
const a = parseISO(check_in_value);
const b = addHours(new Date(a),5);
this.getMinimum = b.toISOString()
concole.log(this.getMinimum)

HTML File
<ion-datetime
displayFormat=“YYYY-MM-DD HH:mm”
pickerFormat=“YYYY-MM-DD HH:mm”
[value]=“check_out”
[min]=“getMinimum”

Important Notes:

The Displaying Format plays an important factor in rendering the Date and Time. Read the documentation thoroughly.
“Ionic Framework uses the ISO 8601 datetime format for its value”.
Link: ion-datetime: Ionic API Input for Datetime Format Picker

“Exactly the components shown here must be present, with exactly this punctuation”
Link: : Date and Time Formats