Question

我想将日期选择器添加到文本字段中，作为表达式生成器的一部分。例如。您可以输入以下内容：

date <= │（其中│是光标）

然后单击日历触发器，并选择日期后，将其插入光标处：

date <= 2019-04-23│

我研究了日期选择器的实现方式，那里有很多东西我必须复制。

因此，当时正在考虑在隐藏的日期字段上搭载，例如：

Ext.create('Ext.form.Panel', {
    title: 'Expression Builder',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Expression',
        allowBlank: true,
        triggers: {
            calendar: {
                cls: 'x-fa fa-calendar',
                handler: function (me) {
                    var itemId = me.id + '-aux-datefield';
                    var datefield = Ext.ComponentQuery.query('#' + itemId)[0] ||
                    Ext.create({
                        itemId: itemId,
                        xtype: 'datefield',
                        hideLabel: true,
                        floating: true,
                        renderTo: me.getEl(),
                        alignTarget: me.id,
                        defaultAlign: 'tr-tr'
                    });
                    datefield.onTriggerClick();
                }
            }
        }
    }]
});

问题是，如果使用hidden: true隐藏了日期字段，则选择器将不会呈现。使用像style: 'display: none'这样的偷偷摸摸的东西，并且选择器会对齐到视口的左上方。将maxHeight和maxWidth调整为较小值，然后调整日期字段的大小。

这只是许多问题之一，其中包括事件处理，在光标处插入，破坏字段等。因此，这还将需要很多工作。

我想知道是否有人做过类似的事情，也许还有更简单的方法？

Answer 1

像这样？：

Shell.Application

将日期选择器添加到常规文本字段的简单方法？

1 个答案: