RadzenDatePicker: calendar popup click target needs to be bigger, or perhaps show calendar always when focused #229

Closed
opened 2026-01-29 17:33:50 +00:00 by claunia · 4 comments
Owner

Originally created by @szalapski on GitHub (Oct 13, 2021).

Is your feature request related to a problem? Please describe.
The date picker (calendar) popup is the primary way users have to choose a date, yet opening it has a very small click target. Clicks (or taps) in the margin or padding near it, or in the empty space between the displayed date and the calendar button, results in nothing happening when the user is trying to open the calendar date picker. Additionally, the positioning/layout DOM structure for this button seems quite complicated and it isn't easy to override styles to have the desired effect.

Describe the solution you'd like
Clicking in the padding around the button or in the empty space in the middle should open the date picker calendar popup. Only clicking directly on the date text would select it without opening.

Another approach might be to provide a parameter, something like bool ShowCalendarWhenFocused, to enable a click anywhere in the entire collapsed control to open the date picker (calendar) popup. This is simpler and perhaps what I would prefer.

Describe alternatives you've considered
I tried customizing the CSS, but was stymied the layout complexity. I ended up doing this, which is inadequate but at least makes the click target just a little bigger on its left. I do not suggest you use this CSS, I am just including it for reference what a feeble approach might be.

    .rz-datepicker-trigger {
        right: 1.625rem; // overrides default .625rem by an extra 1rem to make room for padding-left
        padding-left: 1rem; // for larger click target
    }
Originally created by @szalapski on GitHub (Oct 13, 2021). **Is your feature request related to a problem? Please describe.** The date picker (calendar) popup is the primary way users have to choose a date, yet opening it has a very small click target. Clicks (or taps) in the margin or padding near it, or in the empty space between the displayed date and the calendar button, results in nothing happening when the user is trying to open the calendar date picker. Additionally, the positioning/layout DOM structure for this button seems quite complicated and it isn't easy to override styles to have the desired effect. **Describe the solution you'd like** Clicking in the padding around the button or in the empty space in the middle should open the date picker calendar popup. Only clicking directly on the date text would select it without opening. Another approach might be to provide a parameter, something like `bool ShowCalendarWhenFocused`, to enable a click anywhere in the entire collapsed control to open the date picker (calendar) popup. **This is simpler and perhaps what I would prefer.** **Describe alternatives you've considered** I tried customizing the CSS, but was stymied the layout complexity. I ended up doing this, which is inadequate but at least makes the click target just a little bigger on its left. I do not suggest you use this CSS, I am just including it for reference what a feeble approach might be. ```css .rz-datepicker-trigger { right: 1.625rem; // overrides default .625rem by an extra 1rem to make room for padding-left padding-left: 1rem; // for larger click target } ```
Author
Owner

@brcaswell commented on GitHub (Oct 14, 2021):

I'm going to relate this to #253

  • 'Customizing the visual appearance' and
  • 'premium theming'

...are aspects of Professional subscription and services.

As such, I think contributors should be mindful to that -- and I don't think it would be appropriate to alter visual elements (including state) of these component in this repository without the feature request originating from a client of Razden (I have no way of telling whether or not that is the case in any feature request or issue though).

@brcaswell commented on GitHub (Oct 14, 2021): I'm going to relate this to #253 - 'Customizing the visual appearance' and - 'premium theming' ...are aspects of Professional subscription and services. As such, I think contributors should be mindful to that -- and I don't think it would be appropriate to alter visual elements (including state) of these component in this repository without the feature request originating from a client of Razden (I have no way of telling whether or not that is the case in any feature request or issue though).
Author
Owner

@akorchev commented on GitHub (Oct 14, 2021):

We have compared the click target size with other datepickers and the Browser built-in <input type="date"> and don't see any staggering differences in size. We will consider opening the popup when the user clicks anywhere in the input (similar to how the DropDown behaves). We would also accept a pull request implementing that.

@akorchev commented on GitHub (Oct 14, 2021): We have compared the click target size with other datepickers and the Browser built-in `<input type="date">` and don't see any staggering differences in size. We will consider opening the popup when the user clicks anywhere in the input (similar to how the DropDown behaves). We would also accept a pull request implementing that.
Author
Owner

@szalapski commented on GitHub (Oct 20, 2021):

We will consider opening the popup when the user clicks anywhere in the input (similar to how the DropDown behaves).

Great, I like that solution a lot.

We would also accept a pull request implementing that.

Cool, I'll see what I can do if I have time. Is it okay that this would be the new behavior in all cases? Or should it be the default with a new parameter? Or should it be based on a parameter without that as the default? My vote is the former--no reason to make it complicated.

@szalapski commented on GitHub (Oct 20, 2021): > We will consider opening the popup when the user clicks anywhere in the input (similar to how the DropDown behaves). Great, I like that solution a lot. >We would also accept a pull request implementing that. Cool, I'll see what I can do if I have time. Is it okay that this would be the new behavior in all cases? Or should it be the default with a new parameter? Or should it be based on a parameter without that as the default? My vote is the former--no reason to make it complicated.
Author
Owner

@enchev commented on GitHub (Jul 24, 2024):

Open the popup on input click is already supported.

@enchev commented on GitHub (Jul 24, 2024): Open the popup on input click is already supported.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#229