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

f2uvfpb9 于 2023-11-18 发布在其他

关注(0)|答案(3)|浏览(178)

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

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设置为第一个日期选择器中选择的日期，这样用户一旦选择了第一个日期，就不能选择过去的日期。我还想在用户在第一个日期选择器上选择日期后重置第二个日期。
如何指向在第一个元素上选择的日期？

extjs

来源：https://stackoverflow.com/questions/39656583/ext-js-handling-setting-mindate-of-a-datepicker-using-the-value-of-another-datep

3条答案

按热度按时间

kq4fsx7k1#

使用这个：

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

字符串

赞(0）回复(0）举报 2023-11-18

sulc1iza2#

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

型

赞(0）回复(0）举报 2023-11-18

sqougxex3#

对于任何试图将datefield的属性绑定到另一个字段的人来说，datefield似乎不会将任何属性发布到视图模型，除非你通过“publishes”配置指定它，如下所示：

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

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

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

3条答案

相关问题

热门标签

最新问答