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