如何为 ng-bootstrap datepicker 设置 minDate
How to set minDate for ng-bootstrap datepicker
下面是我用来设置最小日期的代码
<input ngbDatepicker #d="ngbDatepicker" [minDate]="minDate" [formControl]="Form.controls['dateOfBirth']">
在组件中,我将 minDate 设置如下:
public minDate: Date = void 0;
constructor() {
this.minDate = new Date(1950, 1, 1);
}
但是日期选择器仍然将 2007 显示为最小日期。有没有什么东西不见了。如果需要任何其他信息,请告诉我。
感谢您的宝贵时间。
从您的代码片段来看,您似乎正在使用 https://ng-bootstrap.github.io/#/components/datepicker 中的 ng-bootstrap。假设我是正确的,您需要使用 NgbDateStruct
(具有 year
、month
、day
等字段的对象)而不是内置的 JavaScript Date
对象。例如,要将最小日期设置为今年年初,您可以使用:
this.minDate = {year: 2017, month: 1, day: 1};
这是一个 plunker 中的工作示例:http://plnkr.co/edit/VDEYDwp7QIZDDHatCNPh?p=preview
直接通过[minDate]="{year: 1980, month: 1, day: 1}"
:
<input type="text" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" [minDate]="{year: 1980, month: 1, day: 1}" name="date" class="form-control"/>
这是您的HTML代码
<mat-form-field class="col-md-3">
<mat-label >Date :</mat-label>
<input
matInput
ngxDaterangepickerMd
formControlName="dateFilter"
placeholder="Choose date" [maxDate]="maxDate" [minDate]="minDate"
[showDropdowns]="true"
[singleDatePicker]="true"
[showCancel]="true"
[locale]="locale"
/>
</mat-form-field>
这转到打字稿:
public minDate = moment().subtract(1, 'days');
public maxDate = moment();
selected = moment();
locale :LocaleConfig= {
applyLabel: 'Apply',
customRangeLabel: ' - ',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek(),
};
下面是我用来设置最小日期的代码
<input ngbDatepicker #d="ngbDatepicker" [minDate]="minDate" [formControl]="Form.controls['dateOfBirth']">
在组件中,我将 minDate 设置如下:
public minDate: Date = void 0;
constructor() {
this.minDate = new Date(1950, 1, 1);
}
但是日期选择器仍然将 2007 显示为最小日期。有没有什么东西不见了。如果需要任何其他信息,请告诉我。
感谢您的宝贵时间。
从您的代码片段来看,您似乎正在使用 https://ng-bootstrap.github.io/#/components/datepicker 中的 ng-bootstrap。假设我是正确的,您需要使用 NgbDateStruct
(具有 year
、month
、day
等字段的对象)而不是内置的 JavaScript Date
对象。例如,要将最小日期设置为今年年初,您可以使用:
this.minDate = {year: 2017, month: 1, day: 1};
这是一个 plunker 中的工作示例:http://plnkr.co/edit/VDEYDwp7QIZDDHatCNPh?p=preview
直接通过[minDate]="{year: 1980, month: 1, day: 1}"
:
<input type="text" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" [minDate]="{year: 1980, month: 1, day: 1}" name="date" class="form-control"/>
这是您的HTML代码
<mat-form-field class="col-md-3">
<mat-label >Date :</mat-label>
<input
matInput
ngxDaterangepickerMd
formControlName="dateFilter"
placeholder="Choose date" [maxDate]="maxDate" [minDate]="minDate"
[showDropdowns]="true"
[singleDatePicker]="true"
[showCancel]="true"
[locale]="locale"
/>
</mat-form-field>
这转到打字稿:
public minDate = moment().subtract(1, 'days');
public maxDate = moment();
selected = moment();
locale :LocaleConfig= {
applyLabel: 'Apply',
customRangeLabel: ' - ',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek(),
};