CODEWITHSUNDEEP
extjsextjs6extjs6-classic
user2191247
user2191247

Reputation:

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

I'd like to add a date picker to a text field as part of an expression builder. E.g. you can enter something like:

date <= │ (where │ is the cursor)

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

date <= 2019-04-23│

I looked at how date picker is implemented, and it's a lot of stuff there that I would have to copy over.

So then was thinking about piggybacking on a hidden date field, something like this: 

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();
                }
            }
        }
    }]
});

Thing is, if the date field is hidden using hidden: true then the picker won't render. Using something sneaky like style: 'display: none' and the picker aligns to the top left of the viewport. Adjusting the maxHeight and maxWidth to something small and the date field resizes.

This is just one of many issues, there's event handling, inserting at the cursor, destroying the field, etc. so it's going to be a lot of work, too.

I'm wondering if anyone has done something similar, and if maybe there's an easier way?

Upvotes: 0

Views: 613

Answers (2)

David Broad
David Broad

Reputation: 1

Another solution would be to extend Ext.form.field.Picker, take a look at the Ext.form.field.Date to see how that does it.

Or copy the source for the Date field, see the API doc, to your own component, as that has the requisite components for the picker, style, formatting etc. You can then strip away the date validation and date formatting.

Upvotes: 0

Fabio Barros
Fabio Barros

Reputation: 1439

Something like this? :

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

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

Upvotes: 1

Related Questions