ExtJs4 日期年月选择控件(转)

原文作者：http://ext4all.com/post/ext4-monthfield-with-month-picker-for-extjs4

某论坛弄下来的，。原文如下：

我也来发一个年月选择控件，因为某些场合只需要年份和月份信息，直接使用日期控件，虽然能通过format等方式可以得到，但是还要选择日期才能完成输入，比较麻烦，在网上找了一下，搜索到两个，都是2.x版的；于是就自己动手写一个，在4.1版中测试通过。给需要的朋友，效果如下图：

按 Ctrl+C 复制代码

MonthField.js

Ext.define('Ext.ux.form.MonthField', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.monthfield',
    //requires: ['Ext.picker.Date'],
    //alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],

format: "Y-m",

altFormats: "m/y|m/Y|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|Ym",

//disabledDaysText: "Disabled",

//disabledDatesText: "Disabled",

//minText: "The date in this field must be equal to or after {0}",

//maxText: "The date in this field must be equal to or before {0}",

//invalidText: "{0} is not a valid date - it must be in the format {1}",

triggerCls: Ext.baseCSSPrefix + 'form-date-trigger',

//showToday: true,

//initTime: '12',

//initTimeFormat: 'H',

matchFieldWidth: false,

startDay: new Date(),

initComponent: function () {
        var me = this;

me.disabledDatesRE = null;

me.callParent();
    },

initValue: function () {
        var me = this,
            value = me.value;

if (Ext.isString(value)) {
            me.value = Ext.Date.parse(value, this.format);
        }
        if (me.value)
            me.startDay = me.value;
        me.callParent();
    },

rawToValue: function (rawValue) {
        return Ext.Date.parse(rawValue, this.format) || rawValue || null;
    },

valueToRaw: function (value) {
        return this.formatDate(value);
    },

formatDate: function (date) {
        return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
    },
    createPicker: function () {
        var me = this,
            format = Ext.String.format;

return Ext.create('Ext.picker.Month', {
            //renderTo: me.el,
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            shadow: false,
            focusOnShow: true,
            listeners: {
                scope: me,
                cancelclick: me.onCancelClick,
                okclick: me.onOkClick,
                yeardblclick: me.onOkClick,
                monthdblclick: me.onOkClick
            }
        });
    },

onExpand: function () {
        //this.picker.show();
        this.picker.setValue(this.startDay);
        //
        
    },

//    onCollapse: function () {
    //        this.focus(false, 60);
    //    },

onOkClick: function (picker, value) {
        var me = this,
            month = value[0],
            year = value[1],
            date = new Date(year, month, 1);
        me.startDay = date;
        me.setValue(date);
        this.picker.hide();
        //this.blur();
    },

onCancelClick: function () {
        this.picker.hide();
        //this.blur();
    }

});

按 Ctrl+C 复制代码

<html >
<head>
 <title>Insurance Report</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 

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

    Ext.onReady(function () {
        var form = Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            title: 'Simple Form',
            height: 500,
            layout: 'hbox',
            items: [
                    {
                        xtype: 'monthfield', fieldLabel: '日期', editable: false, width: 150, labelWidth: 30, labelAlign: 'right',
                        format: 'Y-m'
                    },
                    {
                        xtype: 'monthfield', fieldLabel: '日期', editable: false, width: 150, labelWidth: 30, labelAlign: 'right',
                        format: 'Ym'
                    }
                ]
        });
    });
    
</script>

</head>
<body >

</body>
</html>

DataPicker 时分秒插件：http://www.sencha.com/forum/showthread.php?137242-Ext.ux.DateTimeField-DateTimePicker-for-ext4-also-DateTimeMenu-TimePickerField

posted @ 2013-01-25 14:21 Seaurl 阅读(7862) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

zhang wei 's BLOG

qq:1576410833 软件交流群:195724586 awbeci地址：http://www.awbeci.com/zhangwei

ExtJs4 日期年月选择控件(转)

公告

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (698)

随笔档案 (605)

文章档案 (2)

相册 (6)

API

博客园系列技术文章

服务器端技术网站(S)

开源社区

客户端技术网站(B)

联系方式

微软技术网站

友情链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论

zhang wei 's BLOG

qq:1576410833 软件交流群:195724586 awbeci地址：http://www.awbeci.com/zhangwei

ExtJs4 日期 年月选择控件(转)

公告

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (698)

随笔档案 (605)

文章档案 (2)

相册 (6)

API

博客园系列技术文章

服务器端技术网站(S)

开源社区

客户端技术网站(B)

联系方式

微软技术网站

友情链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论

ExtJs4 日期年月选择控件(转)