在EXt js 中如何设置日历控件,只显示月份和年份

请各位帮忙,
在EXt js 中如何设置日历控件,只显示月份和年份,
就当单击日历控件后只会显示年月,不显示号数
[b]问题补充:[/b]
当单击日历控件就直接出现 :查看图片附件 ,选择好后单击确定就可以得到年月,不应在选择几号

3个回答

楼主参照下面的代码即可,只需要看有注释的地方,即可帮你实现你的效果。
[code="java"]
Ext.override(Ext.DatePicker, {
onRender : function(container, position) {
var m = [
'

',
'',
'
   
'];
var dn = this.dayNames;
for (var i = 0; i < 7; i++) {
var d = this.startDay + i;
if (d > 6) {
d = d - 7;
}
m.push("");
}
m[m.length] = "";
for (var i = 0; i < 42; i++) {
if (i % 7 == 0 && i != 0) {
m[m.length] = "";
}
m[m.length] = '';
}
m[m.length] = '
", dn[d].substr(0, 1), "
';
    var el = document.createElement("div");
    el.className = "x-date-picker";
    el.innerHTML = m.join("");

    container.dom.insertBefore(el, position);

    this.el = Ext.get(el);
    this.eventEl = Ext.get(el.firstChild);

    new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {
        handler : this.showPrevMonth,
        scope : this,
        preventDefault : true,
        stopDefault : true
    });

    new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {
        handler : this.showNextMonth,
        scope : this,
        preventDefault : true,
        stopDefault : true
    });

    this.eventEl.on("mousewheel", this.handleMouseWheel, this);

    this.monthPicker = this.el.down('div.x-date-mp');
    this.monthPicker.enableDisplayMode('block');

    var kn = new Ext.KeyNav(this.eventEl, {
        "left" : function(e) {
            e.ctrlKey ? this.showPrevMonth() : this.update(this.activeDate
                    .add("d", -1));
        },

        "right" : function(e) {
            e.ctrlKey ? this.showNextMonth() : this.update(this.activeDate
                    .add("d", 1));
        },

        "up" : function(e) {
            e.ctrlKey ? this.showNextYear() : this.update(this.activeDate
                    .add("d", -7));
        },

        "down" : function(e) {
            e.ctrlKey ? this.showPrevYear() : this.update(this.activeDate
                    .add("d", 7));
        },

        "pageUp" : function(e) {
            this.showNextMonth();
        },

        "pageDown" : function(e) {
            this.showPrevMonth();
        },

        "enter" : function(e) {
            e.stopPropagation();
            return true;
        },

        scope : this
    });

    this.eventEl.on("click", this.handleDateClick, this, {
        delegate : "a.x-date-date"
    });

    this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,
            this);

    this.el.unselectable();

    this.cells = this.el.select("table.x-date-inner tbody td");
    this.textNodes = this.el.query("table.x-date-inner tbody span");

    this.mbtn = new Ext.Button({
        text : "&#160;",
        tooltip : this.monthYearText,
        renderTo : this.el.child("td.x-date-middle", true)
    });

    this.mbtn.on('click', this.showMonthPicker, this);
    this.mbtn.el.child(this.mbtn.menuClassTarget)
            .addClass("x-btn-with-menu");

    var today = (new Date()).dateFormat(this.format);
    this.todayBtn = new Ext.Button({
        renderTo : this.el.child("td.x-date-bottom", true),
        text : String.format(this.todayText, today),
        tooltip : String.format(this.todayTip, today),
        handler : this.selectToday,
        scope : this
    });

    if (Ext.isIE) {
        this.el.repaint();
    }
    this.update(this.value);
    //手动触发按钮,显示窗体。
    this.mbtn.getEl().dom.click();
},
onMonthClick : function(e, t) {
    e.stopEvent();
    var el = new Ext.Element(t), pn;
    if (el.is('button.x-date-mp-cancel')) {
        this.selectToday(this.value);   //关闭窗体
    } else if (el.is('button.x-date-mp-ok')) {
        //设置值
        this.value = new Date(this.mpSelYear, this.mpSelMonth,(this.activeDate || this.value).getDate());
        //调用值回显的方法,并将选择的值传递过去.最后关闭窗体
        this.selectToday(this.value);
        // this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
    } else if (pn = el.up('td.x-date-mp-month', 2)) {
        this.mpMonths.removeClass('x-date-mp-sel');
        pn.addClass('x-date-mp-sel');
        this.mpSelMonth = pn.dom.xmonth;
    } else if (pn = el.up('td.x-date-mp-year', 2)) {
        this.mpYears.removeClass('x-date-mp-sel');
        pn.addClass('x-date-mp-sel');
        this.mpSelYear = pn.dom.xyear;
    } else if (el.is('a.x-date-mp-prev')) {
        this.updateMPYear(this.mpyear - 10);
    } else if (el.is('a.x-date-mp-next')) {
        this.updateMPYear(this.mpyear + 10);
    }
},
hideMonthPicker : function(disableAnim) {
    //去掉这个方法,日期控件就不会显示年/月/日的界面了
    /*if (this.monthPicker) {
        if (disableAnim === true) {

            //this.monthPicker.hide();
        } else {
            // this.monthPicker.slideOut('t', {duration:.2});
        }
    }*/
},
selectToday : function(selDate) {
    this.setValue(new Date().clearTime());
    //这里的日期值从外部传入,更新value
    if (selDate != null && selDate != undefined && selDate != "") {
        this.setValue(selDate);
    }

    this.fireEvent("select", this, this.value);
}

})
[/code]

看了一下api没有相关配置选项,只能配置成那些日期不能选择.

自带的datefield好像不支持。
可以自己写一个控件,只显示年月的。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