In the 'date-picker' component. When using the date type to pass 'disabledDate', the end date cannot be selected, which is not as expected

[Leon-Shaw]

Reproduction link

https://stackblitz.com/edit/angular-taetoz?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-date-picker-format',
  template: `
    <nz-date-picker [nzFormat]="dateFormat" [nzDisabledDate]="disabledDate"></nz-date-picker>
  `,
  styles: [
    `
      nz-date-picker
    `
  ]
})
export class NzDemoDatePickerFormatComponent {
  dateFormat = 'yyyy/MM/dd';
  disabledDate = (time: Date): boolean => {
    return new Date(time) < new Date("2024-09-16") || new Date(time) > new Date("2024-09-30");
  };
}

What is expected?

The deadline of September 30th can be selected

What is actually happening?

The component did not respond after clicking on the deadline of September 30th

Environment	Info
ng-zorro-antd	18.1.1
Browser	Google Chrome Version 129.0.6668.71 (Official Build) (64-bit)

[Leon-Shaw]

I can only use it this way now, but it's not beautiful enough

  disabledDate = (time: Date): boolean => {
    const endTimeDateOnly = new Date(this.endTime);
    endTimeDateOnly.setHours(0, 0, 0, 0); 
    const endTimeEndOfDay = new Date(endTimeDateOnly.getTime() + 24 * 60 * 60 * 1000 - 1);
    return new Date(time) < new Date(this.startTime) || new Date(time) > endTimeEndOfDay;
  };

[kira-ru]

same problem

[Laffery]

stackblitz.com/edit/angular-taetoz?file=src%2Fapp%2Fapp.component.ts

You can use differenceInCalendarDays of date-fns lib instead

disabledDate = (time: Date): boolean => {
    return (
      differenceInCalendarDays(new Date('2024-09-16'), time) > 0 ||
      differenceInCalendarDays(time, new Date('2024-09-30')) > 0
    );
};