Ext JS datepicker, get a date range from two different calendars

Question

Good day all, I'm entering in a big EXT JS project and unluckily I'm totally nood in Ext js, I'm trying to learn as much as possible from tuts and examples, but I'm struck on this basic problem.

I have two different datepickers defined as follow:

items: {
                        xtype: 'panel',
                        layout: 'hbox',                    
                        items: [{
                            title: 'FROM',
                            margin: '5',
                            items: {
                                xtype: 'datepicker',
                                start: true,
                                reference: 'startDate',
                                maxDate: new Date(),
                                maxText: 'Future dates are not available',
                                bind: {
                                    value: '{startDate}'
                                },
                                showToday: false,
                                listeners: {
                                    select: 'checkDateInterval'
                                }
                            }
                        }, {
                            title: 'TO',
                            margin: '5',
                            items: {
                                xtype: 'datepicker',
                                start: false,
                                reference: 'endDate',
                                bind: {
                                    value: '{endDate}'
                                },
                                maxDate: new Date(),
                                showToday: false,
                                listeners: {
                                    select: 'checkDateInterval'
                                }
                            }
                        }]
                    }

I've succefully defined the controller, where I have done a simple "console.log()" of everything the datepicker passed me:

Ext.define('xxx.xxx.xxx.xxxxxxxSetupController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.investmentsetupcontroller',
    checkDateInterval: function (data){
        console.log("data: ", data);
    }
});

and that is working as expected. The only issue is that I received a whole object full of data in the console.log, and I imagine that there should be a easier way to get the two selected dates. May I ask you some advice to handle this? my goal is to get those two dates, makes some calculations and call another function with the data.

thanks in advance.

Answer 1

To achieve this you need use data.value your code will be like

checkDateInterval: function (data){
       console.log("data: ", data.value);
}

Also check the fiddle here. Fiddle