Angular 2 在日期选择器中禁用特定日期
Posted
技术标签:
【中文标题】Angular 2 在日期选择器中禁用特定日期【英文标题】:Angular 2 Disable Specific Dates in Date Picker 【发布时间】:2022-01-12 04:59:57 【问题描述】:我在尝试禁用日期选择器中的某些日期时遇到了一些问题。我在打字稿中自定义的日期选择器如下:
import DateFormatter from './ng2-bootstrap/date-formatter';
import DatePickerComponent from './ng2-bootstrap/datepicker.component';
import * as moment from 'moment-timezone';
@Component(
selector: '[acn-datepicker-popup]',
templateUrl: './datepicker-popup.component.html',
inputs: [],
host:
)
export class DatepickerPopupComponent implements OnInit
@Input() datepickerDirective: any;
@Input() minDate: moment.Moment;
@Input() maxYears: number;
@Input() alignRight: boolean = false;
@Input() disabledDates: string;
private dateFormat: string = 'DD/MM/YYYY';
private earliestDate: string = '01/01/1970';
datePickerCmp: DatePickerComponent;
datepickerFormControl: FormControl;
selectedDate: moment.Moment;
dateFormatter: DateFormatter = new DateFormatter();
constructor(private _datePickerCmp: DatePickerComponent, @Inject('datepickerFormControl') private _datepickerFormControl: FormControl)
this.datePickerCmp = _datePickerCmp;
this.datepickerFormControl = _datepickerFormControl;
if (this.datepickerFormControl.value && this.dateFormatter.isValid(this.datepickerFormControl.value, this.dateFormat))
this.selectedDate = moment(this.datepickerFormControl.value, this.dateFormat);
ngOnInit()
var splits = this.disabledDates.toString().split(";");
for(let i = 0; i < splits.length; i++)
console.log("Dates" + splits[i]);
我在 HTML 中的日期选择器组件:
<div class="col-sm-6 form-group has-feedback">
<label for="testDte">TEST DATE<span class="text-danger">*</span></label>
<div class="input-group" [(datepicker-popup)]="bookingModel.controls.testDte" [disabledDates]="bkDatesListStr">
<input type="text" [formControl]="bookingModel.controls.testDte" class="form-control" maxlength="10" style="border-right:transparent">
<span class="input-group-btn" align="right">
<button class="btn btn-square btn-white-primary form-control" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
我设法在 ngOnInit() 中传递了要禁用的日期。 splits 变量包含要在日期选择器中灰显的日期列表。但是,我不知道如何在日期选择器中设置要禁用的日期。有什么想法吗?
谢谢!
【问题讨论】:
【参考方案1】:我会给你一个如何禁用特定日期的简单示例。
首先,我们需要在 Angular 应用程序中安装 Material Design 主题。所以让我们像下面这样添加:
ng add @angular/material
Ts 文件:
import Component from '@angular/core';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
)
export class AppComponent
title = 'my-app';
myHolidayDates = [
new Date("12/1/2020"),
new Date("12/20/2020"),
new Date("12/17/2020"),
new Date("12/25/2020"),
new Date("12/4/2020"),
new Date("12/7/2020"),
new Date("12/12/2020"),
new Date("12/11/2020"),
new Date("12/26/2020"),
new Date("12/25/2020")
];
myHolidayFilter = (d: Date): boolean =>
const time=d.getTime();
return !this.myHolidayDates.find(x=>x.getTime()==time);
现在在视图文件中,我们将使用 datepicker 编写输入元素的代码,如下所示:
<h1>Angular Material Disable specific dates</h1>
<mat-form-field>
<input matInput [matDatepicker]="picker" [matDatepickerFilter]="myHolidayFilter" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker ></mat-datepicker>
</mat-form-field>
试试这个方法。
【讨论】:
我在尝试加载页面时遇到此错误:无法绑定到“matDatepicker”,因为它不是“输入”的已知属性。我使用的是 Angular 2,兼容吗?以上是关于Angular 2 在日期选择器中禁用特定日期的主要内容,如果未能解决你的问题,请参考以下文章