EXTJS 5 - 仅日期选择器年份和月份

Posted 2023-03-30

【中文标题】EXTJS 5 - 仅日期选择器年份和月份

【英文标题】：EXTJS 5 - Date picker year and month only

【发布时间】：2015-01-27 09:50:00

【问题描述】：

我想这个问题已经被问了很多（因为我发现了一些关于它的主题），但我仍然不知道如何通过仅显示月份和年份来呈现日期选择器。 我想我可以这样做：

创建我自己的 cuctom 组件（但我认为我对 Extjs 的了解还不足以创建一个显示月份和年份的组件，并且在单击时会呈现年份和月份选择器。 使用一些在谷歌上找到的代码来创建一个插件（但我不知道如何在 extjs 中使用插件^^"）。 使用第三个库年月选择器添加到我的 extjs 应用程序中。

请大家指导我应该选择什么，并给我任何我可以参考的链接吗？

提前致谢！

【参考方案1】：

煎茶没有这个组件，但是像这样的东西我们得到了它

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;
        return Ext.create('Ext.picker.Month', 
            pickerField: me,
            ownerCt: me.ownerCt,
            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();
                
            
        );
    ,
    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]);
    
);

...

Ext.create('Ext.form.field.Month', 
    format: 'F, Y',
    renderTo: Ext.getBody()
);

Fiddle example

【讨论】：

非常感谢您的回答 :) ！我一直在尝试这个解决方案，但问题是用户仍然需要选择日期才能选择日期。这在我的用例中意义不大，用户甚至不应该看到这些日子^^！

非常感谢！上帝保佑你！

还有一个问题，我有一个由 senchaCMD 生成的 extjs 应用程序。我已在我的视图文件夹中复制/粘贴组件的定义（更改第一个参数路径）。我在我的主视图中需要这个组件，并显示它。但它只呈现一个带有日期字段标签的简单文本字段。请注意，如果我编写了无效的日期格式，工具提示会警告我有关日期格式的信息。我的猜测是我在构建中错过了一些 css 或 js 文件。代表日历的图标不像在您的煎茶小提琴中那样可见。关于如何将此组件集成到 extjs5 应用程序的任何建议？

看来我也无法显示原生 Ext.form.field.Date :D ！

@rajugaadu，似乎它们在 5 版本中是正确的，对于 4.2，我只需添加高度（236 像素）-返回 Ext.create('Ext.picker.Month', ... height:' 236px' ... );

【参考方案2】：

Extjs 5.1 更新： 添加到监听器：

afterrender : 
                    scope : me,
                    fn : function(c) 
                        var me = c;
                        me.el.on("mousedown", function(e) 
                            e.preventDefault();
                        , c);
                    
                ,

它可以防止主字段选择器丢失模糊。在原始版本中，如果您单击月份选择器，它的行为就像它失去了对日期选择器的关注，所以日期选择器会隐藏所有选择器。

【讨论】：

它拯救了我的一天。顺便说一句，从这个答案看来只有 Chrome 问题***.com/questions/28197217/month-field-on-extjs-5-1

添加此帮助以防止在 Chrome 中选择时不可见