CODEWITHSUNDEEP
htmlangularjsdatepluginsionic-framework
mounika
mounika

Reputation: 39

How to disable past dates in iondatetimepicker in ionic

I am new to ionic, I use the ion-date-time-picker plugin and I want to disable past dates in iondatetimepicker in ionic.

My problem is that I'm unable to disable the previous dates.

Please help me to find the solution.

<input readonly="readonly" type="text" ion-datetime-picker class="fromDate" ng-attr-placeholder="{{data.start_date | date:'dd-MMM-yyyy HH:mm'}}" ng-required="true" ng-model="data.start_date" />

Upvotes: 2

Views: 9229

Answers (4)

Isaac Quarshie
Isaac Quarshie

Reputation: 77

You can implement this by installing moment.js:

npm install moment --save

<ion-item>
    <ion-label>Filter by Date</ion-label>
    <ion-datetime displayFormat="DDDD MMMM YYYY" min="{{displayDate}}"  [(ngModel)]="selectedDate">
    </ion-datetime>
  </ion-item>

In your ts file, you will include the code below:

displayDate: any = moment().format();

Upvotes: 1

Shirjeel Ahmed Khan
Shirjeel Ahmed Khan

Reputation: 267

Its simple,

<ion-item>
         <ion-label>Date</ion-label>
         <ion-icon slot="end" name="calendar"></ion-icon>
         <ion-datetime  [(ngModel)]="date"
                        [min]="date"
                       name="date"
                       required
                       #dateCtrl="ngModel"></ion-datetime>
       </ion-item>

In TS File, add this code above the constructor

date: String = new Date().toISOString();

Upvotes: 2

kkiat
kkiat

Reputation: 571

Can set it as below:

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

Refer to cocument: https://ionicframework.com/docs/v2/api/components/datetime/DateTime/#min-and-max-datetimes

Upvotes: 1

Balaji Marimuthu
Balaji Marimuthu

Reputation: 2058

Use min option in ionic. So you are able to select the date from 2016-10-31 only.

<ion-datetime displayFormat="MMMM YYYY" min="2016-10-31" [(ngModel)]="myDate">

Upvotes: 0

Related Questions