components 相关问题

html：发行日期 html: <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" > </nz-date-picker> </div> ts： initializeForm() { this.purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl('', Validators.compose([ Validators.required, ])), }) } 我想根据问题日期禁用之前的日期如果issue_date是：05-05-2024，那么在delivery_date，它将禁用issue_date的前一个日期，如果我更改它也将作为禁用前一个日期的方式工作。 [n.b：issue_date默认值是第一次设置为当前日期，因此用户可以根据需要更改它，但如果不更改它将设置为当前日期] 您可以向 [nzDisabledDate] 提供包含禁用日期逻辑的功能到您的 delivery_date 日期选择器。 <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDeliveryDate" > </nz-date-picker> disabledDeliveryDate = (date: Date): boolean => { let issueDate = this.purchaseOrderForm.controls.issue_date.value; if (!issueDate || !date) { return false; } return date.getTime() <= new Date(issueDate).getTime(); }; 演示@StackBlitz 您需要使用 nzDisabledDate 属性并提供一个函数，该函数返回一个布尔值，确定是否需要禁用/启用日期。下面是工作示例！ HTML <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> TS disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; 完整代码： import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { differenceInCalendarDays, setHours } from 'date-fns'; import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'nz-demo-date-picker-disabled-date', template: ` <form [formGroup]="purchaseOrderForm"> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> </div> </form> `, styles: [ ` nz-date-picker, nz-range-picker { margin: 0 8px 12px 0; } `, ], }) export class NzDemoDatePickerDisabledDateComponent { purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl( '', Validators.compose([Validators.required]) ), }); disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; } Stackblitz 演示

angular components ng-zorro-antd

回答 2 投票 0

在服务端组件之间共享数据

我可以提高效率，而不必两次调用 getPosts 吗？我想使用初始帖子来创建不同的布局，但我不想继续使用 getPosts() 或者这不是 po...

next.js async-await components server-side-rendering

回答 2 投票 0

如何使用 contentlayer 创建自定义 JSX 组件？

我尝试使用 contentlayer 创建自定义组件，但它没有按预期工作。起初，我认为我必须在 .mdx 文件中导入自定义组件。但是，每次我这样做...

reactjs components jsx mdx contentlayer

回答 1 投票 0

components 相关问题

最新问题