离子日期时间从最小值加上 30 分钟，从最大值减去 30 分钟

Question

我试图用最小和最大实现离子日期时间选择器。如果 min 将增加 30 分钟，如果 max 它将减去 30 分钟。我该怎么做才能实现它.. stackblitz

HTML

<ion-item>
    <ion-label>Start Time</ion-label>
    <ion-datetime displayFormat="h:mm A" min="01:00" max="10:00" pickerFormat="h mm A" minuteValues="0,30"></ion-datetime>
</ion-item>

Answer 1

你不能像这样简单地改变你的最小值和最大值吗？

<ion-datetime displayFormat="h:mm A" min="01:30" max="09:30" pickerFormat="h mm A" minuteValues="0,30"></ion-datetime>

--编辑（基于评论）--

您可以修改 ion-datetime 的 min、max 参数，然后再将它们传递给您的 html。请参阅下面的代码。我正在使用 moment 从后端收到的时间添加/减去 30 分钟。然后在html中使用这些变量

import moment from 'moment';

export class HomePage {
  newMin: string;
  newMax: string;
  constructor(public navCtrl: NavController) {
    const min = "01:00"; // Receive from backend
    const max = "10:00"; // Receive from backend
    this.newMin = moment(min, "HH:mm").add(30, 'minutes').format('HH:mm'); // Add 30 mins
    this.newMax = moment(max, "HH:mm").subtract(30, 'minutes').format('HH:mm') // Subtract 30 mins
  }

}

现在在 html 中使用这些

<ion-datetime displayFormat="h:mm A" [min]="newMin" [max]="newMax" pickerFormat="h mm A" minuteValues="0,30"></ion-datetime>