ExtJS 2.2测试通过 datefield加上时分秒的代码

Extjs之DateField控件的鼠标点击选取事件监控 Ext用的比较多的同志会发现一个问题,Extjs的DateField并没有提供'select'事件。而在我们的实际开发过程中,经常会需要去监控它,并进行后续的处理。在逼不得已的情况下,我们会用'change'时间去替代,但是该事件必须要datefield控件失去焦点时才触发,也就是说,需要用户选了日期之后,再在空白的地方点击一下鼠标才会触发值的改变事件。——这是无疑是非常别扭的。      通过 阅读详情

1、CSS中加上(图片路径自己修改就行,glass-bg.gif在ext包下面搜一下,肯定有。arrowLeft和arrowRight也在example里有):

.minutecss{
    padding:4px;
height:100%;
    border-top: 1px solid #a3bad9;
    background: #dfecfb url(../ext/resources/images/state/shared/glass-bg.gif) repeat-x left top;
}
.y-hour-middle,.y-hour-left,.y-hour-right {
font:bold 11px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
}


.y-hour-right, .y-hour-left {
width:18px;
}
.y-hour-right{
text-align:right;
}
.y-hour-middle {
padding-top:2px;
padding-bottom:2px;
color:#5C95FE;
}
.y-hour-right a, .y-hour-left a{
display:block;
width:16px;
height:16px;
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}


.y-hour-right a {
background-image: url(../images/arrowRight.gif);
margin-right:2px;
}
.y-hour-left a{
background-image: url(../images/arrowLeft.gif);
margin-left:2px;
}    
.y-minute-middle,.y-minute-left,.y-minute-right {
font:bold 11px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
}


.y-minute-right, .y-minute-left {
width:18px;
}
.y-minute-right{
text-align:right;
}
.y-minute-middle {
padding-top:2px;
padding-bottom:2px;
color:#5C95FE;
}
.y-minute-right a, .y-minute-left a{
display:block;
width:16px;
height:16px;
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}


.y-minute-right a {
background-image: url(../images/arrowRight.gif);
margin-right:2px;
}
.y-minute-left a{
background-image: url(../images/arrowLeft.gif);
margin-left:2px;
}   




.y-second-middle,.y-second-left,.y-second-right {
font:bold 11px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
}


.y-second-right, .y-second-left {
width:18px;
}
.y-second-right{
text-align:right;
}
.y-second-middle {
padding-top:2px;
padding-bottom:2px;
color:#5C95FE;
}
.y-second-right a, .y-second-left a{
display:block;
width:16px;
height:16px;
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}


.y-second-right a {
background-image: url(../images/arrowRight.gif);
margin-right:2px;
}
.y-second-left a{
background-image: url(../images/arrowLeft.gif);
margin-left:2px;
}

2.JS文件里加上如下代码

/********** CONSTRUCTOR ******
 * Parameters: as per Ext.DatePicker
 ****/
DatetimePicker = function(config){
/** Call superclass constructor **/
DatetimePicker.superclass.constructor.call(this, config);
};


