根据 ngxdaterangepicker 中的 minDate 设置 maxDate angular 8
Set maxDate based on minDate in ngxdaterangepicker angular 8
我正在尝试根据 minDate 值设置 maxDate 值 selected。这个想法是,您可以 select 过去的任何一天作为 minDate,但 maxDate 必须等于 minDate 加上 15 天。
我的 html
里有这个
```<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[minDate]='minDate'
[maxDate]='maxDate' [timePicker]="true" [locale] = "locale"/>```
有什么方法可以在发送 pick_dates 表单之前获取 minDate 值 select?
我希望是这样的:
我的 html
里有这个
```<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[minDate]='minDate'
[maxDate]='minDate'+15 days
[timePicker]="true" [locale] = "locale"/>```
如果我做对了,你可以在那里添加一个(更改)事件,当你更改日期时,你可以重新计算最小日期和最大日期示例=>
<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[minDate]='minDate' (change)="updateTime($event)"
[maxDate]='maxDate' [timePicker]="true" [locale] = "locale"/>
假设您正在使用 moment()。
在 .ts 文件上 =>
updateTime(e){
this.minDate = moment(e);
this.maxDate = moment(e).add(15,'days');
}
startDateClicked($event) {
this.maxDate = moment($event.startDate._d).add(1, 'month');
}
endDateClicked($event) {
this.minDate = moment($event.endDate._d).subtract(1, 'month');
}
<input type="text" ngxDaterangepickerMd [(ngModel)]="selected" [showCustomRangeLabel]="true"
[ranges]="ranges" [showCancel]="true" [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
[showRangeLabelOnInput]="showRangeLabelOnInput" opens="right" [timePicker]="true"
[locale]="{format: 'MM/DD/YYYY'}" (datesUpdated)="applyFilter()" [minDate]="minDate"
[maxDate]='maxDate' (startDateChanged)="startDateClicked($event)"
(endDateChanged)="endDateClicked($event)">
To set maxDate based on minDate 'ngxDaterangepickerMd ' provides one
more attribute 'dateLimit'. So if you set 'dateLimit' say 5 then
whatever you choose on datepicker it will automatically disable all
dates after 5 days from chosen date. Plus if you want that limit not
to allow selection beyond current date then set 'maxDate' attribute to
currentDate in component.ts file as 'maxDate = moment()'.
<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[dateLimit]="dateLimit" [maxDate]='maxDate' [timePicker]="true"
[locale] = "locale"/>
component.ts:
maxDate = moment();
dateLimit = "5";
我正在尝试根据 minDate 值设置 maxDate 值 selected。这个想法是,您可以 select 过去的任何一天作为 minDate,但 maxDate 必须等于 minDate 加上 15 天。
我的 html
里有这个```<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[minDate]='minDate'
[maxDate]='maxDate' [timePicker]="true" [locale] = "locale"/>```
有什么方法可以在发送 pick_dates 表单之前获取 minDate 值 select?
我希望是这样的: 我的 html
里有这个```<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[minDate]='minDate'
[maxDate]='minDate'+15 days
[timePicker]="true" [locale] = "locale"/>```
如果我做对了,你可以在那里添加一个(更改)事件,当你更改日期时,你可以重新计算最小日期和最大日期示例=>
<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[minDate]='minDate' (change)="updateTime($event)"
[maxDate]='maxDate' [timePicker]="true" [locale] = "locale"/>
假设您正在使用 moment()。 在 .ts 文件上 =>
updateTime(e){
this.minDate = moment(e);
this.maxDate = moment(e).add(15,'days');
}
startDateClicked($event) {
this.maxDate = moment($event.startDate._d).add(1, 'month');
}
endDateClicked($event) {
this.minDate = moment($event.endDate._d).subtract(1, 'month');
}
<input type="text" ngxDaterangepickerMd [(ngModel)]="selected" [showCustomRangeLabel]="true"
[ranges]="ranges" [showCancel]="true" [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
[showRangeLabelOnInput]="showRangeLabelOnInput" opens="right" [timePicker]="true"
[locale]="{format: 'MM/DD/YYYY'}" (datesUpdated)="applyFilter()" [minDate]="minDate"
[maxDate]='maxDate' (startDateChanged)="startDateClicked($event)"
(endDateChanged)="endDateClicked($event)">
To set maxDate based on minDate 'ngxDaterangepickerMd ' provides one more attribute 'dateLimit'. So if you set 'dateLimit' say 5 then whatever you choose on datepicker it will automatically disable all dates after 5 days from chosen date. Plus if you want that limit not to allow selection beyond current date then set 'maxDate' attribute to currentDate in component.ts file as 'maxDate = moment()'.
<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
class="form-control" placeholder="{{'list.select' | translate}}"
[dateLimit]="dateLimit" [maxDate]='maxDate' [timePicker]="true"
[locale] = "locale"/>
component.ts:
maxDate = moment();
dateLimit = "5";