search

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.82k stars 3.86k forks source link

Ability to select only the end date inside a nz-range-picker #4736

Open IonelLupu opened 4 years ago

IonelLupu commented 4 years ago

What problem does this feature solve?

We have a backend service that is filtering some data based on a date range. It would be nice to be able to set only the end date of the range picker so the service can show the records up to that date.

What does the proposed API look like?

There is no need for a special API. Clicking on the "End date" box inside range-picker and selecting a date should only update the end date of the range-picker and leave the start date as undefined.

Maybe a flag can be added so we don't break the current functionality where the start date is always set.

IonelLupu commented 3 years ago

so, what do you think about this feature, @wenqi73 ?

wenqi73 commented 3 years ago

@IonelLupu I wonder why not use a single datepicker if you just need one date? 🤔

IonelLupu commented 3 years ago

@wenqi73

We thought about this but the user can select a range or a single date (a start date or an end date).

The backend service expects this message in the request:

filters: {
    startDate: undefined | Date,
    endDate: undefined | Date
}

In the UI I have to have a range picker because the user can select a startDate+endDate or only a startDate or only an endDate. Based on this, I send this request to the backend :

If date range If startDate only If endDate only 
filters: {
    startDate: Date,
    endDate: Date
}
            
filters: {
    startDate: Date
}
            
filters: {
    endDate: Date
}

Right now, even if I can click on the "End date" input inside the range picker, if I select a date, the range picker updates the "Start date" input instead of the "End date" one.

wenqi73 commented 3 years ago

I got it, but the range picker must have two valid dates; two single date picker could meet your needs.

IonelLupu commented 3 years ago

@wenqi73 yes, two single date pickers will meet my needs, indeed. But the UI and UX of a range picker is way better and it looks more beautiful.

Maybe we can change the range picker to accept a value with this type: undefined, [Date| undefined, Date| undefined].

The only workaround it comes to mind right now is to make a custom component with two single date pickers that look like a range picker by altering their CSS. And when I click on it, it will open both date pickers. Idk if this is possible to open two date pickers in the same time tho'

haytam commented 3 years ago

@IonelLupu Another workaround is to comment the following lines https://github.com/NG-ZORRO/ng-zorro-antd/blob/51e1ff1c0cee9fba0bfb13a86c3954c6bb988493/components/date-picker/util.ts#L60-L62

IonelLupu commented 3 years ago

I got it, but the range picker must have two valid dates; two single date picker could meet your needs.

@wenqi73 @hsuanxyz I am thinking about the case where you want to search for something that was created on before the X date. In the current setup you have to select a very very low start date (something like 1900) in order to see everything that was created before 2000 for example. Maybe the range picker can return something like: [Date | undefined, Date | undefined] and I can use that to search for:

  1. ['2021-01-01', '2021-02-01'] -> search records between startDate and endDate
  2. ['2021-01-01', undefined] -> search records where date is greater than startDate
  3. [undefined, '2021-02-01'] -> search records where date is lower than endDate

If you want, I can create a PR for this 😄