如何在 ionic2 中根据 start_date 选择器调整 end_date 选择器,反之亦然?
How to adjust end_date picker according to start_date picker and vice versa in ionic2?
我正在尝试根据用户在开始日期中选择的内容来调整结束日期选择器,如果用户决定先选择结束日期,则反之亦然。
这是我的代码:
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [(ngModel)]="start_date"></ion-datetime>
</ion-item>
<ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label>
<ion-item>
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="getDate(start_date | date:'MMddy')" ></ion-datetime>
</ion-item>
start-date在controller中初始化为new Date(),getDate函数为:
getDate(date){
date = date.split('\/');
date = date[2] + '-' + date[0] + '-' + date[1];
return date;
}
前面代码中的标签:
<ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label>
给出了正确的结果:2016-29-06(今天的日期),但是对于结束日期选择器它不起作用,尽管如果我像这样编辑结束日期时间的最小值 属性 它会起作用:
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="2016-06-29" ></ion-datetime>
您可以为 getting/storing 开始日期创建另一种方法并将其用作最小值:
getStart(){
var minDate = getDate(start_date | date:'MMddy');
return minDate;
}
然后将 min
更改为:
min="getStart()"
这行得通,我需要在 min 表达式中添加大括号 {{}},另一种方法是使用 [min] 而不是 min。
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [ngModel]="start_date" (ngModelChange)="start_boolean=true" min="{{getDate(today | date:'MMddy')}}"></ion-datetime>
</ion-item>
<ion-item *ngIf="start_boolean">
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="{{getDate(start_date | date:'MMddy')}}"></ion-datetime>
</ion-item>
并且在 TS 文件中:
今天初始化 var:
today: Date = new Date();
和 getDate 函数:
getDate(date){
date = date.split('\/');
date = date[2] + '-' + date[0] + '-' + date[1];
let re = /\//gi;
date = date.replace(re, "-");
return date;
}
我正在尝试根据用户在开始日期中选择的内容来调整结束日期选择器,如果用户决定先选择结束日期,则反之亦然。 这是我的代码:
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [(ngModel)]="start_date"></ion-datetime>
</ion-item>
<ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label>
<ion-item>
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="getDate(start_date | date:'MMddy')" ></ion-datetime>
</ion-item>
start-date在controller中初始化为new Date(),getDate函数为:
getDate(date){
date = date.split('\/');
date = date[2] + '-' + date[0] + '-' + date[1];
return date;
}
前面代码中的标签:
<ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label>
给出了正确的结果:2016-29-06(今天的日期),但是对于结束日期选择器它不起作用,尽管如果我像这样编辑结束日期时间的最小值 属性 它会起作用:
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="2016-06-29" ></ion-datetime>
您可以为 getting/storing 开始日期创建另一种方法并将其用作最小值:
getStart(){
var minDate = getDate(start_date | date:'MMddy');
return minDate;
}
然后将 min
更改为:
min="getStart()"
这行得通,我需要在 min 表达式中添加大括号 {{}},另一种方法是使用 [min] 而不是 min。
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [ngModel]="start_date" (ngModelChange)="start_boolean=true" min="{{getDate(today | date:'MMddy')}}"></ion-datetime>
</ion-item>
<ion-item *ngIf="start_boolean">
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="{{getDate(start_date | date:'MMddy')}}"></ion-datetime>
</ion-item>
并且在 TS 文件中:
今天初始化 var:
today: Date = new Date();
和 getDate 函数:
getDate(date){
date = date.split('\/');
date = date[2] + '-' + date[0] + '-' + date[1];
let re = /\//gi;
date = date.replace(re, "-");
return date;
}