How to show date in date column as link and on click of that how to show date picker?

Question

I am using Extjs 6.5.3 classic. I have grid, in which there are two date columns. Now I want to show that date column value as link and on click of that I want to show date picker to select date. I don't want to use row editor or cell editor. I just want to show date picker on click of date value. And after clicking on date picker date I want to show the updated value in grid.

Please help.

Thank you in advance.

Answer 1

You could do it like this, first, set up the column with a renderer:

{
    xtype:'column',
    header: "My Date",
    width: 90,
    sortable: true,     
    dataIndex: 'MyDateField',
    align: 'center',
    renderer: function (value,metaData){
            //Adjust date format as needed
            return '<a href="#" onclick="pickDate(event,'+metaData.record.data.ID+')" >'+value+'</a>';
    }
}

After that declare the pickDate function like this:

var pickDate = function(e,id){        
    Ext.create('Ext.window.Window', {        
    modal: true,    
    bodyPadding: 0,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'datepicker',
        minDate: new Date(),
            handler: function(picker, date) {
                  // do something with the selected date                                            
            }
        }]
    }).show().setPosition(e.x,e.y);
}

There are various aproaches, you could "pre" create this window and just show/position/hide for example.