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
     

    标签: