Skip to content

Issue with Custom Date Picker Using a-range-picker in Ant DesignΒ #7924

@diyorbekjoraqulov8

Description

@diyorbekjoraqulov8
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.3

Environment

Windows 10, Chrome 130.0.6723.117, Vue ^3.5.12

Reproduction link

Edit on CodeSandbox

Steps to reproduce

My goal is to create a custom date picker similar to the one used in the "Due Date" section of ClickUp, where the user can select only one date or both, with more flexibility and customization options.

What is expected?

I am currently working on a project where I am trying to create a custom date picker using the a-range-picker component. However, I am facing several limitations that are preventing me from achieving the desired functionality.

Mandatory Start and End Dates: When using a-range-picker, it seems that both the start date and end date must be selected. There is no option to select only one of them. If I try to select only one date, it simply clears the selection, which is problematic.

Lack of Custom Header: Additionally, I have found that it is not possible to add a custom header to the a-range-picker. This is crucial for the functionality I need, as I would like to provide a more customized UI for the date picker.

My goal is to create a custom date picker similar to the one used in the "Due Date" section of ClickUp, where the user can select only one date or both, with more flexibility and customization options.

What is actually happening?

Unfortunately, it seems that a-range-picker does not provide the necessary features to achieve this. I would appreciate it if you could consider these limitations and possibly provide a solution or guidance on how I might work around them.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions