Ext js 使用另一个日期选择器的值处理设置日期选择器的 minDate

Question

大家好。 我正在使用两个定义如下的日期选择器进行日期范围选择：

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'
                                }
                            }
                        }]
                    }

我想要实现的目标是将第二个日期选择器的 minDate 设置为第一个日期选择器中选择的日期，因此用户一旦选择第一个日期就无法选择过去的日期。 一旦用户在第一个日期选择器上选择日期，我还想重置第二个日期。

如何指向第一个元素上选择的日期？

Answer 1

使用这个：

 {
     xtype: '日期字段',
     隐藏：真实，
     宽度：'17%'，
     可编辑：假，
     选项卡索引：6，
     id: '开始',
     格式：'Y-m-d',
     minDate：新的日期（），
     名称：'开始日期'，
     onTriggerClick: 函数() {
         var dt = 这个;
         var due = Ext.getCmp('Due');
         dt.setMaxValue(due.value);
         Ext.form.DateField.prototype.onTriggerClick.apply(dt, 参数);
     },
     听众：{
         更改：函数（dp，日期）{
             var due = Ext.getCmp('Due');
             due.setValue(日期);
         }
     }
 }, {
     xtype: '日期字段',
     隐藏：真实，
     id: '到期',
     可编辑：假，
     标签索引：8，
     宽度：'17%'，
     格式：'Y-m-d',
     名称：'到期日期'，
     onTriggerClick: 函数() {
         var dt = 这个;
         dt.setMinValue(Ext.getCmp('start').value);
         Ext.form.DateField.prototype.onTriggerClick.apply(dt, 参数);
     },
     听众：{
         更改：函数（dp，日期）{
                 var start = Ext.getCmp('start');
                 开始.setValue(日期);
         }
     }
 }

Answer 2

maxDate 属性是可绑定的，因此您只需将 endDate minDate 属性移动到绑定配置，指向 startDate，就像这样

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

您可以在控制器的 checkDateInterval 函数中重置 endDate 选择器值。

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

Answer 3

对于任何尝试将日期字段的属性绑定到另一个字段的人来说，日期字段似乎不会发布任何属性，除非您通过“发布”配置指定它，如下所示：

项目：[ { xtype: '日期字段', 锚：'100%'， fieldLabel: '德斯德', 名称：'起始日期'， 参考： 'fromDate', value: new Date(), // 默认为今天 maxValue: new Date(), // 限制为当前日期或之前的日期 发布： 'rawValue' // String / String[] / Object }, { xtype: '日期字段', 锚：'100%'， fieldLabel: '哈斯塔', 名称：'截止日期'， 参考：“迄今为止”， value: new Date(), // 默认为今天 最大值：新日期（）， 绑定：{ 最小值：'{fromDate.rawValue}' } } ]