Ext5.1日期控件仅显示年月

1、注册xtype类型

2、保存文件为xxxx.js

3、使用 xtype : monthfield

   return this.buildToolbar({
                items: [
                    { xtype: ‘monthfield‘, cId: ‘dfBeginDate‘, labelWidth: 40, width: 150, format: ‘Y-m‘, fieldLabel: ‘日期‘ },
                    { xtype: ‘monthfield‘, cId: ‘dfEndDate‘, labelWidth: 20, width: 125, format: ‘Y-m‘, fieldLabel: ‘至‘ },
                    { cId: ‘btnSearch‘, text: "查询", operationName: ‘Search‘ }
                ]
            });

4、效果

  

-------------------------------------------------------------------

Ext.define(‘Ext.form.field.Month‘, {
    extend: ‘Ext.form.field.Date‘,
    alias: ‘widget.monthfield‘,
    requires: [‘Ext.picker.Month‘],
    alternateClassName: [‘Ext.form.MonthField‘, ‘Ext.form.Month‘],
    selectMonth: null,
    createPicker: function () {
        var me = this,
            format = Ext.String.format,
            pickerConfig;
        pickerConfig = {
            pickerField: me,
            ownerCmp: me,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                select: { scope: me, fn: me.onSelect },
                monthdblclick: { scope: me, fn: me.onOKClick },
                yeardblclick: { scope: me, fn: me.onOKClick },
                OkClick: { scope: me, fn: me.onOKClick },
                CancelClick: { scope: me, fn: me.onCancelClick }
            },
            keyNavConfig: {
                esc: function () {
                    me.collapse();
                }
            }
        };
        if (Ext.isChrome) {
            me.originalCollapse = me.collapse;
            pickerConfig.listeners.boxready = {
                fn: function () {
                    this.picker.el.on({
                        mousedown: function () {
                            this.collapse = Ext.emptyFn;
                        },
                        mouseup: function () {
                            this.collapse = this.originalCollapse;
                        },
                        scope: this
                    });
                },
                scope: me,
                single: true
            }
        }
        return Ext.create(‘Ext.picker.Month‘, pickerConfig);
    },
    onCancelClick: function () {
        var me = this;
        me.selectMonth = null;
        me.collapse();
    },
    onOKClick: function () {
        var me = this;
        if (me.selectMonth) {
            me.setValue(me.selectMonth);
            me.fireEvent(‘select‘, me, me.selectMonth);
        }
        me.collapse();
    },
    onSelect: function (m, d) {
        var me = this;
        me.selectMonth = new Date((d[0] + 1) + ‘/1/‘ + d[1]);
    }
});
时间: 2024-12-10 06:56:31

Ext5.1日期控件仅显示年月的相关文章

zui框架配置日期控件只显示年月

zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/res/zui-1.9.1-dist/dist/js/zui.min.js"></script> <script src="~/res

ExtJs4.0日期控件只显示年月按年月格式会跳月的解决办法

如果是Ext.form.panel的话,只要设置一下属性就可以.如下代码: { text : '期间', width : 80, sortable : true, dataIndex : 'accountPeriod', format : 'Ym' } 如果是Ext.grid.panel的话,比较麻烦.网上也有各位大神的解决方法,不过都比较麻烦,要重写控件,我向一位大牛请教后整理出一个非常简单的方法,代码: Ext.define('Dpap.branchWithHold.WithHoldGrid

extjs 时间控件只显示年月

调用代码一: [javascript] view plain copy print ? var monthField = new Ext.ux.MonthField({ id:'month', fieldLabel: '月份', allowBlank:false, readOnly : true, format:'Y年m月', listeners:{"blur":function(){ alert() }} ); 调用代码二(部分): [javascript] view plain c

日期控件,支持年月

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>日期控件</title> <link href="css/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <

js 日期控件 可以显示为和历

日期控件的js 1 <!-- 2 /** 3 * Calendar 4 * @param beginYear 1990 5 * @param endYear 2010 6 * @param language 0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)|4(jp) 7 * @param patternDelimiter "-" 8 * @param date2StringPattern "yyyy-MM-dd" 9 * @param

angular ui-bootstrap日期控件如何显示成中文

1.引入中文国际化文件angular-locale_zh-cn.js 下载地址(https://github.com/angular/angular.js/tree/master/src/ngLocale) 然后大部分控件就可以显示中文了. 2. 还不够,有些按钮(today,clear,close)还不能显示中文, 2.1)需要修改angular-locale_zh-cn.js ,对DATETIME_FORMATS增加三个中文键值对: "DATETIME_FORMATS": { &q

时间控件只显示年月

<input id="db" /> 初始化加载db标签. $(function () { $('#db').datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的事件触发和对象生成有时间间隔 tds = p

wpf 时间控件只显示年月

最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.com/questions/1798513/wpf-toolkit-datepicker-month-year-only 原文是用了两个类,其中一个是为了让DatePicker下的Calendar只显示年月,不显示日,另一个类是为了让DatePicker格式化为yyyy-MM格式,但是从文章中可以看出,

Android日期控件如何兼容不同手机

============问题描述============ 请看图 但是,在小米或者华为手机上,日期控件却显示 2014-09月-03 ,月份一栏中多了一个"月"字,这种感觉很不爽: 请问:以上问题,是手机兼容性的问题,还是控件本身参数的问题 应该怎样解决,才能保证不同手机显示一致? ============解决方案1============ 和手机控件没有关系,这是因为不同手机修改了控件显示的方式. ============解决方案2============ 顶,同意楼上的 =====