Ext js handling setting minDate of a datepicker using the value of another datepicker

Question

Good day all. I'm doing a date range selection using two 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'
                                }
                            }
                        }]
                    }

What I'm trying to achieve is to set the minDate of the second datepicker as the date selected in the first one, so the user cannot select a date in the past once he selected the first date. I'd also like to reset the second date once the user select a date on the first datepicker.

how can I point to the date selected on the first element?

Answer 1

For anyone trying to bind properties of a datefield to another field, datefield seems to not be publishing any property to the viewmodel unless you specify it through the "publishes" config like this:

 items: [
            {
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'Desde',
                name: 'from_date',
                reference: 'fromDate',
                value: new Date(),  // defaults to today
                maxValue: new Date(),  // limited to the current date or prior
                publishes: 'rawValue' // String / String[] / Object
            },
            {
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'Hasta',
                name: 'to_date',
                reference: 'toDate',
                value: new Date(),  // defaults to today
                maxValue: new Date(),
                bind: {
                    minValue: '{fromDate.rawValue}'
                }
            }
]

Answer 2

Use this:

 {
     xtype: 'datefield',
     hidden: true,
     width: '17%',
     editable: false,
     tabIndex: 6,
     id: 'start',
     format: 'Y-m-d',
     minDate: new Date(),
     name: 'start_date',
     onTriggerClick: function() {
         var dt = this;
         var due = Ext.getCmp('Due');
         dt.setMaxValue(due.value);
         Ext.form.DateField.prototype.onTriggerClick.apply(dt, arguments);
     },
     listeners: {
         change: function(dp, date) {
             var due = Ext.getCmp('Due');
             due.setValue(date);
         }
     }
 }, {
     xtype: 'datefield',
     hidden: true,
     id: 'Due',
     editable: false,
     tabIndex: 8,
     width: '17%',
     format: 'Y-m-d',
     name: 'due_date',
     onTriggerClick: function() {
         var dt = this;
         dt.setMinValue(Ext.getCmp('start').value);
         Ext.form.DateField.prototype.onTriggerClick.apply(dt, arguments);
     },
     listeners: {
         change: function(dp, date) {
                 var start = Ext.getCmp('start');
                 start.setValue(date);
         }
     }
 }

Answer 3

The maxDate property is bindable, so you can just move the endDate minDate property to the bind config, pointing to startDate, like this

                        items: {
                            xtype: 'datepicker',
                            start: false,
                            reference: 'endDate',
                            bind: {
                                value: '{endDate}',
                                minDate: '{startDate}',
                            },
                            showToday: false,
                            listeners: {
                                select: 'checkDateInterval'
                            }
                        }

You can reset the endDate picker value in the checkDateInterval function of your controller.

var picker = this.getView().lookupReference('endDate');
picker.setValue(null);