viv*_*ien 5 ng-bootstrap angular
在我的 angular 4 中,我使用的是 Ng-bootstrap (v1.1.0) 我在多个模块下有多个日期选择器。我想在所有位置设置 maxDate 配置。我的文件夹结构如下。
public.module.ts
public.component.ts
---- first.module.ts
---- first.component.ts
-------------- first-sub.component.ts
..............................
..............................
---- second.module.ts
----second.component.ts
-------second-sub.component.ts
..............................
..............................
Run Code Online (Sandbox Code Playgroud)
我尝试在 public.component.ts 中初始化 NgbDatepickerConfig 如下
constructor(config: NgbDatepickerConfig) {
config.maxDate = { "year": 2018, "month": 7, "day": 4} ;
}
Run Code Online (Sandbox Code Playgroud)
我正在使用以下代码来显示日历
<input type="text" id="selectDate" class="form-control" placeholder="{{'DATE_OF_INCIDENT' | translate}}" formControlName="selectDate"
ngbDatepicker #selectedDate="ngbDatepicker" readonly>
Run Code Online (Sandbox Code Playgroud)
您能否提出一种方法,以便我们可以在一个地方配置日期设置,并且可以在所有使用 Ngb DatePicker 的位置使用
小智 6
必须使用 NgbModule 和 FormsModule
this.minDate = { year: 1985, month: 1, day: 1 };
this.maxDate={year:new Date().getFullYear(),month: 1, day: 1}
this.startDate = { year: 1988, month: 1, day: 1 };
Run Code Online (Sandbox Code Playgroud)
<input class="form-control" placeholder="yyyy-mm-dd" placement="top-left"
[minDate]="minDate" [maxDate]="maxDate" [startDate]="startDate" name="dateOfBirth"
id="dateOfBirth" [(ngModel)]="dateOfBirth" ngbDatepicker #d="ngbDatepicker"
(click)="d.toggle()">
Run Code Online (Sandbox Code Playgroud)
对我来说,它的工作原理如文档中所述:
<input class="form-control" type="text" formControlName="birthDate" placeholder="Date of Birth"
id="inputDateOfBirth" name="dp" ngbDatepicker #d="ngbDatepicker"
[minDate]="{year: 1900, month: 1, day: 1}">
Run Code Online (Sandbox Code Playgroud)
文档:https://ng-bootstrap.github.io/#/components/datepicker/overview#limiting-dates
| 归档时间: |
|
| 查看次数: |
10403 次 |
| 最近记录: |