// 重写datePicker
Ext.extend(DatetimePicker, Ext.DatePicker, {


/**
* Method Name: onRender
* Description: as per Ext.DatePicker's onRender, except renders year in its own cell with arrow-changers in additional columns
* Parameters: as per Ext.DatePicker's onRender
* Returns: n/a
* Throws: n/a
*/
// 点击今天 按钮
    selectToday : function(){
        this.setValue(new Date().clearTime());
var val1 = this.value;
val1.setHours(this.theHours);
val1.setMinutes(this.theMinutes);
val1.setSeconds(this.theSeconds);
        this.fireEvent("select", this, val1);
    },
// 选择某个日期
    handleDateClick : function(e, t){
        e.stopEvent();
        if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled")){
            this.setValue(new Date(t.dateValue));
var val1 = this.value;
val1.setHours(this.theHours);
val1.setMinutes(this.theMinutes);
val1.setSeconds(this.theSeconds);
            this.fireEvent("select", this, val1);
        }
    },
  onRender : function(container, position){
        var m = [
             '<table cellspacing="0">',
                '<tr><td colspan="3"><table cellspacing="0" width="100%"><tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr></table></td></tr>',
                '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
        var dn = this.dayNames;
        for(var i = 0; i < 7; i++){
            var d = this.startDay+i;
            if(d > 6){
                d = d-7;
            }
            m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
        }
        m[m.length] = "</tr></thead><tbody><tr>";
        for(i = 0; i < 42; i++) {
            if(i % 7 === 0 && i !== 0){
                m[m.length] = "</tr><tr>";
            }
            m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
        }
        
m[m.length] = '</tr></tbody></table></td></tr><tr><td class="minutecss"><table cellspacing="0" ><tr>';
m[m.length] = '<td class="y-hour-left"><a href="#" title="down"> </a></td><td class="y-hour-middle" align="center"></td><td class="y-hour-right"><a href="#" title="up"> </a></td>';
m[m.length] = '<td class="y-minute-left"><a href="#" title="down"> </a></td><td class="y-minute-middle" align="center"></td><td class="y-minute-right"><a href="#" title="up"> </a></td>';
m[m.length] = '<td class="y-second-left"><a href="#" title="down"> </a></td><td class="y-second-middle" align="center"></td><td class="y-second-right"><a href="#" title="up"> </a></td>';
m[m.length] = '</tr></table></td><td  colspan="2" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';

// 创建一个用于显示显示选择日期和时间的div
        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);

try{
// 24小时
var divHour = this.createSelectDiv(24,'时')
this.createSelectDiv(24,'时');
el.parentNode.appendChild(divHour);

// 60分
var divMinute = this.createSelectDiv(60,'分');
el.parentNode.appendChild(divMinute);

// 60秒
var divSecond = this.createSelectDiv(60,'秒');
el.parentNode.appendChild(divSecond);

// 点击小时
new Ext.util.ClickRepeater(this.el.child("td.y-hour-middle"), {
handler: function(){
divMinute.style.display = "none";
divSecond.style.display = "none";
divHour.style.display = "block";
divHour.style.top = 80+"px";
divHour.style.left = 0+"px";
}.createDelegate(this), 
scope: this
});

// 点击分钟
new Ext.util.ClickRepeater(this.el.child("td.y-minute-middle"), {
handler: function(){
divSecond.style.display = "none";
divHour.style.display = "none";
divMinute.style.display = "block";
divMinute.style.top = 100+"px";
divMinute.style.left = 50+"px";
}.createDelegate(this), 
scope: this
});

// 点击秒
new Ext.util.ClickRepeater(this.el.child("td.y-second-middle"), {
handler: function(){
divHour.style.display = "none";
divMinute.style.display = "none";
divSecond.style.display = "block";
divSecond.style.top = 100+"px";
divSecond.style.left = 120+"px";
}.createDelegate(this), 
scope: this
});
}catch(e){
alert(e.message);
}

//=====================日期左右选择
        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
        });
        
//=====================时左右选择
new Ext.util.ClickRepeater(this.el.child("td.y-hour-left a"), {
handler: function(){
this.hiddenSelectDiv(divHour,divMinute,divSecond);
// 如果当前小时为0,左点击后,变为24,在进入下一步
if(this.theHours == 0)
this.theHours = 24;
if(this.theHours>0){
this.theHours--;
this.theHours = this.theHours %24;
var txt = '';
if(this.theHours<10){
txt='0'+this.theHours;
}
else{
txt= this.theHours;
}
this.hourLabel.update(txt+'时');
}
}.createDelegate(this), 
scope: this
});
new Ext.util.ClickRepeater(this.el.child("td.y-hour-right a"), {
handler: function(){
this.hiddenSelectDiv(divHour,divMinute,divSecond);
this.theHours++;
this.theHours = this.theHours % 24;
var txt = '';
if(this.theHours<10){
txt='0'+this.theHours;
}
else{
txt= this.theHours;
}
this.hourLabel.update(txt+'时');
}.createDelegate(this), 
scope: this
});


