,可以通过以下步骤实现:
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
onInit
方法:@Component({
selector: 'app-custom-datepicker',
template: `
<input type="date" [formControl]="formControl" [formlyAttributes]="field">
`,
})
export class CustomDatepickerComponent extends FieldType {
onInit() {
super.onInit();
const today = new Date();
const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
this.to.max = { year: tomorrow.getFullYear(), month: tomorrow.getMonth() + 1, day: tomorrow.getDate() };
}
}
import { Component } from '@angular/core';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { CustomDatepickerComponent } from './custom-datepicker.component';
@Component({
selector: 'app-my-form',
template: `
<form [formGroup]="form">
<formly-form [fields]="fields" [model]="model" [form]="form"></formly-form>
</form>
`,
})
export class MyFormComponent {
form = new FormGroup({});
model = {};
fields: FormlyFieldConfig[] = [
{
key: 'date',
type: 'custom-datepicker',
templateOptions: {
label: 'Select Date',
},
},
];
constructor() {
FormlyFieldConfig.templateManipulators.postWrapper.push((field) => {
if (field.key === 'date') {
field.templateOptions.disabled = true;
}
return field;
});
}
}
<form [formGroup]="form">
<formly-form [fields]="fields" [model]="model" [form]="form"></formly-form>
</form>
通过以上步骤,你可以在Angular中禁用Formly Datepicker中的未来日期。在自定义的日期选择器类型中,我们通过重写onInit
方法来设置日期选择器的最大日期为明天。然后,在组件中注册自定义的日期选择器类型,并在模板中使用它。最后,通过FormlyFieldConfig.templateManipulators.postWrapper
来禁用日期选择器字段。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云