CODEWITHSUNDEEP
ionic-frameworkionic4
Shekhar
Shekhar

Reputation: 633

How to set minimum and max times in an ion-datetime

I am using an ionic DateTime component to pick just time in my page. But I have to just allow the user to select times from 06:30 Am to 07:30 PM. How can I limit the min-max times in ion-datetime

I have already tried giving min value to the component directly.

<ion-datetime displayFormat="hh:mm a" min="minDate"></ion-datetime>

Upvotes: 3

Views: 15301

Answers (5)

Lewin Muzvonda
Lewin Muzvonda

Reputation: 475

This is how you can achieve it without restricting users from selecting between 7:30AM to 6:30PM which will happen if you use the min and max attributes.

<ion-datetime hourCycle="h23"
[(ngModel)]="selectedDate" 
minuteValues="30" 
hourValues="06,07,08,09,10,11,12,13,14,15,16,17,18,19"></ion-datetime>

Upvotes: 0

haris mahmood
haris mahmood

Reputation: 1

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]="getMinimum3"
></ion-datetime>

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: https://ionicframework.com/docs/api/datetime?_gl=1*1lg7t6u*_ga*MTk3MzQ4NzM5Ny4xNjQxODg2ODQy*_ga_REH9TJF6KF*MTY1MDMyNDM1MS4xMTIuMS4xNjUwMzI2NjU0LjA.

“Exactly the components shown here must be present, with exactly this punctuation” Link: https://www.w3.org/TR/NOTE-datetime

Upvotes: 0

Chandrakant Devani
Chandrakant Devani

Reputation: 336

try with this :

I have using pickerFormate (24 Hr Formate) and displayValue (12 Hr Formate). it's similar your logic.

Homepage.html

<ion-item>
    <ion-label>Time</ion-label>
    <ion-datetime  [hourValues]="hourValues" [min]="minTime" [max]="maxTime" displayFormat="hh:mm A" pickerFormat="HH:mm A" (ionFocus)="changeDate($event)"></ion-datetime>
  </ion-item>

Homepage.ts

myDate: String = new Date().toISOString();
  minTime = '06:30';
  maxTime = '19:30';
  hourValues = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19'];

Result

enter image description here

Demo Link:

https://stackblitz.com/edit/github-htjuyr-datepicker

Upvotes: 1

Jatin Devani
Jatin Devani

Reputation: 194

please try this

html code 

<ion-datetime displayFormat="hh:mm a" [min]="minTime" [max]="maxTime"></ion-datetime>

ts code 

 minTime = '06:30';
 maxTime = '07:30';

Upvotes: 0

Eslam Abu Hugair
Eslam Abu Hugair

Reputation: 1208

you can specify them as props:

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
  </ion-datetime>
</ion-item>

check the ion-datetime docs on Min and Max Datetimes section

Upvotes: 2

Related Questions