ExtJs4 日期年月選擇控件(轉)

本文轉載自查看原文 2013-01-25 14:21 6893 ExtJs+Dojo+EasyUI+JqueryUI+HightChart

原文作者：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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ExtJs4 日期年月選擇控件 Extjs4——表格控件轉 EasyUi日期控件datebox設置，只顯示年月，也只能選擇年月學習ExtJS4 常用控件 Extjs4——表單與輸入控件 ExtJS6.0擴展日期選擇控件為也可以選擇時間 Extjs選年月控件monthfield Extjs4中combo的聯動選擇 ExtJs內的datefield控件選擇日期過后的事件監聽select extjs 4.2 日期控件選擇時分秒功能

ExtJs4 日期 年月選擇控件(轉)

免責聲明！

ExtJs4 日期年月選擇控件(轉)