Datepicker is a one of the key widgets available in jQuery UI. For a demo, check the link: http://jQueryui.com/demos/datepicker

When you click on the textbox which is datepicker() enabled, it should open up a calendar. When the user selects a date, the calendar should go away. I have noticed that the widget has a few usability issues.

In IE 8+, when you click on the textbox and select a date from the calendar, the calendar does not go away. This is somewhat irritating. The workaround to this is that the user clicks on the page (other than the textbox).

In Chrome, the usability issue is slightly subtle. On selecting the date from the calendar, the calendar does disappear. But, what if the user wants to change the selection? When the user clicks the textbox again, the calendar does not popup.

My suggestion to developers is to show the button beside the textbox. This is available in the datepicker using the options provided. The default text in the button is "...". This can be changed. Also, for the UI designer, there is a neat option to embed an image within the button. The code to enable the button is shown below:


$('input[name$=txtDate]').datepicker({
    showOn: 'button',
    showButtonPanel: false,
    buttonText: 'Show'
});