//=====================分钟左右选择
new Ext.util.ClickRepeater(this.el.child("td.y-minute-left a"), {
handler: function(){
this.hiddenSelectDiv(divHour,divMinute,divSecond);
// 如果当前分钟为0,左点击后,变为60,在进入下一步
if(this.theMinutes == 0)
this.theMinutes = 60;
if(this.theMinutes>0){
this.theMinutes--;
this.theMinutes = this.theMinutes % 60;
var txt = '';
if(this.theMinutes<10){
txt='0'+this.theMinutes;
}
else{
txt= this.theMinutes;
}
this.minuteLabel.update(txt+'分');

}
}.createDelegate(this), 
scope: this
});
new Ext.util.ClickRepeater(this.el.child("td.y-minute-right a"), {
handler: function(){
this.hiddenSelectDiv(divHour,divMinute,divSecond);
this.theMinutes++;
this.theMinutes = this.theMinutes % 60;
var txt = '';
if(this.theMinutes<10){
txt='0'+this.theMinutes;
}
else{
txt= this.theMinutes;
}
this.minuteLabel.update(txt+'分');
}.createDelegate(this), 
scope: this
});


//=====================秒左右选择
new Ext.util.ClickRepeater(this.el.child("td.y-second-left a"), {
handler: function(){
this.hiddenSelectDiv(divHour,divMinute,divSecond);
// 如果当前秒为0,左点击后,变为60,在进入下一步
if(this.theSeconds == 0)
this.theSeconds = 60;
if(this.theSeconds>0){
this.theSeconds--;
this.theSeconds = this.theSeconds % 60;
var txt = '';
if(this.theSeconds<10){
txt='0'+this.theSeconds;
}
else{
txt= this.theSeconds;
}
this.secondLabel.update(txt+'秒');

}
}.createDelegate(this), 
scope: this
});
new Ext.util.ClickRepeater(this.el.child("td.y-second-right a"), {
handler: function(){
this.hiddenSelectDiv(divHour,divMinute,divSecond);
this.theSeconds++;
this.theSeconds = this.theSeconds % 60;
var txt = '';
if(this.theSeconds<10){
txt='0'+this.theSeconds;
}
else{
txt= this.theSeconds;
}
this.secondLabel.update(txt+'秒');
}.createDelegate(this), 
scope: this
});


        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 dt1 = new Date();
var txt = '';
this.hourLabel = this.el.child("td.y-hour-middle");
this.theHours = dt1.getHours();
if(this.theHours<10){
txt='0'+this.theHours;
}
else{
txt= this.theHours;
}
this.hourLabel.update(txt+'时');


this.minuteLabel = this.el.child("td.y-minute-middle");
this.theMinutes = dt1.getMinutes();
if(this.theMinutes<10){
txt='0'+this.theMinutes;
}
else{
txt= this.theMinutes;
}
this.minuteLabel.update(txt+'分');


this.secondLabel = this.el.child("td.y-second-middle");
this.theSeconds = dt1.getSeconds();
if(this.theSeconds<10){
txt='0'+this.theSeconds;
}
else{
txt= this.theSeconds;
}
this.secondLabel.update(txt+'秒');
        


        var today = (new Date()).dateFormat(this.format);
        var 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);
},


