Javascript 如何在初始加载时在NgbDatePicker的输入字段中显示日期
我正在使用NgbDatePicker,在页面的初始加载时,我希望今天的日期显示在datepicker的输入字段中。 当前在初始加载时,将显示占位符值。有没有办法在加载时在输入字段中显示今天的日期Javascript 如何在初始加载时在NgbDatePicker的输入字段中显示日期,javascript,html,angular,Javascript,Html,Angular,我正在使用NgbDatePicker,在页面的初始加载时,我希望今天的日期显示在datepicker的输入字段中。 当前在初始加载时,将显示占位符值。有没有办法在加载时在输入字段中显示今天的日期 <input width="100px" class="form-control " [(ngModel)]="selectedDate" #date (ngModelChange)="dateSelected(date.value)" placeholder="dd-mm-yyy
<input width="100px" class="form-control " [(ngModel)]="selectedDate" #date
(ngModelChange)="dateSelected(date.value)" placeholder="dd-mm-yyyy" name="dp" ngbDatepicker #d="ngbDatepicker"
pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}" [minDate]="{year: 2010, month: 1, day: 1}" [maxDate]="maxDate"
[markDisabled]="isDisabled" />
<div class="input-group-append">
<button class="btn btn-outline-secondary fas fa-calendar-alt" (click)="d.toggle()"
(change)="dateSelected($event.target.value)" type="button"
(ngModelChange)="dateSelected($event.target.value)"></button>
</div>
预期结果:加载时,输入字段中应显示今天的日期
实际结果:只显示占位符的值。如果您想充分利用NgBoostrap DatePicker模块,可以将导入到component.ts中,并使用它获取今天的日期。请注意,NgBootstrap日期选择器不接受通常的JavaScript日期对象或日期字符串作为输入,因为它使用接口 首先,将NgbCalendar导入component.ts
import { NgbCalendar, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
然后,使用getToday()
方法将今天的日期指定给selectedDate
属性。你的日期选择器应该用今天的日期初始化
selectedDate: NgbDateStruct = undefined;
constructor(private calendar: NgbCalendar) {
this.selectedDate = calendar.getToday()
}
或者,您可以使用Vanilla JavaScript设置今天的日期
constructor(private calendar: NgbCalendar) {
const today = new Date();
this.selectedDate = {
day: today.getDate(),
month: today.getMonth() + 1,
year: today.getFullYear()
};
}
请注意,ngbDatepicker模型是NgbDate对象。您必须在构造函数或onInit方法中设置[ngModel]=“selectedDate”变量,类似这样的设置
ngOnInit() {
var today = new Date();
this.selectedDate = new NgbDate(today.getFullYear(), today.getMonth(), today.getDate())
}
谢谢请分享您的代码。我刚刚用代码更新了我的问题。@Satyaram很乐意帮忙!无法投票,因为我没有足够的声誉这么做,但我标记为接受。谢谢WestJun