extjs 日期控件

时间：2015-1-3类别：Web前端

extjs 日期控件

extjs 日期控件

一、datefield日期控件简单的用法（指定item的xtype属性为 datefield）


items:[   
    ...{fieldLabel:"Name"},   
    ...{fieldLabel:"Gender"},   
    ...{fieldLabel:"Age"},     
    ...{   
        xtype:"datefield",   
        fieldLabel:"Birth"  
    },     
   ...{fieldLabel:"Phone"},   
   ...{fieldLabel:"Email"}   
]

效果

二、Extjs日期控件修改日期为中文

日期控件产生的日期格式是根据Local来定义的，通过引用 Locale 文件可以确定默认的Locale定义的格式，也可以通过其他的属性来进行自定义格式。

引用Locale文件

<script type="text/javascript" src="ext/build/locale/ext-lang-zh_CN.js"></script>

效果

三、Extjs日期控件自定义格式

在API中查找DateField，可以找到定义日期格式可以通过format构造参数来实现

例如

使用"Y-m-d"模式来格式化日期

复制


                '日期',
                ...{
                    xtype:'datefield',
                    itemId:'beginDate',
                    format:'Y-m-d',
                    value:Ext.util.Format.date(Ext.Date.add(new Date(),Ext.Date.MONTH,-1),"Y-m-d")

                },
                '-',
                ...{
                    xtype:'datefield',
                    itemId:'endDate',
                    format:'Y-m-d',
                    value:Ext.util.Format.date(Ext.Date.add(new Date(),Ext.Date.MONTH,1),"Y-m-d")

                },

效果

更多的匹配符在Date类中有定义，需要用的时候再去查就好了

四、Extjs日期控件设置一个初始值（可以通过构造参数 value 来设置）


...{   
    xtype:"datefield",   
    format:"Y-m-d",   
    value:"1986-12-25",   
    fieldLabel:"Birth"  
},

五、Extjs日期控件禁止用户输入（设置readOnly为true）

JScript 代码复制


...{   
    xtype:"datefield",   
    format:"Y-m-d",   
    value:"1986-12-25",   
    readOnly:true,   
    fieldLabel:"Birth"  
},

六、extjs中日期控件的取值格式化

extjs DateField 的值用getValue()方法获取后是一大堆字符串，类似Tue Dec 07 2010 00:00:00 GMT 0800，这玩意存入数据库实在不好办。。。所以要把它格式化一下，方法很简单，用EXT的 Ext.util.Format.date（）方法

示例

var gedt = Ext.util.Format.date(日期控件.getValue(), 'Y-m-d');

出来的日期格式就是 2010-10-10

标签：

extjs

extjs 日期控件

extjs 日期控件

猜您喜欢

热门推荐