CODEWITHSUNDEEP
angularionic-framework
michellesokolov
michellesokolov

Reputation: 45

Set Dates beyond current year using Ionic Framework Date Picker

I am working on a project where users can input their certificates which have expiration dates. I'm using ionic datepicker which works great for the completion date of earning the certificate but I run into an issue with choosing the expiration date. The datepicker won't go passed 2020 for year option. For example - if a user has a certificate that expires in 2022. Is there a way to add future years to the scroll option? This is my current code:

    <ion-datetime display-format="MM/DD/YYYY" picker-format="MM DD YYYY" type="date" formControlName="dateExpired"
        type="text">
    </ion-datetime>

Upvotes: 1

Views: 1434

Answers (2)

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3128

Min and Max Datetimes - https://ionicframework.com/docs/api/datetime#min-and-max-datetimes

Dates are infinite in either direction, so for a user's selection there should be at least some form of restricting the dates that can be selected. By default, the maximum date is to the end of the current year, and the minimum date is from the beginning of the year that was 100 years ago.

To customize the minimum and maximum datetime values, the min and max component properties can be provided which may make more sense for the app's use-case, rather than the default of the last 100 years. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. By passing 2016 to the min property and 2020-10-31 to the max property, the datetime will restrict the date selection between the beginning of 2016, and October 31st of 2020.

Example:

<ion-item>
  <ion-label position="stacked">Date</ion-label>
  <ion-datetime display-format="MM/DD/YYYY" picker-format="MM DD YYYY" min="2016" max="2020-10-31"></ion-datetime>
</ion-item>

Upvotes: 1

John Kane
John Kane

Reputation: 4443

it looks like you can set a min or max date take a look at this link.

Upvotes: 2

Related Questions