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

Question

我想将日期选择器作为表达式构建器的一部分添加到文本字段。例如。你可以输入类似：

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

then click a calendar trigger, and when a date is picked, have it insert the date at the cursor:

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

是这样的吗？ :

    Ext.application({
        name: 'Fiddle',
        launch: function () {

            var myPicker = Ext.create('Ext.picker.Date', {
                renderTo: Ext.getBody(),
                floating: true,
                defaultAlign: 't-b',
                minDate: new Date(),
            });

            Ext.create('Ext.form.Panel', {
                title: 'Expression Builder',
                width: 500,
                bodyPadding: 100,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Expression',
                    width: 300,
                    allowBlank: true,
                    triggers: {
                        calendar: {
                            cls: 'x-fa fa-calendar',
                            handler: function (me) {
                                var text = this
                                myPicker.handler =  function (picker, date) {
                                        text.setValue(text.getValue() + ' ' + Ext.Date.format(this.getValue(), 'd/m/Y'));
                                        this.hide();
                                };
                                myPicker.showBy(this);

                            }
                        }
                    }
                }]
            });
        }
    });

Answer 2

另一种解决方案是扩展 Ext.form.field.Picker，查看 Ext.form.field.Date 以了解它是如何实现的。

或者将日期字段的源代码复制到您自己的组件中，请参阅 API 文档，因为它具有选择器、样式、格式等所需的组件。然后您可以删除日期验证和日期格式。

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

Easy way to add a date picker to a regular text field?

extjs

extjs6

extjs6-classic