/**
* Method Name: update
* Description: as per Ext.DatePicker's update, except updates year label in its own cell
* Parameters: as per Ext.DatePicker's update
* Returns: n/a
* Throws: n/a
*/
update : function(date){
        var vd = this.activeDate;
        this.activeDate = date;
        if(vd && this.el){
            var t = date.getTime();
            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
                this.cells.removeClass("x-date-selected");
                this.cells.each(function(c){
                   if(c.dom.firstChild.dateValue == t){
                       c.addClass("x-date-selected");
                       setTimeout(function(){
                            try{c.dom.firstChild.focus();}catch(e){}
                       }, 50);
                       return false;
                   }
                });
                return;
            }
        }
        var days = date.getDaysInMonth();
        var firstOfMonth = date.getFirstDateOfMonth();
        var startingPos = firstOfMonth.getDay()-this.startDay;


        if(startingPos <= this.startDay){
            startingPos += 7;
        }


        var pm = date.add("mo", -1);
        var prevStart = pm.getDaysInMonth()-startingPos;


        var cells = this.cells.elements;
        var textEls = this.textNodes;
        days += startingPos;


        // convert everything to numbers so it's fast
        var day = 86400000;
        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
        var today = new Date().clearTime().getTime();
        var sel = date.clearTime().getTime();
        var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
        var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
        var ddMatch = this.disabledDatesRE;
        var ddText = this.disabledDatesText;
        var ddays = this.disabledDays ? this.disabledDays.join("") : false;
        var ddaysText = this.disabledDaysText;
        var format = this.format;


        var setCellClass = function(cal, cell){
            cell.title = "";
            var t = d.getTime();
            cell.firstChild.dateValue = t;
            if(t == today){
                cell.className += " x-date-today";
                cell.title = cal.todayText;
            }
            if(t == sel){
                cell.className += " x-date-selected";
                setTimeout(function(){
                    try{cell.firstChild.focus();}catch(e){}
                }, 50);
            }
            // disabling
            if(t < min) {
                cell.className = " x-date-disabled";
                cell.title = cal.minText;
                return;
            }
            if(t > max) {
                cell.className = " x-date-disabled";
                cell.title = cal.maxText;
                return;
            }
            if(ddays){
                if(ddays.indexOf(d.getDay()) != -1){
                    cell.title = ddaysText;
                    cell.className = " x-date-disabled";
                }
            }
            if(ddMatch && format){
                var fvalue = d.dateFormat(format);
                if(ddMatch.test(fvalue)){
                    cell.title = ddText.replace("%0", fvalue);
                    cell.className = " x-date-disabled";
                }
            }
        };


        var i = 0;
        for(; i < startingPos; i++) {
            textEls[i].innerHTML = (++prevStart);
            d.setDate(d.getDate()+1);
            cells[i].className = "x-date-prevday";
            setCellClass(this, cells[i]);
        }
        for(; i < days; i++){
            intDay = i - startingPos + 1;
            textEls[i].innerHTML = (intDay);
            d.setDate(d.getDate()+1);
            cells[i].className = "x-date-active";
            setCellClass(this, cells[i]);
        }
        var extraDays = 0;
        for(; i < 42; i++) {
             textEls[i].innerHTML = (++extraDays);
             d.setDate(d.getDate()+1);
             cells[i].className = "x-date-nextday";
             setCellClass(this, cells[i]);
        }


        this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());


if(this.theHours<10){
txt='0'+this.theHours;
}
else{
txt= this.theHours;
}
this.hourLabel.update(txt+'时');


if(this.theMinutes<10){
txt='0'+this.theMinutes;
}
else{
txt= this.theMinutes;
}
this.minuteLabel.update(txt+'分');

if(this.theSeconds<10){
txt='0'+this.theSeconds;
}
else{
txt= this.theSeconds;
}
this.secondLabel.update(txt+'秒');


        if(!this.internalRender){
            var main = this.el.dom.firstChild;
            var w = main.offsetWidth;
            this.el.setWidth(w + this.el.getBorderWidth("lr"));
            Ext.fly(main).setWidth(w);
            this.internalRender = true;
            // opera does not respect the auto grow header center column
            // then, after it gets a width opera refuses to recalculate
            // without a second pass
            if(Ext.isOpera && !this.secondPass){
                main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
                this.secondPass = true;
                this.update.defer(10, this, [date]);
            }
        }
},

/*
* 创建选择时、分、秒的div
*/
createSelectDiv : function(number,type){
var div = document.createElement("div");
        div.style.display = "none";
        div.style.position = "absolute";
        div.style.width = "50";
        div.style.backgroundColor = "white";
        div.style.border = "#86C9F0 1px solid";
var tbody = document.createElement("tbody");
var table = document.createElement("table");
table.appendChild(tbody);
var tr = document.createElement("tr");
var condition = number==24;
var instance = this;
        for(i=0;i<number;i++){
        var td = document.createElement("td");
    td.align = "center";
td.style.border = "#F0F7FF 2px solid";
    td.style.fontSize = "12px";
    td.appendChild(document.createTextNode(i+""));
    td.onclick = function(){
    var txt = this.firstChild.nodeValue;
    txt = (txt<10 ? '0':'') + txt;
    if(type == '时'){
    instance.hourLabel.update(txt+type);
    instance.theHours = this.firstChild.nodeValue;
    }else if(type == '分'){
    instance.minuteLabel.update(txt+type);
    instance.theMinutes = this.firstChild.nodeValue;
    }else if(type == '秒'){
    instance.secondLabel.update(txt+type);
    instance.theSeconds = this.firstChild.nodeValue;
    }
    div.style.display = "none";
    }
        if(condition){
if(i != 0 && i%6 == 0){
tbody.appendChild(tr);
// 重新创建tr
tr = document.createElement("tr");
}
tr.appendChild(td);
}else{
if(i%5 == 0){
if(i != 0 && i%20 == 0){
tbody.appendChild(tr);
// 重新创建tr
tr = document.createElement("tr");
}
tr.appendChild(td);
}
}
        }
        // 添加最后一个tr
        tbody.appendChild(tr);
        div.appendChild(table);
        return div;
},

