YUI Popup Calendar

The YUI Popup Calendar component extends YUI’s Calendar Widget as well as a few other Widget modules you likely have already loaded on the page giving you a very lightweight (1.6KB minified) way to add date picker like functionality to your web page or application.

You can find the code via Github here: YUI Gallery fork

How to use

Almost all of the configuration properties for Y.PopupCalendar are for Y.Calendar and the other modules that it extends.

HTML

<form class="yui3-skin-sam">
	<input name="name" type="text" autocomplete="off"/>
	<input name="date" type="text" autocomplete="off"/>
	<input name="phone" type="text" autocomplete="off"/>
</form>

CSS

In order to style this calendar like the YUI default calendar you need to add the class .yui3-skin-sam to a parent container of the calendar.

To have the calendar positioned overtop of other contents on your page and to hide when you click away the following two classes need to be added to your css

.yui3-popup-calendar {
  position: absolute;
}

.yui3-popup-calendar-hidden {
  display: none;
}

Javascript

YUI().use('popup-calendar', function(Y) {

  var input =  Y.one('form input[name=date]'),
      popupcalendar = new Y.PopupCalendar({
    // Popup Calendar config properties
    // input: the text input that will trigger
    // the calendar to show
    input: input,

    // focus the calendar on input focus for
    // keyboard control (default is false)
    autoFocusOnFieldFocus: false,

    // depending on the browser you may  
    // need to have all tabindex's defined on
    // inputs, you can use this attribute to do
    // it so you don't have to (default is false);
    // doesn't specify the tabindex then this is required
    autoTabIndexFormElements: false,

    // Calendar config properties
    width:'400px',
    showPrevMonth: true,
    showNextMonth: true,
    date: new Date(),

    // Widget Position Align configuration properties
    // This is now optional and defaults to the following
    align: {
      node: input,
        points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.TR]
    }
  });

  // The popup calendar makes no assumptions as to
  // what you want to do with the selected date
  // so it is up to you to do something with the emitted event.
  popupcalendar.on('dateSelected', function(e) {
    var d = e.newSelection[0];
    popupcalendar.get('input').set('value', d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear());
  });

});

Repositioning the calendar on resize

If the user resizes the browser once the calendar is open they run the risk of covering it up. To remedy this, you simply need to interact with widget-position-align on resize

Y.on('resize', function(e) {

  // Use the resize event object `e` and the position of the
  // bounding box popupcalendar.get('boundingBox'); to
  // check if the calendar is outside of the viewport
  // use that calculation to determine the points to set the
  // new alignment points to

  // Change the points that the calendar aligns with
  popupcalendar.align: {
    node: input,
    points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BR]
  }
});

Known Bugs

Opera in Ubuntu (possibly other os’s as well) has an odd keyboard navigation highlighting alignment issue with the Calendar. The calendar is still functional albeit a little odd to navigate via keyboard.

Hitting enter when navigating the calendar by keyboard does not select a date in IE7 & IE8