在Angular中使用按钮构建datepicker可以通过以下步骤实现:
<button (click)="openDatePicker()">打开日期选择器</button>
<input type="text" [(ngModel)]="selectedDate" [matDatepicker]="picker">
<mat-datepicker #picker></mat-datepicker>
import { Component } from '@angular/core';
@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent {
selectedDate: Date;
openDatePicker() {
this.picker.open();
}
}
app.module.ts
中:import { MatDatepickerModule } from '@angular/material/datepicker';
@NgModule({
imports: [
// 其他导入...
MatDatepickerModule
],
// 其他配置...
})
export class AppModule { }
selectedDate
变量上。这样,你就可以使用按钮在Angular中构建datepicker了。
请注意,上述示例中使用了Angular Material的mat-datepicker
组件。Angular Material是一个UI组件库,提供了丰富的可重用组件,包括日期选择器。你可以根据自己的需求选择其他日期选择器组件或自定义样式。