In an earlier article I explained how to add a YUI Calendar widget to a single text field on a Web form and provided sample code for this.
The purpose of this article is to expand on my earlier article and show how a YUI calendar widget can be used to add date-picking functionality to multiple text fields. Below I also provide the code for a working example, as shown in the image to the left.
For this example we have an HTML form with three text fields. The desired functionality is for a YUI Calendar widget to appear whenever one of the text fields is clicked. This calendar should show today’s date if the text field is blank, or it should show the date contained in the text field if a date existed. Once the user has finished browsing through the dates in the Calendar widget and has clicked on a date, the correct text field needs to be populated with the selected date and the Calendar widget should fade away. Alternately if the user clicks somewhere on the form surrounding the previously selected text field, then the Calendar widget must disappear.