/**
* 隐藏选择时分秒DIV
*/
hiddenSelectDiv : function(divHour,divMinute,divSecond){
divHour.style.display = "none";
divMinute.style.display = "none";
divSecond.style.display = "none";
},

// createTd : function(div,type){
// var td = document.createElement("td");
//     td.align = "center";
// td.style.border = "#F0F7FF 2px solid";
//     td.style.fontSize = "12px";
//     td.appendChild(document.createTextNode(i+""));
//     var instance = this;
//     td.onclick = function(){
//     if(type == '时'){
//     instance.hourLabel.update(this.firstChild.nodeValue+type);
//     instance.theHours = this.firstChild.nodeValue;
//     }else if(type == '分'){
//     instance.minuteLabel.update(this.firstChild.nodeValue+type);
//     instance.theMinutes = this.firstChild.nodeValue;
//     }else if(type == '秒'){
//     instance.secondLabel.update(this.firstChild.nodeValue+type);
//     instance.theSeconds = this.firstChild.nodeValue;
//     }
//     div.style.display = "none";
//     }
//     return td;
// },

/***** Public Instance Variables *****/

/**
* Variable Name: nextYearText, prevYearText
* Description: Hover text for the previous year and next year arrow changers
* Default: as shown
* Type: string
*/
nextYearText: 'Next Year (Control+Up)',
prevYearText: 'Previous Year (Control+Down)'
});




/** Class Name: DatetimeItem
 * Inherits From: Ext.menu.Adapter
 * Contains: DatetimePicker
 * Purpose: Effectively overrides Ext.menu.DateItem so that it contains DatetimePicker instead of Ext.DatePicker
 * Note: ORIGINAL and NEW comments are used to denote what differs from Ext.menu.DateItem
 */
DatetimeItem = function(config){
DatetimeItem.superclass.constructor.call(this , config);
//this.picker = new DatetimePicker(config);
this.component = new DatetimePicker(config);
this.picker = this.component;
this.addEvents({select: true});


this.picker.on("render", function(picker){
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});


this.picker.on("select", this.onSelect, this);
};
Ext.extend(DatetimeItem, Ext.menu.BaseItem, {
    // private
    canActivate : true,


    // private
    onRender : function(container, position){
        this.component.render(container);
        this.el = this.component.getEl();
    },


    // private
    activate : function(){
        if(this.disabled){
            return false;
        }
        this.component.focus();
        this.fireEvent("activate", this);
        return true;
    },


    // private
    deactivate : function(){
        this.fireEvent("deactivate", this);
    },


    // private
    disable : function(){
        this.component.disable();
        DatetimeItem.superclass.disable.call(this);
    },
    // private
    enable : function(){
        this.component.enable();
        DatetimeItem.superclass.enable.call(this);
    }
    ,
    onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);


if(this.parentMenu && this.parentMenu.hide)
DatetimeItem.superclass.handleClick.call(this);
}
});
/*
Ext.extend(DatetimeItem, Ext.menu.Adapter, {
onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);
// ORIGINAL:
//Ext.menu.DateItem.superclass.handleClick.call(this);
// NEW:
DatetimeItem.superclass.handleClick.call(this);
// END NEW
}
});
*/


/** Class Name: DatetimeMenu
 * Inherits From: Ext.menu.Menu
 * Contains: DatetimeItem
 * Purpose: Effectively overrides Ext.menu.DateMenu so that it contains DatetimeItem instead of Ext.menu.DateItem
 * Note: ORIGINAL and NEW comments are used to denote what differs from Ext.menu.DateMenu
 */
