0

I'm working on a date input field that should restrict the user from writing a date that comes after a certain date - to exemplify it: the user should not choose a date after 15.03.2020. This date would be the placeholder date that is in the input field, and the user can choose a date before 15.03.2020, but not after

There are two ways to choose a date - either to input it on the keyboard, or to pick it from a date-picker.

  1. If the user chooses the date picker, date-picker restricts choosing a date after 05.05.2023, by disabling these in the date-picker control, indicating that the option to pick those exact dates does not exist. date-picker with restricted date range

  2. But if the user wants to use the keyboard, should a validation error be shown and let user change the date herself, or do we revert to the last eligible date? In that case user tries to input 16/03/2021, but is warned and automatically date reverts to the 15/03/2021 when the user switches focus to another field. input with validation error

To sum it up, I am struggling with this "automatically reverting" to the last (or first) eligible date - would the users notice it, would it be difficult to understand why they cannot input a date they wanted in the first place. Or would they find it troublesome to have to correct the date themselves back.

1
  • You should display warning in either case to avoid confusion -- when you autorevert or when you let them go above. Too often, there's no explanation of why an input is limited and I have to figure it out myself as a user. But I prefer the warning over autorevert anyway. I would rather go to a little more trouble with a clear idea of what to do than feel like I have no control, especially when you consider your setup of already starting on the last allowed day: if I try to press the up arrow on my keyboard to spin through dates, nothing happens, and I assume your input is broken at first. Dec 25, 2021 at 14:15

2 Answers 2

1

Be clear about the application rules. Try to prevent the error in the first place.

You have a few ways to be clearer, so whichever interaction they choose, they understand what's acceptable:

  • Labels
  • Visible helper text (this can state the last date that can be selected)
  • A tooltip if further explanation is needed.

Correction and a warning, instead of an error: One approach (please test this!) is to autorevert like you've discuss, but place a clear explanation as to to why the app did this on their behalf.

Why a warning?

I may be splitting hairs, but I use a warning rather than an error because I'm trying to convey that the user really didn't do anything bad, but it's just not feasible for the business logic. The 'got it' button dismisses the warning and keeps the autoreverted date (unless they change it to an acceptible date).

enter image description here

Since I don't know your domain and the userbase, I would test to see if this is effective in both preventing errors, and clear about why the app autoreverts.

2
  • Great points @MikeM. I think it's not splitting hair when you say warning and not an error. I'm just not sure our design system will allow for this distinction :), but I guess we'll just have to iterate on it. But how would you reason about not reverting it at all? Warn the user that the date is "past the deadline" and then let the user change the date to their own liking. I'm wondering if autocorrecting actually is taking away control from the user..
    – padawanka
    Nov 25, 2021 at 8:41
  • 1
    @padawanka I've seen effective auto correction used before, but a more conservative approach would be to start by keeping some visible help text to begin with, so it's explicit about the last possible date. Then, instead of autocorrect, pop the warning text once they enter an invalid date. That might get you most of the way. (think of autocorrect as a nice to have, but the labels and help text as primary: I also don't know your domain and userbase and now they might perceive it).
    – Mike M
    Nov 25, 2021 at 15:34
0

Maybe some of the next thoughts can help you:

  1. Placing clearly visible sentance "Date selected needs to be before 15.03.2020" is likely very important
  2. Disabling and hidding any dates after, also option to toggle next months could help
  3. Depending on your real use cases (i.e. can user select more than one year behind) it could be better not to do reset. As if possible, user might just selected wrong year and wants to keep date and month

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.