Question

如何突出显示extjs日历（日期时间选择器）控件中的特定日期，

默认情况下，它会在显示时突出显示系统日期。我需要将高亮日期设置为sql server date，因为它会有所不同。

是否有任何属性或覆盖方法可以更改突出显示日期？

注意：只在日历中突出显示，不要将该值设置为文本框。

Answer 1

你没有提到你正在使用的ExtJS版本，但我假设是3.x。

你问的不是很容易。您需要覆盖update类的Ext.DateField方法，因为在该函数中已完成突出显示。

具有当前日期的单元格被指定为x-date-today样式类，它在当前日期周围添加红色边框等。因此，如果您只想完全消除突出显示，请考虑覆盖样式定义那个班。

更新：特别要查找以下代码：

today = new Date().clearTime().getTime(),

在today函数中使用setCellClass变量以确定所选日期是否为“今天”（以及是否应突出显示）。因此，您需要在覆盖方法中为today变量指定不同的值。

Answer 2

如果您的问题是：如何在DateField控件的日历中设置不同的日期？

如果您使用自定义日期初始化DateField控件，则buildin DatePicker会将该值用作突出显示的日期。

{
    xtype: 'datefield',
    value: '2011-02-28'
}

使用以下方法查看Ext\src\widgets\form\DateField.js的源文件：

/**
 * @method onTriggerClick
 * @hide
 */
// private
// Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
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,
        minText : String.format(this.minText, this.formatDate(this.minValue)),
        maxText : String.format(this.maxText, this.formatDate(this.maxValue))
    });
    this.menu.picker.setValue(this.getValue() || new Date()); <--- LOOK HERE!!!
    this.menu.show(this.el, "tl-bl?");
    this.menuEvents('on');
},

但同样，我不确定我理解你的问题：）

Answer 3

我在文档中找不到有关使用预选日期初始化DatePicker控件的内容。

但你可以做以下事情：

xtype: 'datepicker',
listeners: 
{
    render: function(control) {
        control.setValue(new Date('1/10/2007'));
    }
}

我不知道哪种事件最适合这种初始化，但render事件对我有效：）

Happy Ext'ing。

Extjs Date Time Picker，HighLight特定日期而不是系统日期

3 个答案: