duhaisheng
duhaisheng
2009-03-20 11:04
浏览 775

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • weixin_42312248
    weixin_42312248 2009-03-20 14:50
    已采纳

    楼主参照下面的代码即可,只需要看有注释的地方,即可帮你实现你的效果。
    [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]

    点赞 评论
  • zhoujuan520
    zhoujuan520 2009-03-20 12:35

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

    点赞 评论
  • kxykkxyk
    kxykkxyk 2009-03-20 14:11

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

    点赞 评论

相关推荐