Date field defaults to 31/01/1900

[robshim]

Hi,
Got a really useful extjs application going - http://www.frimleypark.nhs.uk/confor...onformity.html

But if you lookk at say 'Date cleared' it says 31/01/1900. It is not allowing the field to be blank.

Here is the Date cleared code

dataIndex : 'cleared', xtype : 'datecolumn', header : 'Date cleared', format : 'd/m/Y', width : 80, editor: { xtype : 'datefield', allowBlank : true, format : 'd/m/Y' } },Hope someone can help?

Thanks,

Rob

[Condor]

Change your server so it sends '' instead of '0000-00-00' for empty dates.

[robshim]

Thanks Condo, I'll give it a try on Monday.

[robshim]

Hi,
Where abouts do I change this? Is it a MySQL setting?
Thanks,
Rob

[Condor]

I have no idea where your 0000-00-00 date value is coming from. I don't believe it's stored in the database that way (unless you are using a char field instead of a date or timestamp).

Another solution would be to set:

Date.useStrict = true;

to disable date roll-over and correctly detect 0000-00-00 as invalid.

[robshim]

Thanks Condor. But where would this bit of code go please?

//
// 'grid-example.js' - source file for the grid-example package.
//
//
Ext.onReady(function(){

// Boilerplate - tell ExtJS we're going to be using 'direct'
// in 'normal' mode (rather than 'polling')
//
Ext.Direct.addProvider(Ext.app.REMOTING_API);
//
// This is a small 'hack' to keep track of new records.
//
var new_records = Array();

//return String.format('{0}', val.dateFormat('M j, Y'));
//}
// 'hospitals_update' is called by the commit button. It should
// write any changes to the database then clear the 'changed'
// flag against successfully written records.
//
///
var hospitals_update = function() {
//
// Always explicitly define variables as local unless
// you actually want them to be global. Reduces the chance
// of a namespace conflict with another routine and makes
// life more convenient when you are using the debugger.
//
// Using ONE var statement will keep 'lint' type programs
// happy although you can use var multiple times if you
// really want to.
//
var modified,index,record,params;
//
// 'callback' is activated when the direct function
// completes. Interrogating response.status will tell you
// whether the routine was successful or not - see the
// mydb.php file re; setting 'status'.
//
var callback = function(response,e)
{
if(!response.status) Ext.Msg.alert("Error",response.text);
else {
//
// If response.status == 1 then we expect
// to find 'id' set to the record id we
// just added.
//
index = store.find("id",response.id);
if( index != -1 )
{
record = store.getAt(index);
record.commit();
}
//
// Note, this doesn't work for new records
// as we're using auto-increment and the
// record is isn't known until the
// record has been created.
//
}
}
//
// For each new record we've created, generate a config
// block and call mydb.create.
//
for(index=0;index<new_records.length;index++) {
record = store.getAt(new_records[index]);
params = { 'name':record.get('name'),'source':record.get('source'),'discipline':record.get('discipline'),'title':record.get('title'),'standards':record.get('standards'),'description':record.get('description'),'raised':record.get('raised'),'whom':record.get('whom'),'remedial':record.get('remedial'),'corrective':record.get('corrective'),'preventative':record.get('preventative'),'bywhen':record.get('bywhen'),'bywhen2':record.get('bywhen2'),'ext':record.get('ext'),'bywho':record.get('bywho'),'cleared':record.get('cleared'),'comments':record.get('comments'),'colCheck':record.get('colCheck'),'status':record.get('status') };
mydb.create(params,callback);
}
//
// For each changed record, generate a config
// block and call mydb.create.
//
modified = store.getModifiedRecords();
for(index=0;index<modified.length;index++) {
record = modified[index];
params = { 'name':record.get('name'),'source':record.get('source'),'discipline':record.get('discipline'),'title':record.get('title'),'standards':record.get('standards'),'description':record.get('description'),'id':record.get('id'),'raised':record.get('raised'),'whom':record.get('whom'),'remedial':record.get('remedial'),'corrective':record.get('corrective'),'preventative':record.get('preventative'),'bywhen':record.get('bywhen'),'bywhen2':record.get('bywhen2'),'ext':record.get('ext'),'bywho':record.get('bywho'),'cleared':record.get('cleared'),'comments':record.get('comments'),'colCheck':record.get('colCheck'),'status':record.get('status')};
mydb.update(params,callback);
}
//
// This is a bit of a lazy cheat, if we've added any
// records, reload the table which will clear the 'modified'
// status of the new records. To do this properly we should
// assign temporary / unique id's to records when we add
// them and ensure the callback can always find new records
// to clear the status explicitly, rather than relying on
// a table reload.
//
if(new_records.length) {
store.reload();
new_records = Array();
}
}
//
// 'schema' - the structure of our database records
//
var schema = [
{ name: 'id' , type: 'int' },
{ name: 'name' , type: 'string' },
{ name: 'source' , type: 'string' },
{ name: 'discipline' , type: 'string' },
{ name: 'title' , type: 'string' },
{ name: 'standards' , type: 'string' },
{ name: 'description' , type: 'string' },
{ name: 'raised' , type: 'date' , dateFormat:'Y-m-d'},
{ name: 'whom' , type: 'string' },
{ name: 'remedial' , type: 'string' },
{ name: 'corrective' , type: 'string' },
{ name: 'preventative' , type: 'string' },
{ name: 'bywhen' , type: 'date' , dateFormat:'Y-m-d'},
{ name: 'bywhen2' , type: 'date' , dateFormat:'Y-m-d'},
{ name: 'ext' , type: 'string' },
{ name: 'cleared' , type: 'date' , dateFormat:'Y-m-d'},
{ name: 'bywho' , type: 'string' },
{ name: 'comments' , type: 'string' },
{ name: 'status' , type: 'string' },
{ name: 'colCheck', type: 'string' }
];
//
// 'store' - this really is all there is to reading the table
// from SQL.
//
var store = new Ext.data.DirectStore({
directFn : mydb.read,
loading : false,
fields : schema
});
//
// 'editor' - setup / config for the RowEditor plugin
//
var editor = new Ext.ux.grid.RowEditor({
saveText : 'Update'
});

var date_editor = new Ext.form.DateField();
var date_editor2 = new Ext.form.DateField();
var date_editor3 = new Ext.form.DateField();
var date_editor4 = new Ext.form.DateField();
var check_editor = new Ext.form.Checkbox();

var drop_editor = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
lazeyRender : true,
mode : 'local',
store : new Ext.data.ArrayStore(
{
id : 0,
fields : [ 'text' ],
data : [['Mon'],['Tue'],['Wed'],['Thu'],['Fri'],['Sat'],['Sun']]
}),
valueField : 'text',
displayField : 'text'
});
var drop_editor2 = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
lazeyRender : true,
mode : 'local',
store : new Ext.data.ArrayStore(
{
id : 1,
fields : [ 'text' ],
data : [['Change requests'],['CPA'],['Incidents'],['Internal Audits'],['MHRA'],['Misc'],['NEQAS'],['Process Deviations'],['Winpath']]}),
valueField : 'text',
displayField : 'text'
});

