ExtJs4 日期 年月选择控件

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

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

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

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();
    }

});

 

<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 @ 2012-08-14 08:57  高山-景行  阅读(3671)  评论(3)  编辑  收藏  举报