寻求关于如何通过我的GUI呈现我的日期字段的一些帮助。
的问题:
我通过日历选择日期字段 - 如果我选择2016-02-07并将其保存到数据库,为什么GUI以GMT(2016-02-06)显示日期
对于start_time和end_time字段,为什么它会保存到我的数据库前面" 2008-01-01T"?
一些背景资料:
数据库类型:PostgreSQL
ExtJS:5.0.1
数据库将值存储为:
日期= 2016-02-07
start_time = 2008-01-01T05:00:00
end_time = 2008-01-1T07:00:00
GUI将值显示为:
date = 2016-02-06(看起来它正在将DB值转换为GMT)
start_time = 5:00 AM
end_time = 7:00 AM
存储
Store.model.Base.defineModel(
'Ticket',
[{name: 'attributes_id', type: 'int'},
{name: 'number', type: 'string'},
{name: 'date', type: 'date'},
{name: 'start_time', type: 'date', dateWriteFormat: 'g:i A'},
{name: 'end_time', type: 'date', dateWriteFormat: 'g:i A'}
],
true
);
查看:
xtype: 'fieldset',
title: 'Details',
layout: { type: 'hbox', align: 'stretch' },
items: [{
xtype: 'container',
layout: 'vbox',
style: { paddingRight: '10px' },
items: [{
xtype: 'textfield',
labelAlign: 'top',
fieldLabel: 'Number',
id: 'Number',
name: 'number',
width: 250
},
{
xtype: 'datefield',
labelAlign: 'top',
fieldLabel: 'Date',
format: 'Y-m-d',
submitFormat: 'c',
id: 'Date',
name: 'date',
width: 250
},
{
xtype: 'timefield',
labelAlign: 'top',
fieldLabel: 'Start Time',
id: 'StartTime',
name: 'start_time',
minValue: '12:00 AM',
maxValue: '11:00 PM',
format: 'g:i A',
increment: 60,
width: 250
},
{
xtype: 'timefield',
labelAlign: 'top',
fieldLabel: 'End Time',
id: 'EndTime',
name: 'end_time',
minValue: '12:00 AM',
maxValue: '11:00 PM',
format: 'g:i A',
increment: 60,
width: 250
}]
},]
保存:
_constructSaveStore: function(config) {
var me = this;
var store = config.store;
this._tasks.push({fn: function() {
if(store.getModifiedRecords().length > 0 ||
store.getRemovedRecords().length > 0)
{
store.sync({callback: function(records, operation, success) {
me.setStatus(success);
if(!operation.wasSuccessful()) {
var message = "Failed to save changes on server.";
if(operation.hasException())
message = message + " " + operation.getError();
var app = CarrierDMZ.getApplication();
app.toast(message,'error');
}
}
});
}
else {
me.setStatus(true);
}
}});
}
表格定义:
region: 'center',
xtype: 'form',
id: 'TicketForm',
autoScroll: true,
bodyPadding: 10,
layout: {
type: 'vbox',
align: 'stretch'
}
谢谢!
答案 0 :(得分:1)
从/向服务器读/写日期值
如何从/向服务器读取/写入日期值有多种选择。
问题是JSON标准没有特定的日期数据类型。日期可以以各种格式的字符串,整数或对象传输,甚至可以(故意)违反JSON标准(“Microsoft方式”)。
日期本身是一个复杂的对象,从某个时间开始都是一个秒的整数,以及一个告诉你你所在的时区的值。时区本身就是复杂的对象,其中有104个已知单独到Windows操作系统。 Now go figure what happens when different bodies try to build a standard围绕那种混乱。
使用form.submit()
时,表单将字符串化所有日期字段值。 AFAIK没有选择如何以自定义方式对它们进行字符串化; ExtJS将始终生成默认字符串。它取决于后端是否可以理解默认字符串,因为正如我已经提到的那样,没有标准。
使用model.save()
或store.sync()
时,方法不同。当您说form.updateRecord()
时,表单会将JavaScript日期交给模型;如果模型字段是type:date
,它将存储javascript日期。在对提交日期进行字符串化时,该字段会使用dateWriteFormat
或dateFormat
配置,该配置随后会在save()
和sync()
期间得到尊重。在此转换期间,ExtJS仅在某些情况下处理时区,具体取决于格式。
调用store.load
或model.load
时,同样会进入不同的方向。但是,而不是dateWriteFormat
,read方法使用dateReadFormat
。如果对两者使用相同的值,则转换完全可逆。但
dateFormat:'Y-m-d'
阅读“2016-01-01”时,我的电脑上的日期为2016-01-01 00 :00:00 GMT + 01:00。dateFormat:'c'
阅读“2016-01-01”时,我的计算机上的日期为2016-01-01 01 :00:00 GMT + 01:00。 如果您混合使用这两种格式(使用g:i A
作为dateWriteFormat而默认c
作为dateReadFormat),一切都会变得混乱。
因此,推荐的方法是不使用表单加载/提交,并使dateFormat
优先于dateWriteFormat
和dateReadFormat
。如果您始终指定兼容格式(Y-m-d H:i
或c
,而不是两者),并且还要在服务器端正确进行转换,那么您将是安全的。 Also note that sencha has hidden a very strong suggestion to that regard somewhere in the docs.
时间字段
时间字段选择时间,但JavaScript日期值也需要日期。因此,ExtJS发明了以下初始化,如果您愿意,可以覆盖某些时间字段:
initDate: '1/1/2008',
initDateParts: [2008, 0, 1],
initDateFormat: 'j/n/Y',
确保initDate和initDateParts同步,否则地狱可能会失败。但大多数情况下,您将dateFormat:'H:i'
用于模型中的字段,完全跳过日期。对于时间字段,日期只是占位符。比较时间字段值时,请确保时间字段具有相同的initDate(它们通常会执行,除非您覆盖它们)。
答案 1 :(得分:0)
我会使用相同的格式配置所有不同的组件。
要存储字段:
<div class="col-md-12 well">
<div class="col-md-3">
<img src="http://placehold.it/100x100"></img>
</div>
<div class="col-md-3">
<div>
This text should be centered vertically
</div>
</div>
</div>
To Editor组件:
type: "date",
dateFormat: "Y-m-d H:i:s"
到Grid列:
xtype: "datefieldscheduler",
format: "Y-m-d H:i",
作为最后一个资源覆盖日期格式,(例如,您可以在此处看到来自数据库的格式)
xtype: "datecolumn", // Ext.grid.column.Date
format: "Y-m-d H:i:s",
renderFormat: "Y-m-d H:i"
在这个例子中,我们在内部使用相同的格式,以不同的格式显示使用renderFormat。