1

I'm designing a web management software that requires users to indicate their work days. These users do not have regular work days and hence we decided to allow them to just pick their work days from a calendar.

They typically select about 20 days out of the whole month (no regular pattern).

How can we show their selections on the text field without having to open the calendar again?

I'm currently thinking either showing:

  1. The count of dates selected
  2. All the dates selected but truncated based on width of field + tooltip to show all dates selected. However I imagine the tooltip can get quite long...

Anyone has any ideas? :/

enter image description here

Improve this question
3
  • 1
    Why is there a need to show in text field, when the open calendar is enough visual cue? Is it for a case, when this calendar is closed and you need to show user some reference?
    – Amit Jain
    Commented Mar 19, 2021 at 6:10
  • 1
    If that was the case, I would just show, 15 dates selected, as the text and expect user to click the cal icon to see the detailed selected values or edit them.
    – Amit Jain
    Commented Mar 19, 2021 at 6:11
  • 1
    What size display is your target audience using? Also, are you supporting persons with visual limitations?
    – Amazon Dies In Darkness
    Commented Mar 19, 2021 at 7:22

1 Answer 1

Reset to default
2

I often find myself just displaying the entire calendar since it's easier UX in my opinion for the user instead of having to click to open it.

An example of this is this UI where I had to allow the user to select a range to search for jobs within. At first this was done with two datepickers but since then I re-designed it to just be a calendar view where you could pick any two dates you want (this was done in pure javascript, no library):

Example of calendar view being open

Since then I just don't even bother hiding the calendar if I can get away with it. Another example was this UI where the client needed to pick a date to load all sales for said day. I opted again to just show the calendar directly to save him a click every time he wanted to explore new date (this was done in Angular):

POS system with date calendar always in full view

Improve this answer

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.