search

appsmithorg / appsmith

Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
https://www.appsmith.com
Apache License 2.0
33.95k stars 3.66k forks source link

[Feature]: Disable Typing in DatePicker Widget #32683

Open williamdavis86 opened 5 months ago

williamdavis86 commented 5 months ago

Is there an existing issue for this?

Summary

Hello,

I was told to file a feature request after inquiring with Appsmith about this. I would like to have the ability to disable typing into a Date Picker widget. The reason I want to do this is because I want to have a query run on date selection and I also want to force MM-DD-YYYY format. The problem with the current widget is that if a user starts typing 12- it will automatically run the on date selected query. If I could disable typing, then this would not be an issue.

Why should this be worked on?

As I said before, the current date picker widget is not efficient for this basic use case for date inputs. I am sure there are others out there that need a specific date format and want to run a query on date selected and can not do so correctly due to this typing issue. It would also be sufficient if typing was still always enabled but a date was not selected until the full date format is filled in. i.e. if I set the widget to MM-DD-YYYY, then the widget would not select a date until that entire format is entered. Either option would solve this.

Nikhil-Nandagopal commented 5 months ago

@williamdavis86 thanks for opening this issue. I think a better solution would be to simply not run the onDateSelected until the user has entered a valid date or hits enter. What do you think?

saiprabhu-dandanayak commented 3 months ago

Hi @Nikhil-Nandagopal , i am picking up this feature , and my approach is to Disable typing in Datepicker and the onDateselect Event should triggered only when date is selected from calender popup

Nikhil-Nandagopal commented 3 months ago

@saiprabhu-dandanayak that's not a viable solution because users find that using the text to enter the date is useful. So the solution I proposed is a bit more holistic

saiprabhu-dandanayak commented 3 months ago

Hi @Nikhil-Nandagopal,

Thank you for your feedback and Based on your input

  1. we will allow users to types a date (e.g., "01012024"), it will automatically converted to the selected date format.
  2. The onDateSelected event will be triggered either when a date is selected from the calendar popup or when the typed date is fully converted to the selected format.

Please let me know your thoughts or any additional suggestions.

Nikhil-Nandagopal commented 2 months ago

@saiprabhu-dandanayak have a look at the antdesign date component behavior and let's follow that https://codepen.io/pen?editors=0011

The user has to hit enter to select a date and only then the onDateSelected is triggered. If the user hits enter when the date is invalid, no date is selected and the datepicker does not close.

saiprabhu-dandanayak commented 2 months ago

Hi @Nikhil-Nandagopal , i am unable to open the link you mentioned , could you pls check this once .

Nikhil-Nandagopal commented 2 months ago

@saiprabhu-dandanayak Here's the main ant design doc https://ant.design/components/date-picker you can click on the code pen to see how it works

akshayvijayjain commented 2 months ago

hii @Nikhil-Nandagopal ,

current feature implementation is not exactly as per the ant design

  1. when user hits enter in appsmith the date picker popup will close and a close match or today will be selected in the date, does not matter date is valid or not while in ant design, the popup does not close with wrong input.

so if we have to follow the current ant design, we will loose above feature that just typing 2105 will select 21st may of current year. this might have been intentionally done by developer.

Although you already mentioned it, we thought it better to confirm once again. @saiprabhu-dandanayak will create a pr with the approach you mentioned and add a video, how we are changing from previous feature.

Looking at the issue raised by user, that he is not able to enforce the date format and thus run the query only when valid format of input is detected.

one solution to this exact issue mentioned can be to add one more switch, "enforce format", which will close the popup only if valid format is detected. otherwise current feature runs, as is if the switch is off.

Nikhil-Nandagopal commented 2 months ago

@akshayvijayjain I'd prefer we simply stuck to the experience of Ant design. We can assume that if a user is typing, then they must type a valid date