var drop_editor3 = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
lazeyRender : true,
mode : 'local',
store : new Ext.data.ArrayStore(
{
id : 2,
fields : [ 'text' ],
data : [['All'],['B.T. both sites'],['B.T. FPH'],['B.T. RSCH'],['Biochem both'],['Biochem FPH'],['Biochem RSCH'],['Bowel Screening'],['C I Unit'],['Clinical Trials'],['Cytology'],['GMEC'],['Haematology both'],['Haematology FPH'],['Haematology RSCH'],['Histology'],['Immunology'],['Microb Bacty'],['Microb Virology'],['Microbiology'],['Molecular Diagnostics'],['Mortuary'],['Peptides'],['POC'],['POC EQA'],['Q.M. & All'],['Quality Managers'],['SAS Peptides'],['SAS Peptides EQA'],['SPOT team'],['Support Services'],['Trace Elements'],['Trace Elements EQA']]}),
valueField : 'text',
displayField : 'text'
});
function do_delete(b,e)
{
Ext.Msg.show({
title : 'Confirmation',
msg : 'DELETE this record<br/><br/>Are you sure?',
fn : function(btn,text)
{
if( btn == "yes" ) {
var callback = function(response,e)
{
if(!response.status) Ext.Msg.alert("Error",response.text);
else {
Ext.Msg.alert('Deleted','Record deleted');
}
}
var record = grid.getSelectionModel().getSelected();
params = { 'id':record.get('id'),'name':record.get('name') };
mydb.delet(params,callback);
store.remove(record);
store.reload();
}
},
buttons : Ext.Msg.YESNO,
icon : Ext.MessageBox.QUESTION
});
}
//
// 'grid' - this does all the GUI work
//
var grid = new Ext.grid.GridPanel({
store : store,
region : 'center',
margins : '0 5 5 5',
stripeRows : true,
//autoExpandColumn: 'name',
width : 50,
plugins : [editor],
columns : [
{ id : 'id' ,
header : 'No' ,
editable: false,
width : 30,
dataIndex : 'id',
editor : { xtype:'textfield',allowBlank:true }
},
{ id : 'name',
header : 'Ref No',
width : 40,
dataIndex : 'name',
editor : { xtype:'textfield',allowBlank:true }
},
{ id : 'source',
header : 'Source',
width : 80,
dataIndex : 'source',
editor : drop_editor2
},
{ id : 'discipline',
header : 'Discipline',
width : 100,
dataIndex : 'discipline',
editor : drop_editor3
},
{ id : 'title',
header : 'Title',
width : 55,
dataIndex : 'title',
editor : { xtype:'textfield',allowBlank:true }
},
{ id : 'standards',
header : 'Standards',
width : 60,
dataIndex : 'standards',
editor : { xtype:'textfield',allowBlank:true }
},

{ id : 'description',
header : 'Description',
width : 150,
height : 100,
dataIndex : 'description',
editor : { xtype:'textarea',maxLength:150,maxLengthText: 'max 150 characters',allowBlank:true }
},


{ id : 'raised',
header : 'Date raised',
width : 80,
dataIndex : 'raised',

//renderer: renderDate,
allowBlank : true,
editor : date_editor

},
//Working date format!//
//{dataIndex : 'raised',
//xtype : 'datecolumn',
//header : 'Raised',
//format : 'd/m/Y',
//width : 100,
//editor: {
//xtype : 'datefield',
//allowBlank : true,
//format : 'd/m/Y'
//}
//},

{ id : 'whom',
header : 'By whom',
width : 60,
dataIndex : 'whom',
editor : { xtype:'textfield',allowBlank:true }
},

{ id : 'remedial',
header : 'Remedial action',
width : 150,
dataIndex : 'remedial',
editor : { xtype:'textarea',maxLength:150,maxLengthText: 'max 150 characters',allowBlank:true }
},
{ id : 'corrective',
header : 'Corrective action',
width : 150,
dataIndex : 'corrective',
editor : { xtype:'textarea',maxLength:150,maxLengthText: 'max 150 characters',allowBlank:true }
},

{ id : 'preventative',
header : 'Preventative action',
width : 150,
dataIndex : 'preventative',
editor : { xtype:'textarea',maxLength:150,maxLengthText: 'max 150 characters',allowBlank:true }
},
{ id : 'bywhen',
header : 'When 1st action',
width : 100,
dataIndex : 'bywhen',
//renderer: renderDate,
editor : date_editor2

},
{ id : 'bywhen2',
header : 'When 2nd action',
width : 100,
dataIndex : 'bywhen2',
//renderer: renderDate,
editor : date_editor4

},
{ id : 'ext',
header : 'Ext',
width : 60,
dataIndex : 'ext',
editor : { xtype:'textfield',allowBlank:true }
},
{ id : 'bywho',
header : 'By who',
width : 60,
dataIndex : 'bywho',
editor : { xtype:'textfield',allowBlank:true }
},
{ id : 'cleared',
header : 'Date cleared',
width : 80,
dataIndex : 'cleared',
//renderer: renderDate,
editor : date_editor3

},
{ id : 'comments',
header : 'Comments',
width : 150,
dataIndex : 'comments',
editor : { xtype:'textarea',maxLength:150,maxLengthText: 'max 150 characters',allowBlank:true }
},

//OLD check format { id : 'colCheck',
//header : 'Complete?',
//width : 60,
//dataIndex : 'colCheck',
//editor : check_editor
//}
{
xtype : 'booleancolumn',
id : 'colCheck',
header : 'Complete',
width : 60,
dataIndex : 'colCheck',
align : 'center',
trueText : 'Yes',
falseText : 'No',
editor: {
xtype : 'checkbox'
}
}
],
tbar : [
{
text : 'Add record',
handler : function() {
var h,Hospital;
//
// Create a new / blank hospital record
//
Hospital = Ext.data.Record.create(schema);
h = new Hospital({
name : 'Ref no?'
});
//
// Make sure the editor isn't active
//
editor.stopEditing();
//
// Add it to the grid and mark as dirty
//
store.add(h);
h.markDirty();
grid.getView().refresh();
//
// Add to our array of new records
//
new_records.push(store.indexOf(h));
}
},{
text : 'Delete',
handler : do_delete
},{
//
// This is the 'commit' button together with it's
// handler, i.e. just call hospitals_update
//
text : 'Save',
handler : hospitals_update
}]
});
//
// Just an envelope, you could embed the grid directly if you wish
// but this is handy for readability.
//
var layout = new Ext.Panel({
title : 'Non Conformity Record',
layout : 'border',
layoutConfig : { columns: 1 },
width : 1740,
height : 520,
items : [ grid ]
});

// Render the grid, 'then' load the table, decreases the dead time
// before the user sees something.
//
layout.render('grid-example');
store.load();
var exportButton = new Ext.ux.Exporter.Button({
component: grid,
text : " Download as .xls"
});
grid.getTopToolbar().add(exportButton);

});
//finally, remove the loading mask
(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}).defer(250);

[Condor]

After including ext-all.js and before Ext.onReady.

[robshim]

I'm sorry I don't get you. Is this somewhere on grid-example.js?

[Condor]

What's the problem?

I simply meant:

Date.useStrict = true;
Ext.onReady(function(){
  ...
});

[robshim]

Thanks, that works. This is terrific technology but tricky to get to work.
I have made two pages, a 'read only' view and an admin 'edit' view. The admin edit page has stopped working in IE, it just fails to load. Any suggestions?
Thanks,
Rob