PDA

View Full Version : DateEditor issue



mangesh
19 Feb 2007, 6:44 PM
I am using 0.33. I have an editor grid that can take BLANK dates.
When the user tries to enter some date using DatePicker, I get the error:
Date.monthNames[...] is null or not an object. Am I doing something wrong?


Hers's the code snippet:



var formatDate = function(value){
if ( value != "Invalid Date" && value != '' && !isNaN(value)) {
var tmpDate = new Date(Date.parse(value));
return tmpDate.dateFormat('M d, Y');
} else {
return;
}
};


var parseDate = function(value){
if ( value != null && value != "" && value != undefined) {
return new Date(Date.parse(value));
} else {
return;
}
};

CM = new YAHOO.ext.grid.DefaultColumnModel([
{header: "ID", width: 75, sortable: true},
{header: "Store#*", width: 100, sortable: true,editor: new yg.TextEditor()},
{header: "Est Ready Date", width: 75, sortable: true,renderer: formatDate,editor: new yg.DateEditor({allowBlank:true, format:'M d, Y'})},
{header: "Act Ready Date", width: 75, sortable: true,renderer: formatDate,editor: new yg.DateEditor({allowBlank:true, format:'M d, Y'})},
{header: "Name*", width: 75, sortable: true,editor: new yg.TextEditor()},
{header: "Status*", width: 75, sortable: true,editor: new yg.TextEditor(),renderer:formatStatus,editor: new yg.SelectEditor('status')},
{header: "Address*", width: 100, sortable: true,editor: new yg.TextEditor()},
{header: "City*", width: 100, sortable: true,editor: new yg.TextEditor()},
{header: "State*", width: 100, sortable: true,editor: new yg.TextEditor()},
{header: "Chain*", width: 100, sortable: true,editor: new yg.TextEditor(),renderer:formatChain,editor: new yg.SelectEditor('chain')},
{header: "Division*", width: 100, sortable: true,editor: new yg.TextEditor(),renderer:formatDivision,editor: new yg.SelectEditor('division')}
]);

var schema = {
tagName: 'site_browser',
id: 'use-index',
fields: this.arrCols
};

this.DM = new YAHOO.ext.grid.XMLDataModel(schema);
this.DM.setDefaultSort(CM, 0, "ASC");
this.DM.addPreprocessor(2, parseDate);
this.DM.addPreprocessor(3, parseDate);
this.DM.addListener('load', this.SM.selectFirstRow, this.SM, true);
this.DM.addListener('load', this.SM.selectFirstRow, this.SM, true);
this.DM.addListener('cellupdated', this.onAfterEdit, this );

mangesh
20 Feb 2007, 8:51 AM
Verified the problem by editing the plants.xml so that the date is blank in one of the rows.
and also modifying edit-grid.js to accomodate blank dates. Can anybody suggest a quick fix/workaround for this?

Here's the modified code:
Plants.xml


<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<plant>
<common>Bloodroot</common>
<botanical>Sanguinaria canadensis</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>2.44</price>
<availability>03/15/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Columbine</common>
<botanical>Aquilegia canadensis</botanical>
<zone>3</zone>
<light>Mostly Shady</light>
<price>9.37</price>
<availability>03/06/2006</availability>
<indoor>true</indoor>
</plant>
.........
<plant>
<common>Cowslip</common>
<botanical>Caltha palustris</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>9.90</price>
<availability></availability>
<indoor>true</indoor>
</plant>
........
<plant>
<common>Snakeroot</common>
<botanical>Cimicifuga</botanical>
<zone>Annual</zone>
<light>Shade</light>
<price>5.63</price>
<availability>07/11/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Cardinal Flower</common>
<botanical>Lobelia cardinalis</botanical>
<zone>2</zone>
<light>Shade</light>
<price>3.02</price>
<availability>02/22/2006</availability>
<indoor>true</indoor>
</plant>
</catalog>




Here is edit-grid.js


/*
* yui-ext
* Copyright(c) 2006, Jack Slocum.
*/

EditorExample = function(){
var dataModel;
var grid;
var colModel;

var formatMoney = function(value){
value -= 0;
value = (Math.round(value*100))/100;
value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
return "$" + value;
};

var formatBoolean = function(value){
return value ? 'Yes' : 'No';
};

var formatDate = function(value){
if ( !isNaN( value ) )
return value.dateFormat('M d, Y');
};

var parseDate = function(value){
return new Date(Date.parse(value));
};

return {
init : function(){
var yg = YAHOO.ext.grid;
var cols = [{
header: "Common Name",
width: 160,
editor: new yg.TextEditor({allowBlank: false})
},{
header: "Light",
width: 130,
editor: new yg.SelectEditor('light')
},{
header: "Price",
width: 70,
renderer: formatMoney,
editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
},{
header: "Available",
width: 95,
renderer: formatDate,
editor: new yg.DateEditor({format: 'm/d/y', allowBlank:true, disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends',
disabledDates : ['^07', '04/15', '12/02/06'],
disabledDatesText : 'The plants are pollinating on %0, choose a different date.'})
},{
header: "Indoor?",
width: 55,
renderer: formatBoolean,
editor: new yg.CheckboxEditor()
}];
colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);
colModel.defaultSortable = true;

var schema = {
tagName: 'plant',
id: 'use-index',
fields: ['common', 'light', 'price', 'availability', 'indoor']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
dataModel.addPreprocessor(2, parseFloat);
dataModel.addPreprocessor(3, parseDate);
dataModel.addPreprocessor(4, Boolean);
dataModel.setDefaultSort(colModel, 0, "ASC");

grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
// to use double click to edit:
//grid.getSelectionModel().clicksToActivateCell = 2;
grid.render();

dataModel.load('plants.xml');
},

// filtering support, regex, function or text match
filter : function(e){
var mfilter = function(value){
return (value == 'Shade');
}
dataModel.filter({0: /^B.*/i, 1: mfilter});
},

// hide columns
hide : function(e){
colModel.setHidden(1, true);
}
};
}();

YAHOO.ext.EventManager.onDocumentReady(EditorExample.init, EditorExample, true);