Question

我是离子的新手，我使用离子日期时间选择器插件，我想在iondatetimepicker中禁用过去的日期。

我的问题是我无法停用以前的日期。

请帮我找到解决方案。

<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" />

Answer 1

在离子中使用min选项。因此，您只能选择2016-10-31的日期。

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

Answer 2

可以设置如下：

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

参考文件： https://ionicframework.com/docs/v2/api/components/datetime/DateTime/#min-and-max-datetimes

Answer 3

很简单

<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>

在TS文件中，将此代码添加到构造函数上方

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

Answer 4

您可以通过安装 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>

在您的 ts 文件中，您将包含以下代码：

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

如何在iond中的iondatetimepicker中禁用过去的日期

4 个答案: