YUI2in3 Calendar Plugin

gistfile1.js

/*
*		@class AMS.Calendar
*		@extends Widget
*		@version 1.0.0
*
*/

YUI.add("ams-calendar", function(Y) {
    Y.log('ams-calendar is loaded', 'info');

    var YAHOO = Y.YUI2;


    var Clazz = Y.namespace("AMS").Calendar = Y.Base.create("ams-calendar", Y.Plugin.Base, [], {


        _cal: null,


        initializer: function (config) {
            Y.log(Clazz.NAME + "::initializer");

            this._cal = new YAHOO.widget.Calendar('myCalendar', this.get('calNode').get('id'));
            this.renderUI();
            this.bindUI();
        },




        destructor: function () {
            Y.log(Clazz.NAME + "::destructor");

            this.destroy()


        },


        /**
		* Renders, then immediately hides the calendar widget
		*
		* @method renderUI
		* @public
		* @since 1.0.0
		*/

        renderUI : function() {
            Y.log(Clazz.NAME + "::renderUI");

            this._cal.render();
            this._cal.hide();

        },


        /**
		* Listens for click on specified DOM element to fire the show calendar event
		* Listens for day clicks to fire the select date event.
		*
		* @method bindUI
		* @public
		* @since 1.0.0
		*/

        bindUI : function() {
            Y.log(Clazz.NAME + "::bindUI")


            Y.on("click", function(e) {
                this._showCalendar(e, this._cal);
            }, '#' + this.get('dateField').get('id'), this);

            Y.on("keydown", function(e) {
                this._showCalendar(e, this._cal);
            }, '#' + this.get('dateField').get('id'), this);

            this._cal.selectEvent.subscribe(Y.bind(this._onSelectDate, this));
        },


        /**
		* Shows the calendar widget when the specified DOM element is clicked
		*
		* @method _showCalendar
		* @protected
		* @since 1.0.0
		*/


        _showCalendar : function(e, cal) {
            Y.log("_showCalendar function " + cal);

            Y.log(e);
            Y.log(this);

            e.preventDefault();

            this._cal.show();
        },


        /**
		* Displays formatted date selection in the specified DOM node
		* then hides calendar widget
		*
		* @method _onSelectDate
		* @protected
		* @since 1.0.0
		*/

        _onSelectDate : function(e, dates) {
            Y.log("_selectDate function " + this._cal);

            var month=new Array(12);
            month[0]="Jan";
            month[1]="Feb";
            month[2]="Mar";
            month[3]="Apr";
            month[4]="May";
            month[5]="Jun";
            month[6]="Jul";
            month[7]="Aug";
            month[8]="Sep";
            month[9]="Oct";
            month[10]="Nov";
            month[11]="Dec";

            var d = dates[0][0],
            date = new Date(d[0] + ',' + d[1] + ',' + d[2]),
            dateStr = date.getDate() + ' ' + month[date.getMonth()] +  ' ' + date.getFullYear();

            this.get('dateField').set('value', dateStr);

            this._cal.hide();


        }


    },

    {
        NS: 'calendar',
        ATTRS: {


            //Form field in which to display selected date (expects YUI3 node instance)
            dateField: {

                value: null
            },

            //Node in which to display calendar widget (expects YUI3 node instance)
            calNode:  {

                value: null
            }
        }
    });


    Y.AMS.Calendar.plugAllCalendars = function () {
        Y.log("::plugCalendar", "info");

        //store all date input form fields in a NodeList
        var dates = Y.all('.date_input');

        //if date input form fields have been stored
        if(!dates.isEmpty()) {
            Y.log("::Date input form field(s) present", "info");

            //Walk through each one
            dates.each(function(node) {

                //store the current date input form field as a YUI3 Node
                var date = node;

                var calNode = Y.one('#calendar');



                //plug in the calendar widget
                date.plug(Y.AMS.Calendar, {

                    //pass in the date field node
                    dateField: date,
                    //pass in the div in which to render the calendar widget
                    calNode: calNode

                });
            });

        }
    };



},
"1.0",
{
    requires: [
    "plugin", "yui2-calendar", "base-build", "node"
    ]
});