Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Leon-Shaw opened this issue Sep 29, 2024 · 3 comments
Closed

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

Leon-Shaw opened this issue Sep 29, 2024 · 3 comments
Assignees
@wenqi73
Labels
Component: DatePicker

Comments

@Leon-Shaw
Copy link

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
Copy link
Author

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
Copy link

kira-ru commented Oct 7, 2024

same problem

@WwwHhhYran WwwHhhYran mentioned this issue Nov 23, 2024
Closed
14 tasks
@Laffery
Copy link
Collaborator

Laffery commented Nov 26, 2024

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
    );
};

@Laffery Laffery closed this as completed Dec 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wenqi73 wenqi73

Labels
Component: DatePicker
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(module:date-picker): fix disabled date range boundary bug WwwHhhYran/ng-zorro-antd
4 participants
@wenqi73 @Leon-Shaw @Laffery @kira-ru