CODEWITHSUNDEEP
javascriptjqueryjquery-eventsusability
user1016265
user1016265

Reputation: 2397

Calendar widget (JavaScript) and usability issue

I want to use Calendar widget to help users select date.

I wish use any standalone calendar or as a jQuery plugin. In my project I'm using jQuery, and I don't want to use any other frameworks.

I saw a lot of calendars, but they all has the same problem. I will describe it now, see below:

There are possible two way to show up calendar:

  1. to click on some button, icon etc to show it up.
  2. to click on text field (where we will see result of date selection) to show it up

I chose the second way. In my case I will have only ONE text field without any addition icons, buttons etc. When this text field get focus the calendar will be show up. When user selected any date, calendar will be hidden, and text field will show selected date.

And here I have main problem...

After appearing the calendar the text field is loosing focus. And after selection date, focus did not got back to this field, and tab key (on keyboard) beginning run from start.

From usability point it would be good if when user finish selection date from calendar, and selected date shows up in text field, he can keep using tab key to go to next text field.

Any ideas how to solve it ?

P.S. I have only one idea, but I don't like it, because it looks me little bit ugly

When calendar is shows up, I could destroy event handler (focus event) on text field. When user selected date and calendar is disappearing, I can set focus on this text field and attach event listener (focus) for this text field again.

Upvotes: 1

Views: 554

Answers (2)

zzzzBov
zzzzBov

Reputation: 179216

jQuery-UI's datepicker doesn't send focus to the popup calendar widget, instead the user is expected to use alternative control to change the date, additionally this would allow the user to manually type the date in should they so choose.

Upvotes: 1

Tom van der Woerdt
Tom van der Woerdt

Reputation: 29985

Since JavaScript is a singlethreaded language, you can simply set a variable (disableEvents or something) to true and set it back to false when you've called .focus() - this won't cause any troubles and doesn't require much work.

Upvotes: 2

Related Questions