DatetimeMenu = function(config){
// ORIGINAL:
//Ext.menu.DateMenu.superclass.constructor.call(this, config);
//this.plain = true;
//var di = new Ext.menu.DateItem(config);
// NEW:
DatetimeMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new DatetimeItem(config);
// END NEW
this.add(di);
this.picker = di.picker;
// this.picker = di.component;
this.relayEvents(di, ["select"]);
};
Ext.extend(DatetimeMenu, Ext.menu.Menu);

3.应用案例:

{
name:"inEndDate",
fieldLabel:"终止时间",
xtype:"datefield",
format:"Y-m-d H:i:s",
typeAhead : true,
//editable:false,
readOnly:true,
allowBlank:false,
menu:new DatetimeMenu(),
blankText:"公告终止时间不能为空"
}

搞定!

EXTJS日期扩展年月和年月日时分秒 从网上搜集的一些好用的js文件。分享给爱好EXTJS的同胞们! EXTJS4.0文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) EXTJS4.1文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.1.html (这个只在EXTJS4.1下显示可以) 具体使用可以查看html文件里面的具体写法和要引入的相关的js文件。 注:这些功能在IE6 、 IE8 、 Firefox 以及google 浏览器下测试没有问题! 立即下载

相关推荐

ext 时间控件带有时分秒的控件

ext中的日期控件没有十分秒,这个控件加入了时分秒的选择

ExtJs 基于ExtJs2.2以上的日期时间选择控件datetimefield

