如何为ng-bootstrap datepicker

时间:2017-03-27 13:52:47

标签: angular datepicker ng-bootstrap

以下是我用来设置minDate的代码

 <input ngbDatepicker #d="ngbDatepicker"  [minDate]="minDate" [formControl]="Form.controls['dateOfBirth']">

在组件中,我将minDate设置如下:

public minDate: Date = void 0; 
constructor() {
    this.minDate = new Date(1950, 1, 1);
}

但是,datepicker仍然将2007年视为minDate。有没有遗漏的东西。如果需要任何其他信息,请告诉我。

感谢您的时间。

3 个答案:

答案 0 :(得分:18)

在您的代码段中,您似乎正在使用https://ng-bootstrap.github.io/#/components/datepicker中的 ng-bootstrap 。假设我没有问题,您需要使用NgbDateStruct(包含yearmonthday等字段的对象)而不是内置JavaScript {{ 1}}对象。例如,要将最小日期设置为今年年初,您可以使用:

Date

这是一个关于plunker的工作示例:http://plnkr.co/edit/VDEYDwp7QIZDDHatCNPh?p=preview

答案 1 :(得分:1)

只需通过[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"/>

答案 2 :(得分:0)

这是您的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(),
};