date format with extjs 4 not rendering in date picker - extjs4.1

I have the following date picker
{
xtype: 'datefield',
id: 'FinalDespatchDate',
name: 'FinalDespatchDate',
fieldLabel: 'Part Despatch Date',
labelWidth: 150,
width: 370,
validateOnChange: false,
format: 'd/m/Y'
},
In my model i have
{
mapping:'FinalDespatchDate',
name:'FinalDespatchDate',
type: 'date',
dateFormat:'d/m/Y'
},
if in my model i don't include the dateFormat. The date binds to my date picker but it sends the date in an incorrect format. When i add dateFormat it sends the date in the correct format it just no longer binds to the datepicker. ie the above configuration display nothing in the date picker

Does your data come from server with properly formatted date value ('d/m/Y') in this (non-working) configuration?

Related

Display a year from calendar in ExtJS 4

I'm using a calendar in ExtJS 4, and I want my field to display only a year.
Currently, when I use a calendar it displays in my field this kind of date: "08/20/2013".
I'm using this code:
{
xtype: 'datefield',
fieldLabel: 'test',
id: 'yearOfExecution',
dateFormat: 'd/m/y',
anchor:'20%',
displayField: 'label',
valueField: 'value'
}
As I said, I only want to display a year (from my previous example, it should display "2013").
Should I modify this line?
displayField: 'label'
Try changing date format to 'y'. This should be in the (thorough) Sencha API.

Extjs 4 dateField getValue

I feel should be easy but still does not work, "toDate.getValue();" does not return Ext.date object. I cannot format date.
Error: format is undefined.
Below is my form field.
var toDate = new Ext.form.DateField(
{
fieldLabel: "date"
value: new Date(), name: "abs-to-date",
width: 100,
allowBlank: false
}
And on submission of form, i want to format date.
var toDateTime = toDate.getValue();
console.log(toDate.getValue());
toDateTime.setHours( toHour.getValue(), toMinute.getValue(), 0 );
abs.to = toDateTime.format( Date.patterns.JSONdateTime ); <---------------------
There are 2 different date type in Extjs 4.
1) Date
2) Ext.Date
method "format" is available to Ext.date and toDateTime is object of Date.
following is right syntax.
abs.to = Ext.Date.format(toDateTime, Date.patterns.JSONdateTime );
You're missing a comma after 'fieldLabel'. Code should be:
var toDate = new Ext.form.DateField({
fieldLabel: "date", //<----------
value: new Date(),
name: "abs-to-date",
width: 100,
allowBlank: false
});

Row Editor sending wrong Date

Recently I have upgrade my Ext version from 4.0.7 to 4.1.1
In my model I have defined like
{name : 'StartDate',type: 'date' ,dateFormat: 'time'},
My Grid Column is
{
id: 'StartDateID',
width: 180,
text: 'Start Date',
dataIndex: 'StartDate',
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
editor:{
allowBlank: true,
xtype:'datefield',
format:'m/d/Y',
editable: true},
sortable: false, groupable: false }
On Edit I am doing
My_Grid.on('edit', function(editor, e) {
e.store.sync();
}
After clicking on Update I used to get [with Ext 4.0.7 ] date value as
2012-08-04T00:00:00
but after upgrade with 4.1.1 I am getting date value as
310008e
Which I am not understanding.
My date is in this format
1346351400000
Can you please suggest me what is missing here? Or else how to get proper date after clicking update button from RowEditor.
Your model definition is incorrect, if you want your desired format it should be like:
{name : 'StartDate',type: 'date' ,dateFormat: 'U'},
'time' is not in the documentation, the only reason you could actually be using 'time' is if it is a custom type you have created, which is probably not the case.

date format with extjs 4.1 issue

In my model (Ext.data.Model) i have the following property
{
mapping:'Created',
name:'Created',
type: 'date',
format:'d/m/Y'
},
On my form i have the following field
{
xtype:'datefield',
name:'Created',
fieldLabel:' Date',
format:'d/m/Y',
width: 350
},
If i select the following date in the picker "01/04/2012" ( i'm in the UK, 1st April 2012)
I get the following in firebug json post "2012-01-04T00:00:00" ( 4th Jan 2012 )
How can i ensure the correct regions are coming through
In your model you define Ext.data.Field.
Have a look in the API docs, Ext.data.Field has no configuration called format, but dateFormat.
Try this
{
name:'Created',
type: 'date',
dateFormat:'d/m/Y'
},
and you just need mapping, if your data from the backend has a different name as you want to use in the model.
BTW: since ExtJS 4.1.3 there also are two new config items: dateReadFormat and dateWriteFormat to define different format for the reader and the writer. But if you define dateFormat this will be the same for both.
on the form field you need the extra property submitFormat:
{
xtype:'datefield',
name:'Created',
fieldLabel:' Date',
format:'d/m/Y',
width: 350,
submitFormat: 'd/m/Y'
}

Loading date/time into Sencha Touch Model

I'm using Sencha Touch 1.1. I have the following model and store:
Ext.regModel(TrafficResponse.Models.IncidentReports, {
idProperty: 'Id',
fields: [
{name: 'Id', type: 'int'},
{name: 'TMCRequestedTime', type: 'date'},
{name: 'TRUDetectedTime', type: 'date'},
{name: 'SiteArrivalTime', type: 'date'},
{name: 'SiteDepartedTime', type: 'date'}
],
proxy: {
type: 'localstorage',
id: TrafficResponse.Stores.IncidentReports
},
writer: {
type: 'json'
}
});
truApp.stores.incidentReportStore = new Ext.data.Store({
model: TrafficResponse.Models.IncidentReports,
id: TrafficResponse.Stores.IncidentReports,
autoLoad: true
});
I set the date value using a date/time picker (not a standard Sencha control) and use the updateRecord method of the form to update the model with the values on the form.
After sync() has been done the record in localstorage has the date value in the following format:
2012-02-09T22:15:00.000Z
The value on the date/time picker is Friday, February 10 2012 08:15 so it appears as though the GMT value is being stored.
After refreshing the browser and loading the model from localstorage, the value in localstorage is retained as above but it is not loaded into the model. The value in the model is null.
If I change the model and add dateFormat: 'c' to the field configuration, the date is loaded into the model with the following value:
Thu Feb 09 2012 22:15:00 GMT+1000 (E. Australia Standard Time)
The date is displayed on the form with that value as well which is 10 hours before the date that was set originally.
What can I do to get the date to load correctly and retain the timezone?
After a lot of stepping though code I discovered that the issue was caused by date-js. I removed date-js and used Sencha Date functions and everything now works correctly.