Skip to main content

Posts

Showing posts from March, 2012

Selecting date range with YUI3 Calendar

This is a fully UI related article about YUI3 Calendar widget. Whereas official documentation page and provided examples (here and here) are good enough to start with, there are still many pitfalls when you're going to customize the widget. My use case required a date range selection feature with a nice calendar window open only when a user clicks on text input fields. Also the selected day should be highlighted in the calendar whenever a user clicks again on the filled text input field (a nice example with YUI2 Calendar widget). This is how one date input field looks like:
Add calendar container and date fields on the web page
First of all you need to add a container div for the calendar: <div id="calendar-container"> </div> You will provide this id to the Calendar constructor later either as a bounding box or a content box. The difference is in html markup generated by YUI3. I'll use a bounding box below in order to manipulate position of calendar wind…