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

j8ag8udp 于 2022-09-26 发布在其他

关注(0)|答案(2)|浏览(122)

我想将日期选择器添加到文本字段中，作为表达式生成器的一部分。E、 g.您可以输入如下内容：
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调整为较小的值，日期字段将调整大小。
这只是众多问题中的一个，其中包括事件处理、在光标处插入、破坏字段等，因此也需要大量工作。
我想知道是否有人做过类似的事情，是否有更简单的方法？

extjs

来源：https://stackoverflow.com/questions/55816286/easy-way-to-add-a-date-picker-to-a-regular-text-field

2条答案

按热度按时间

snvhrwxg1#

像这样吗

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);

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

赞(0）回复(0）举报 2022-09-26

gpnt7bae2#

另一个解决方案是扩展Ext.form.field。Picker，查看Ext.form.field。约会，看看这是怎么做到的。
或者将“日期”字段的源（请参阅API文档）复制到您自己的组件中，因为它具有选择器、样式、格式等所需的组件。然后，您可以去掉日期验证和日期格式。

赞(0）回复(0）举报 2022-09-26