Простой способ добавить сборщик даты в обычное текстовое поле? - PullRequest
Новая
       26

Простой способ добавить сборщик даты в обычное текстовое поле?

0 голосов
/ 23 апреля 2019

Я хотел бы добавить указатель даты в текстовое поле как часть построителя выражений. Например. Вы можете ввести что-то вроде:

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 на что-то маленькое и поле даты изменяет размеры.

Это только одна из многих проблем, есть обработка событий, вставка в курсор, уничтожение поля и т. Д., Так что это тоже будет много работы.

Мне интересно, кто-нибудь делал что-то подобное, и, может быть, есть более простой способ?

1 Ответ

1 голос
/ 23 апреля 2019

Как то так? : 

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

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