Div Inplace edit demo

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.6.0/build/cssreset/reset-min.css">
    </head>
    <body class='yui3-skin-sam'>
        <hr/>
        <input class='yui3-datepicker-field'/>
    </body>
</html>

CSS

.yui3-calendar {
    position: absolute;
    z-index: 3;
}

JavaScript

/*global YUI*/

YUI.add('node-datepicker',
  function (Y) {
    "use strict";
    var NodeDatePicker, MyCal,
      getClassName = Y.ClassNameManager.getClassName,
      CSS_DATE_FIELD = getClassName('datepicker-field'),
      DATE_FIELD_SELECTOR = '.' + CSS_DATE_FIELD;

    Y.Node.DOM_EVENTS.key.eventDef.KEY_MAP.arrowdown = 40;

    Y.Base.mix(Y.Calendar, [Y.WidgetPosition, Y.WidgetPositionAlign, Y.WidgetAutohide]);

    NodeDatePicker = function () {
      NodeDatePicker.superclass.constructor.apply(this, arguments);
    };

    NodeDatePicker.NAME = "nodeDatePicker";
    NodeDatePicker.NS = "datePicker";
    NodeDatePicker.apply = function (containerNode) {
      (containerNode || Y).all(DATE_FIELD_SELECTOR).each(function (node) {
        node.plug(NodeDatePicker);
      });
    };

    Y.extend(NodeDatePicker, Y.Plugin.Base, {
      initializer: function (config) {
        var host = this.get('host'),
          self = this,
          showFn = Y.bind(this.show, this);

        if (!host) {
          return;
        }

        host.on('valuechange', showFn);
        host.on('key', showFn, 'arrowdown');
      },
      destructor: function () {
      },
      show: function () {
        if (!this.calendar) {
          var node = Y.Node.create('<div/>');
          this.calendar = new Y.Calendar({
            boundingBox: node,
            align: {node: this.get('host'), points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]},
            hideOn: [
              {eventName: 'clickoutside'}
            ]
          }).render();
        }
        this.calendar.show();
      }
    });

    Y.namespace('Plugin');

    Y.Plugin.NodeDatePicker = NodeDatePicker;
  }, '0.1', {requires: ["node", "classnamemanager", "plugin", 'event-valuechange', 'event-key', 'calendar',
    'widget-position', 'widget-position-align', 'widget-autohide']});

YUI().use('node', 'node-datepicker', function (Y) {
    Y.Plugin.NodeDatePicker.apply();
});