// description of your code here

<script type="text/javascript" src="<c:url value="/yui/yahoo-dom-event/yahoo-dom-event.js"/>"></script>
<script type="text/javascript" src="<c:url value="/yui/utilities/utilities.js"/>"></script>
<script type="text/javascript" src="<c:url value="/yui/dom/dom.js"/>"></script>
<script language="javascript">
<!--
var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom, Connect = YAHOO.util.Connect;
function loadGoodsNameList(goodsType){
	if(goodsType==0||goodsType==1602){
		return;
	}
	var uri = "<c:url value="/lgt/util.do?m=listGoodsName&goodsType="/>"+goodsType+ "&timestamp=" + new Date().getTime(); 
	Connect.asyncRequest("GET",uri,{
		success:function(o){
			Dom.get('goodsName').parentNode.innerHTML = "<select name='modelId' id='goodsName' style='width: 200px;'>"+o.responseText+"</select>";
		},
		failure : function(o) {
			alert(o.status);
			alert(o.statusText);
			alert(o.responseText);
		},
		argument : null});
}
//-->
</script>

As of YUI 2.5.1 the DataSource utility (which feeds the DataTable widget) only accepts either native Javascript Date objects or a string formatted to the North American locale (mm/dd/yyyyy) when using parser: "date" in your schema.

This can cause problems outside the USA, particularly if you are using ISO date formats say from MySQL DateTime columns. So let's fix this and include a Calendar widget for editing.

First, we depend on Datejs so ensure you've already got this loaded into the application. Next you need a couple of custom callback methods

/**
 * Accepts a date string in any format that datejs.com's library can recognise.
 * Returns a Date object if successful, false otherwise
 */
parseSQLDate = function(data)
{
       var date = null;
       try {date = Date.parse(data);return date;}
       catch(e) {return false;}
};
/**
 * This is a formatting callback for YUI DataTable to present date in ISO format
 * instead of American mm/dd/yyyy
 */
formatDateInDataTable = function(elCell, oRecord, oColumn, oData)
{
       var oDate = oData;
       elCell.innerHTML = oDate.toString('yyyy-MM-dd');
};

Now to activate modify your schema thus:

dataSource.responseSchema = {
       resultsList: "items",
       fields: [{key: "created_on", parser: parseSQLDate}]
};

And in your columnDefs:

dataSource.columnDefs = [
       {key: "created_on", label: "Created", editor: "date", formatter: formatDateInDataTable}
];

Lastly we set up an editor for cells:

dataTable.subscribe("cellClickEvent", dataTable.onEventShowCellEditor);

WARNING: THIS CODE DOES NOT WORK WITH SOME EDGE CASES. Sometimes, particularly with overlapping end of months, this code will show an arrow even when all dates on the previous / next pane are out of bounds.

This solution does not require modifying the yui source and works on YUI version 2.5.0. It will disable the next and previous arrows based on the out of bounds dates you specify with mindate and maxdate when you configure the calendar. Requires YUI dom.

1) attach an onRender event when you configure the calendar and before you call render

oCal.renderEvent.subscribe(hideOOBArrows, oCal);

2) add the following function:

function hideOOBArrows(type, args, oCal) {
	var lastDateOnThisPane = oCal.toDate(oCal.cellDates[oCal.cellDates.length-1]);
	var firstDateOnNextPane = new Date(lastDateOnThisPane);
	firstDateOnNextPane.setDate(lastDateOnThisPane.getDate()+(oCal.isDateOOM(lastDateOnThisPane) ? -6 : 1));

	if (oCal.isDateOOB(firstDateOnNextPane)) {
		var rightArrow = YAHOO.util.Dom.getElementsByClassName(oCal.Style.CSS_NAV_RIGHT, "a", oCal.oDomContainer)[0];
		YAHOO.util.Dom.setStyle(rightArrow, "display", "none");
	}

	var firstDateOnThisPane = oCal.toDate(oCal.cellDates[0]);
	var lastDateOnPreviousPane = new Date(firstDateOnThisPane);
	lastDateOnPreviousPane.setDate(firstDateOnThisPane.getDate() + (oCal.isDateOOM(firstDateOnThisPane) ? 6 : -1));
	if (oCal.isDateOOB(lastDateOnPreviousPane)) {
		var leftArrow = YAHOO.util.Dom.getElementsByClassName(oCal.Style.CSS_NAV_LEFT, "a", oCal.oDomContainer)[0];
		YAHOO.util.Dom.setStyle(leftArrow, "display", "none");
	}
}

// description of your code here

<?php $months = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); ?>

<table>
<tr>
<td valign="top">

<select id="selMonth" name="selMonth">
<?php for ($i = 0; $i < count($months); $i++) { ?>
<?php   $month = $months[$i]; ?>
<option value="<?php echo ($i + 1); ?>"><?php echo $month; ?></option>
<?php } ?>
</select>

</td><td valign="top">

<select name="selDay" id="selDay">
<?php for ($i = 1; $i <= 31; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>

</td><td valign="top">

<select name="selYear" id="selYear">
<option value="2006">2006</option>
<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

</td><td valign="top">

<div id="cal1Container"></div>

</td></tr>
</table>

<script type="text/javascript">
	YAHOO.namespace("example.calendar");

	YAHOO.example.calendar.init = function() {
	
		function handleSelect(type,args,obj) {
			var dates = args[0]; 
			var date = dates[0];
			var year = date[0], month = date[1], day = date[2];

			var selMonth = document.getElementById("selMonth");
			var selDay = document.getElementById("selDay");
			var selYear = document.getElementById("selYear");
			
			selMonth.selectedIndex = month - 1;
			selDay.selectedIndex = day - 1;

			for (var y=0;y<selYear.options.length;y++) {
				if (selYear.options[y].text == year) {
					selYear.selectedIndex = y;
					break;
				}
			}
		}

		function updateCal() {
			var selMonth = document.getElementById("selMonth");
			var selDay = document.getElementById("selDay");
			var selYear = document.getElementById("selYear");
			
			var month = parseInt(selMonth.options[selMonth.selectedIndex].value);
			var day = parseInt(selDay.options[selDay.selectedIndex].value);
			var year = parseInt(selYear.options[selYear.selectedIndex].value);
			
			if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
				var date = month + "/" + day + "/" + year;

				YAHOO.example.calendar.cal1.select(date);
				YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
				YAHOO.example.calendar.cal1.render();
			}
		}

		YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", 
																	{ mindate:"1/1/2006",
																	  maxdate:"12/31/2008" });
		YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
		YAHOO.example.calendar.cal1.render();

		YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
	}

	YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
	
	// Initialize pulldowns
	var myDate = new Date();
	var month = myDate.getMonth();
	var day = myDate.getDate();
	var year = myDate.getFullYear();
	var selMonth = document.getElementById("selMonth");
	var selDay = document.getElementById("selDay");
	var selYear = document.getElementById("selYear");
	selMonth.selectedIndex = month;
	selDay.selectedIndex = day - 1;
	selYear.selectedIndex = year - 2006;
	
</script>

<div style="clear:both" ></div>