2012-04-20 62 views
3

我有一个ExtJS日期字段。在应用程序的某些操作过程中,最小值和最大值分配给日期字段。最小值和最大值是当前dat前4年,但当日期选择器打开时,它将打开到禁用的当前日期。用户必须手动向后滚动4年才能选择日期。无论如何,我可以通过显示最小值和最大值之间的日期更新日期选择器打开?ExtJS DateField - 初始化日期

添加代码:

cmpDt.setMinValue(new Date(2000, 0, 1)); 
cmpDt.setMaxValue(new Date(2004, 0, 1)); 

此设置最低和最高值。我无法使用setValue(),因为它无效/更改了文本字段。我希望textfield只能从日期选择器中获取值。

感谢

回答

5

您可以选择使用Ext.form.field.DateViewvalue属性设置为初始值:

{ 
    ..., 
    minValue: new Date(2000, 0, 1), 
    maxValue: new Date(2004, 11, 31), 
    value: new Date(2002, 5, 15), 
    ... 
} 

编辑后从OP的详细信息:

,你可以覆盖onExpand方法初始化选取器上的值。原来的样子(假设你使用ExtJS的4 - 但3不应该是太大的不同):

..., 
onExpand: function() { 
    var value = this.getValue(); 
    this.picker.setValue(Ext.isDate(value) ? value : new Date()); 
}, 
... 

您可以覆盖的方法如下:

..., 
onExpand: function() { 
    var value = this.getValue(), 
     myDefaultDate = /* do some processing to determine the default date*/; 
    this.picker.setValue(Ext.isDate(value) ? value : myDefaultDate); 
}, 
... 

倍率只需添加到初始表单字段配置。

+0

我不能将它添加到初始配置中,因为最小值和最大值会在执行某些操作之间设置。 – Zaje 2012-04-20 07:26:41

+0

嗨, 执行上面的代码后,我的选择器没有扩展或填充extjs 4。 – Kanchan 2013-07-08 06:49:40

0

对于任何对这个问题的EXTJS 3解决方案感兴趣的人,我做了下面的代码。

这允许您在声明时将initialDateToShowOnPicker作为配置传递给Ext.DatePicker,如果需要的话。

它还允许您在datepicker组件上调用setInitialDateToShowOnPicker(initialDateToShowOnPicker)来动态设置它。

两者都需要使用Date()类型,并且datepicker上不能有已设置的值。

if (Ext.versionDetail && Ext.versionDetail.major == 3) { 

Ext.form.DateField.prototype.setInitialDateToShowOnPicker = function (initialDateToShowOnPicker) { 
    this.initialDateToShowOnPicker = initialDateToShowOnPicker; 
}; 

Ext.form.DateField.override({ 
    onTriggerClick: function() { 
     if(this.disabled){ 
      return; 
     } 
     if(this.menu == null){ 
      this.menu = new Ext.menu.DateMenu({ 
       hideOnClick: false, 
       focusOnSelect: false 
      }); 
     } 
     this.onFocus(); 
     Ext.apply(this.menu.picker, { 
      minDate : this.minValue, 
      maxDate : this.maxValue, 
      disabledDatesRE : this.disabledDatesRE, 
      disabledDatesText : this.disabledDatesText, 
      disabledDays : this.disabledDays, 
      disabledDaysText : this.disabledDaysText, 
      format : this.format, 
      showToday : this.showToday, 
      startDay: this.startDay, 
      minText : String.format(this.minText, this.formatDate(this.minValue)), 
      maxText : String.format(this.maxText, this.formatDate(this.maxValue)), 
      initialDateToShowOnPicker: this.initialDateToShowOnPicker // Date() type 
     }); 
     this.menu.picker.setValue(this.getValue() || this.initialDateToShowOnPicker || new Date()); 
     this.menu.show(this.el, "tl-bl?"); 
     this.menuEvents('on'); 
    } 
});  }