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 months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

			var d = dates[0][0],
				date = new Date(d[0] + ',' + d[1] + ',' + d[2]),
				dateStr = date.getDate() + ' ' + months[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");

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

		//store all date input form fields in a NodeList
		Y.all('.date_input').each(function (node) {

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

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

			});
		});
	};



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