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

f2uvfpb9  于 2023-11-18  发布在  其他
关注(0)|答案(3)|浏览(220)

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

  1. items: {
  2.                         xtype: 'panel',
  3.                         layout: 'hbox',                    
  4.                         items: [{
  5.                             title: 'FROM',
  6.                             margin: '5',
  7.                             items: {
  8.                                 xtype: 'datepicker',
  9.                                 start: true,
  10.                                 reference: 'startDate',
  11.                                 maxDate: new Date(),
  12.                                 maxText: 'Future dates are not available',
  13.                                 bind: {
  14.                                     value: '{startDate}'
  15.                                 },
  16.                                 showToday: false,
  17.                                 listeners: {
  18.                                     select: 'checkDateInterval'
  19.                                 }
  20.                             }
  21.                         }, {
  22.                             title: 'TO',
  23.                             margin: '5',
  24.                             items: {
  25.                                 xtype: 'datepicker',
  26.                                 start: false,
  27.                                 reference: 'endDate',
  28.                                 bind: {
  29.                                     value: '{endDate}'
  30.                                 },
  31.                                 maxDate: new Date(),
  32.                                 showToday: false,
  33.                                 listeners: {
  34.                                     select: 'checkDateInterval'
  35.                                 }
  36.                             }
  37.                         }]
  38.                     }

字符串
我想实现的是将第二个日期选择器的minDate设置为第一个日期选择器中选择的日期，这样用户一旦选择了第一个日期，就不能选择过去的日期。我还想在用户在第一个日期选择器上选择日期后重置第二个日期。
如何指向在第一个元素上选择的日期？

extjs

3条答案

按热度按时间
kq4fsx7k

kq4fsx7k1#

使用这个：

  1. {
  2.      xtype: 'datefield',
  3.      hidden: true,
  4.      width: '17%',
  5.      editable: false,
  6.      tabIndex: 6,
  7.      id: 'start',
  8.      format: 'Y-m-d',
  9.      minDate: new Date(),
  10.      name: 'start_date',
  11.      onTriggerClick: function() {
  12.          var dt = this;
  13.          var due = Ext.getCmp('Due');
  14.          dt.setMaxValue(due.value);
  15.          Ext.form.DateField.prototype.onTriggerClick.apply(dt, arguments);
  16.      },
  17.      listeners: {
  18.          change: function(dp, date) {
  19.              var due = Ext.getCmp('Due');
  20.              due.setValue(date);
  21.          }
  22.      }
  23.  }, {
  24.      xtype: 'datefield',
  25.      hidden: true,
  26.      id: 'Due',
  27.      editable: false,
  28.      tabIndex: 8,
  29.      width: '17%',
  30.      format: 'Y-m-d',
  31.      name: 'due_date',
  32.      onTriggerClick: function() {
  33.          var dt = this;
  34.          dt.setMinValue(Ext.getCmp('start').value);
  35.          Ext.form.DateField.prototype.onTriggerClick.apply(dt, arguments);
  36.      },
  37.      listeners: {
  38.          change: function(dp, date) {
  39.                  var start = Ext.getCmp('start');
  40.                  start.setValue(date);
  41.          }
  42.      }
  43.  }

字符串

展开查看全部
赞(0）分享  回复(0）举报  2023-11-18
sulc1iza

sulc1iza2#

maxDate属性是可绑定的，因此您可以将endDate minDate属性移动到绑定配置中，指向startDate，如下所示

  1. items: {
  2.                             xtype: 'datepicker',
  3.                             start: false,
  4.                             reference: 'endDate',
  5.                             bind: {
  6.                                 value: '{endDate}',
  7.                                 minDate: '{startDate}',
  8.                             },
  9.                             showToday: false,
  10.                             listeners: {
  11.                                 select: 'checkDateInterval'
  12.                             }
  13.                         }

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

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

型

展开查看全部
赞(0）分享  回复(0）举报  2023-11-18
sqougxex

sqougxex3#

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

  1. items: [
  2.             {
  3.                 xtype: 'datefield',
  4.                 anchor: '100%',
  5.                 fieldLabel: 'Desde',
  6.                 name: 'from_date',
  7.                 reference: 'fromDate',
  8.                 value: new Date(),  // defaults to today
  9.                 maxValue: new Date(),  // limited to the current date or prior
  10.                 publishes: 'rawValue' // String / String[] / Object
  11.             },
  12.             {
  13.                 xtype: 'datefield',
  14.                 anchor: '100%',
  15.                 fieldLabel: 'Hasta',
  16.                 name: 'to_date',
  17.                 reference: 'toDate',
  18.                 value: new Date(),  // defaults to today
  19.                 maxValue: new Date(),
  20.                 bind: {
  21.                     minValue: '{fromDate.rawValue}'
  22.                 }
  23.             }
  24. ]

字符串

展开查看全部
赞(0）分享  回复(0）举报  2023-11-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com