自己收集了一个ExtJs的日期时间选择空间,网上流传了很多版本,自己做了一点改,我的3.4版本的项目中使用都还正常。 这个适用于2.0以上的版本。以下是源码。 Ext.ns('Ext.ux.form');    Ext.ux.form.TimePickerField = function(config){       Ext.ux.form.TimePickerField.supe

对信仰的忠诚丶 3864

extjs4.2日期控件datefield拓展加上选择时分秒功能

在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,压缩包里面含有效果示例图和调用方式。

extjs 中时间控件中 时分秒

官方网站中对日期控件进行的扩展: cls.js /* * Ext-cls * Authors : Jerome CARBOU */ Ext.namespace('Cls','Cls.form','Cls.menu'); Cls.form.DateTimeField = Ext.e...

415

extjs中dateField日期精确到时分秒的扩展控件

NULL 博文链接:https://zhaolianyang.iteye.com/blog/852544

搭建PX4开发系统(Ubuntu 22.04)

本文是《从零开始学 PX4 无人机开发》系列第二篇,适合开发者在 Ubuntu 系统下快速搭建 PX4 编译与仿真环境,支持 QGroundControl、Gazebo、MAVSDK 等完整工具链。

qq_15856721的博客 4198

3hutool源码分析:DateUtil(时间工具类)-获取日期的各种内容

知其然,知其所以然:3hutool源码分析:DateUtil(时间工具类)-获取日期的各种内容

小虚竹的专栏 3万+

电影台词预测类型:NLP小样本多标签分类实战

电影类型预测本质上是短文本语义建模问题,核心在于从高度碎片化、低语义密度的台词(平均仅12.7词)中挖掘隐含的类型学编码规则。其技术难点在于:需应对省略主语、倒装、拟声词等非规范表达;处理Drama与Comedy等类型强共现的多标签耦合;并克服领域迁移障碍——维基文本预训练模型在台词上性能骤降0.11。解决方案聚焦RoBERTa微调、类型感知注意力机制与标签平滑策略,兼顾小样本鲁棒性与业务可解释性,广泛适用于影视元数据标注、智能推荐系统及NLP教学实践。

weixin_33309048的博客 287

Django笔记二十五之数据库函数之日期函数

日期函数主要介绍两个大类,Extract() 和 Trunc()Extract() 函数作用是提取日期,比如我们可以提取一个日期字段的年份,月份,日等数据Trunc() 的作用则是截取,比如 ,我们可以根据需求获取到日期 2020-06-18,或者更细粒度到时分秒这次我们用到下面这个 model: 我们还是将其放到 blog/models.py 下,相关的 migration 操作这里不多做介绍这个函数接受日期时间字段名称,和查询的年、月、日、时、分、秒等作为参数,提取出相应的值以整数类型返回日期类型字段包

weixin_43354181的博客 1209

Windows本地化部署Dify完整指南

本文详细介绍了在Windows系统上本地化部署Dify的完整步骤,涵盖了Docker Desktop的安装与配置、Dify源代码的获取、环境变量的设置、服务的启动与管理、以及常见问题的解决方案。文章首先指导用户如何下载和安装Docker Desktop,并配置WSL 2功能。接着,详细说明了如何获取Dify源代码,并通过Docker Compose启动服务。文章还提供了高级配置指南,包括如何配置大语言模型和更新Dify版本。最后,针对Docker镜像拉取失败等常见问题,提供了详细的诊断和解决方案。通过本文,

jacky_zhuyuanlu的博客 1万+

阿里云习题多选部分459道

比如: UserA的用户在杭州有一台经典网络的ECS云服务器InstanceA (内网IP: A.A.A),InstanceA所属的默认安全组为GroupA, UserB的用户在杭州有一台经 典网络的ECS云服务器InstanceB(内网IP:B.B.B),InstanceB所属的默认安全组为GroupB。43.创建阿里云的云服务器ECS实例之前,需要对ECS实例的配置进行选型,阿里云为用户提供了推荐的配置组合方案来满足大部分用户的需求,这些推荐配置只是作为开始使用云服务器ECS实例的参考。

2501_91384465的博客 1309

6hutool实战:DateUtil(时间工具类)-时间偏移量获取

hutool实战:包含但不限于获取年,季度,月,周,日,时,分,秒,毫秒的开始时间和结束时间。 关键字:java java JAVA hutool hutool Hutool 工具类 工具类 工具类 DateUtil DateUtil DateUtil

小虚竹的专栏 2万+

DC-DC BUCK电路 PCB 布局布线 5 要点:以 XL4015 12V转5V 为例解析噪声控制

本文以XL4015 12V转5V降压电路为例,详细解析DC-DC BUCK电路PCB布局布线的5个关键要点,重点探讨噪声控制策略。通过功率回路最小化、热管理与接地优化、电感电容布局、反馈网络防干扰设计以及实测验证技巧,帮助工程师实现高效稳定的电源设计,显著降低输出纹波和电磁干扰。

weixin_29165725的博客 369

EXTJS 中的 DateField 和 Date 使用方法

    今天组里给了一个做界面的任务,用的是EXTJS。 界面很简单,就是一个 ComboBox 和几个 TextFiled 外加两个 DateField。ComboBox 和 TextField 就不说了,说一下 DateField 在使用过程中遇到的一些问题和解决方法。两个 DateField 用于确定查询条件的时间范围。要有缺省值。于是想把一个日期设为当前日期,另一个为两天前的日期。

kaihua_86的专栏 5724

C++ 核电站

问题描述 一个核电站有n个放核物质的坑,排列在一条直线上。如果连续m个坑中放入核物质就会发生爆炸,所以某些坑中不能放核物质。 本题的任务:对于给定的n和m,求不发生爆炸的放置核物质的方案总数。 输入格式 第一行两个正整数n和m,之间用一个空格隔开。2≤n≤50,2≤m≤5。 输出格式 一行一个正整数,表示方案总数。 输入样例 4 3 输出样例 13 数据规模与约定 2≤n≤50,2≤m≤5 CODE #include<bits/stdc++.h> using namespace

HybridCOW_HORSE的博客 1803

渗透测试之哥斯拉实战

可以直接在这里使用meterpreter命令进行对服务端的控制。选择目标 - 添加,配置连接信息,之后测试连接成功!php的shell功能如图。先要进行数据库的配置信息。可以直接在这里打包全站。

大河之犬的博客 2488

ExtJS4 日历控件datefield 解决选择时间一天

ExtJS 4.07  datefield控件没有提供我们选择 时期的时分秒,网上有很多人进行二次封装,可以面板中选择时分秒,需要的不难搜到,这里要解决的是如何选择一天内时间问题:    起始时间:2012-08-31 00:00:00    终止时间:2012-08-30 23:59:59 代码如下: Ext.create('Ext.form.Panel', { ren

origin 专栏 1万+

论文翻译:2024 High-Confidence Computing A survey on large language model (LLM) security and privacy: The

大型语言模型(LLMs),如ChatGPT和Bard,已经彻底改变了自然语言理解和生成。它们具有深度语言理解能力、类似人类的文本生成能力、上下文意识和强大的问题解决技能,使它们在各个领域(例如搜索引擎、客户支持、翻译)中变得不可或缺。同时,LLMs也在安全领域获得了关注,揭示了安全漏洞并展示了它们在安全相关任务中的潜力。本文探讨了LLMs与安全性和隐私的交集。具体来说,我们研究了LLMs如何积极影响安全性和隐私,与它们使用相关的潜在风险和威胁,以及LLMs内部的固有漏洞。

CSPhD-winston的博客 1722

extjs datefield 后台传值 格式转化方法

extjs datefield 后台 日期 传值 取值 格式 转换

jsjxieyang的专栏 9063

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

格式化extjs DateField 的值

extjs DateField 的值用getValue()方法获取后是一大堆字符串,类似Tue Dec 07 2010 00:00:00 GMT 0800,这玩意存入数据库实在不好办。。。所以要把它格式化一下,方法很简单,用EXT的 Ext.util.Format.date()方法 示例: var gedt = Ext.util.Format.date(日期控件.getValue()

隋旭峰的专栏 1万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

Extjs基础(一)

1.1基础学习 说明: 本示例的所有代码均在extjs6.2版本上测试通过,学习内容来源于官方文档和自己的一些见解。 1.1.1window组件 简单的一个window面板: title: '窗口标题', height: 220, //可以使用百分比 width: 220, html: '内容部分', resizable: true, //允许改变大小 ...

weixin_43686925的博客 6846

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Extjs extjs datefield日期格式

extjs DateField 的值用getValue()方法获取后是一大堆字符串,类似Tue Dec 07 2010 00:00:00 GMT 0800,这玩意存入数据库实在不好办。。。所以要把它格式化一下,方法很简单,用EXT的 Ext.util.Format.date()方法 示例: var gedt = Ext.util.Format.date(日期控件.getValue()

luckypeng的专栏 1336

EXTJS 6 日期组件 日期时间组件(Y-m-d H:i:s)

我想要个这样的 带有时分秒的(xtype : 'datetimefield') 但是现实是这样的。。。。(xtype : 'datefield') 默认extjs6 是不支持datefield 的, 想要实现上述效果需要改造一下ext-all-debug.js 需要在ext-all-debug.js的最后追加一部分(新增部分) 引用方式: ...

seasidexin的专栏 2849

ExtJs日期datefield控件设置默认值

ExtJs日期datefield控件设置默认值 标签: extjs4datefield控件 2014-04-22 11:00 14421人阅读 评论(0) 收藏 举报  分类: Extjs(10)  版权声明:本文为博主原创文章,未经博主允许不得转载。 如果是extjs4 datefield日期控件设置默认值,为当天的前一月,和后一

evilcry2012的专栏 6347

extjs 月份选择控件_Ext DateField控件 - 只选择年月

效果HTML代码:MonthPickerJavaScript代码://MonthPickerPlugin.js文件,年月选择的关键代码Ext.ux.MonthPickerPlugin = function() {var picker;var oldDateDefaults;this.init = function(pk) {picker = pk;picker.onTriggerClick = p...

weixin_29196891的博客 822

Extjs 使用技巧接龙

extjs Ext.form.ComboBox 的设置默认值的问题Ext.onReady(function(){ var dbConnectionRecord = Ext.data.Record.create([     {name: 'dbConnectionKey',type:"string",mapping:"dbConnectionKey"},     {name: 'name',type:"string",mapping:"name"} ]); var dataProxy=new Ext.data

traceofsun的专栏 2713
上一篇: 日期格式参考extjs api文档中的Date类型
下一篇: EXTJS 从grid 读取一行数据显示在formpanel中的 date问题
kunlong0909
博客等级 码龄17年 234粉丝 33原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值