YUI Calendar Picker

calendar.html

<style>
.yui3-overlay-hidden {
  visibility: hidden;
}
</style>

<input type="text" id="input-date" />

<div id="calendar-overlay">
  <div class="yui3-widget-bd" id="calendar"></div> 
</div>

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<script>
  YUI().use('overlay', 'widget-autohide', 'calendar', 'datatype-date', function(Y) {
    Y.Base.mix(Y.Overlay, [Y.WidgetAutohide]);

    var Align = Y.WidgetPositionAlign;
    var dtdate = Y.DataType.Date;
    var description = Y.one('#input-date');

    var overlay = new Y.Overlay({
      srcNode: '#calendar-overlay',
      visible: false,
      hideOn: [ 
        { eventName: 'key', keyCode: 'esc', node: Y.one('document') },
        { eventName: 'clickoutside' }
      ]
    }).render();

    overlay.set('align', {
      node: description,
      points: [Align.TL, Align.BL]
    });

    var calendar = new Y.Calendar({
      contentBox: '#calendar',
      width: '240px',
      showPrevMonth: true,
      showNextMonth: true
    }).render();

    var initialSelectedDate = function() {
      var value = description.get('value');
      // guarantees proper date parsing, since with dash it will
      // consider the timezone machine
      value = value.replace('-', ',');
      return dtdate.parse(value);
    };

    calendar.selectDates(initialSelectedDate());

    description.on('click', function(e) {
      overlay.show();
    });

    calendar.on('selectionChange', function(e) {
      var newDate = e.newSelection[0];
      description.set('value', dtdate.format(newDate));
      overlay.hide();
    });
  });
</script>