ExtJS / Javascript - 日期字段正在通过GUI不正确地转换

时间:2016-02-09 16:33:12

标签: javascript date extjs store extjs5

寻求关于如何通过我的GUI呈现我的日期字段的一些帮助。

的问题:

  1. 我通过日历选择日期字段 - 如果我选择2016-02-07并将其保存到数据库,为什么GUI以GMT(2016-02-06)显示日期

  2. 对于start_time和end_time字段,为什么它会保存到我的数据库前面" 2008-01-01T"?

  3. 一些背景资料:

    数据库类型: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'
                }
    

    谢谢!

2 个答案:

答案 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日期。在对提交日期进行字符串化时,该字段会使用dateWriteFormatdateFormat配置,该配置随后会在save()sync()期间得到尊重。在此转换期间,ExtJS仅在某些情况下处理时区,具体取决于格式。

调用store.loadmodel.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优先于dateWriteFormatdateReadFormat。如果您始终指定兼容格式(Y-m-d H:ic,而不是两者),并且还要在服务器端正确进行转换,那么您将是安全的。 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)

我会使用相同的格式配置所有不同的组件。

  1. 要存储字段:

      <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>
    
  2. To Editor组件:

    type: "date",
    dateFormat: "Y-m-d H:i:s"
    
  3. 到Grid列:

    xtype: "datefieldscheduler", 
    format: "Y-m-d H:i",
    
  4. 作为最后一个资源覆盖日期格式,(例如,您可以在此处看到来自数据库的格式)

    xtype: "datecolumn", // Ext.grid.column.Date
    format: "Y-m-d H:i:s",
    renderFormat: "Y-m-d H:i"
    
  5. 在这个例子中,我们在内部使用相同的格式,以不同的格式显示使用renderFormat。