我试图用最小和最大实现离子日期时间选择器。如果最小值,则将增加30分钟;如果最大值,则将减去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>
您不能像这样简单地更改最小和最大吗?
<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之前对其进行修改。请参见下面的代码。我正在使用时间在从后端收到的时间中增加/减去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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句