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.
In this article I will show a simple functioning example of using Yahoo!’s YUI API to bind a Calendar control with a single HTML text field as in the image to the left. I provide example code for this below.
For this example I have created a simple HTML page containing one text field. The intent is to display a YUI calendar control below the text field when the text field is clicked.
The first step in this process is to import the correct YUI libraries. To do this, simply select the Calendar control filter in Yahoo!’s Dependency Configurator tool, and the CSS style and .JS include reference will be generated for you.
In my case the generator created the following reference lines:
It’s as simple as that! Once this is complete you can set a styling for your page within the HTML Body tag, which I did using the following: class=”yui-skin-sam”
In this code, the init_calendar function is called when the Page DOM is ready for rendering.
Then add the init_calendar function and instantiate the Yahoo! Calendar widget and also remember to hook up the Yahoo! widget event listeners for the ‘focus’ and ‘blur’ events.
Finally within the init_calendar function make sure to register the selectEvent.subscribe method to tell your Calendar what to do once a date has been clicked on the Calendar. In this example the selectEvent.subscribe method is hard-coded to set the selected date to the correct text field element. However this can be dynamically handled if there is more than one Date-related text element on the page.
Example Code – How to Bind a YUI Calendar Control to an HTML Text Field
I’ve been looking into the Yahoo Query Language (YQL) specification available on the Yahoo Developer Network (YDN). The scope of the functionality exposed is quite impressive and I would certainly suggest checking this out to anyone serious about Web-based programming.
What is YQL?
Yahoo has allied itself with a number of websites and online services, and provides a uniform API to these using YQL. YQL is is a well-documented fourth generation programming language (4GL) with typed syntax that is very close to traditional SQL.
Through the YQL API Yahoo exposes a standardized way to query and manipulate data from various authenticated Web services including Netflix and Twitter. The method of exposing this information is through what they call Open Data Tables. These Open Data Tables are XML files that describe how YQL can be mapped to a Web Service provided by a third party system (such as Twitter for example).
YQL and Open Data Tables point to Yahoo’s cloud storage infrastructure called ‘Sherpa’, and Yahoo implements security features for YQL using OAuth 1.0 and Access-Control-Allow-Origins.