So I was trying to add date picker to select my StartDate and EndDate. I have no problem when using the usual datepicker.

What I'm aiming for is something like this:

enter image description here

By clicking on the text input, it displays two calendars, each one for StartDate and EndDate respectively.

However, I have no clue or idea on getting this done.

enter image description here

Can I just click on the StartDate input and these two calendars would show up and I can click on a date from each of them and then the date is displayed in two different input: StartDate and EndDate respectively?

Any idea on how to get this done? We could share what we know. ^^, Pardon my terrible English. I hope I made myself clear enough. Thank you very much. :)

  • This seems more of a technical question rather the User experience related – Varedis Aug 10 '15 at 8:36
  • 2
    This is clearly about implementation but on the UX side, showing calendar for start and end date when user clicks on either start or end date input is confusing. – locationunknown Aug 10 '15 at 8:41
  • @Varedis I thought somebody who is expert in this probably has an idea on what he/she would've done when facing my situation. Umm.. Sorry tho. How should I fix this post then? Anyway, thanks for the reply :) – Nurul Shh Aug 10 '15 at 8:55
  • @locationunknown thank you for the feedback. That's what I thought too.. Hmm.. – Nurul Shh Aug 10 '15 at 8:56

I would keep them separate.

If you try to club them you invite more issues without getting much benefit of functionality. If two calendars are opened,

  • How the date range is selected?
  • What if users select start greater than end?
  • What if the start and end have much time difference, how many months you plan to show?
  • Do you plan to use color coding to indicate the distinction between start and end?
  • If user clicks on end first, does she chose the end date first?

All these questions create problems with user's mental model as she has never seen such an implementation.

If you want to go ahead and want a range select, at least remove the text inputs and have an option to select range. This initiates the user that it is somewhat different from standard date pickers. Although, in doing so, you may forfeit the functionality of manually quickly keying the values, which would be requested by power/frequent users.

| improve this answer | |
  • hello @merqri and thank you for the reply! from your opinion, it is clear that I should use separate input for date range. As a beginner in programming, I thought something like this would be possible to achieve. Thank you very much and have a good day! :) – Nurul Shh Aug 11 '15 at 1:36

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