我想要个这样的 带有时分秒的(xtype : 'datetimefield')
但是现实是这样的。。。。(xtype : 'datefield')
默认extjs6 是不支持datefield 的, 想要实现上述效果需要改造一下ext-all-debug.js
需要在ext-all-debug.js的最后追加一部分(新增部分)
引用方式:
{
xtype : 'datetimefield',
fieldLabel : '开始时间',
id:'startTime',
labelAlign : "right",
value : new Date()
}
/**↓↓↓↓↓↓↓↓↓新增的部分↓↓↓↓↓↓↓↓↓↓*/
//日期组件datetimefield带时分秒的
Ext.define('Ext.ux.DateTimeField', {
extend:'Ext.form.field.Date',
alias: 'widget.datetimefield',
requires: ['Ext.ux.DateTimePicker'],
format : "Y/m/d H:i:s",
altFormats : "Y/m/d H:i:s",
createPicker: function() {
var me = this, format = Ext.String.format;
return new Ext.ux.DateTimePicker({
pickerField: me,
floating: true,
hidden: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
ariaDisabledDatesText: me.ariaDisabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
ariaDisabledDaysText: me.ariaDisabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
ariaMinText: format(me.ariaMinText, me.formatDate(me.minValue, me.ariaFormat)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
ariaMaxText: format(me.ariaMaxText, me.formatDate(me.maxValue, me.ariaFormat)),
editable: true,
listeners: {
scope: me,
select: me.onSelect
},
keyNavConfig: {
esc: function() {
me.inputEl.focus();
me.collapse();
}
}
});
},
onMouseDown: function(e) {
//e.preventDefault();
console.dir('ssssss');
},
onExpand: function() {
var value = this.getValue();
this.picker.setValue(Ext.isDate(value) ? value : new Date(), true);
}
});
//日期组件datetimefield带时分秒的
Ext.define('Ext.ux.DateTimePicker', {
extend: 'Ext.picker.Date',
alias: 'widget.datetimepicker',
okText: '确定',
todayText: '今天',
focusable: true,
editable: true,
renderTpl: [
'<div id="{id}-innerEl" data-ref="outnerEl" role="presentation">',
'<div class="{baseCls}-header">',
'<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
'<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
'<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',
'</div>',
'<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0">',
'<thead>',
'<tr role="row">',
'<tpl for="dayNames">',
'<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
'<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
'</th>',
'</tpl>',
'</tr>',
'</thead>',
'<tbody>',
'<tr role="row">',
'<tpl for="days">',
'{#:this.isEndOfWeek}',
'<td role="gridcell">',
'<div hidefocus="on" class="{parent.baseCls}-date"></div>',
'</td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>',
'<center>',
'<table id="{id}-timeEl" data-ref="timeEl" style="width: auto; margin: 4px 15px;" class="x-datepicker-inner sys-timepicker-inner" cellspacing="0">',
'<tbody>',
'<tr>',
'<td>{%this.renderHourBtn(values,out)%}</td>',
'<td style="width: 16px; text-align: center; font-weight: bold;">:</td>',
'<td>{%this.renderMinuteBtn(values,out)%}</td>',
'<td style="width: 16px; text-align: center; font-weight: bold;">:</td>',
'<td>{%this.renderSecondBtn(values,out)%}</td>',
'</tr>',
'</tbody>',
'</table>',
'</center>',
'<tpl if="showToday">',
'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>',
'</tpl>',
// These elements are used with Assistive Technologies such as screen readers
'<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{todayText}.</div>',
'<div id="{id}-ariaMinText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMinText}.</div>',
'<div id="{id}-ariaMaxText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMaxText}.</div>',
'<div id="{id}-ariaDisabledDaysText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDaysText}.</div>',
'<div id="{id}-ariaDisabledDatesText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDatesText}.</div>',
'</div>',
{
firstInitial: function(value) {
return Ext.picker.Date.prototype.getDayInitial(value);
},
isEndOfWeek: function(value) {
// convert from 1 based index to 0 based
// by decrementing value once.
value--;
var end = value % 7 === 0 && value !== 0;
return end ? '</tr><tr role="row">' : '';
},
renderTodayBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
},
renderMonthBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
},
renderHourBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);
},
renderMinuteBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);
},
renderSecondBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);
},
renderOkBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);
}
}
],
beforeRender: function() {
var me = this, _$Number = Ext.form.field.Number, today = Ext.Date.format(new Date(), me.format),
ownerLayout = me.getComponentLayout()
;
me.hourBtn = new _$Number({
ownerCt: me,
ownerLayout: ownerLayout,
minValue: 0 ,
maxValue: 23,
step: 1,
width: 75,
enableKeyEvents: true,
editable : true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 59){
e.stopEvent();
field.setValue(59);
}
}
}
});
me.minuteBtn = new _$Number({
ownerCt: me,
ownerLayout: ownerLayout,
minValue: 0,
maxValue: 59,
step: 1,
width: 75
});
me.secondBtn = new _$Number({
ownerCt: me,
ownerLayout: ownerLayout,
minValue: 0,
maxValue: 59,
step: 1,
width: 75
});
me.okBtn = new Ext.button.Button({
ui: me.footerButtonUI,
ownerCt: me,
ownerLayout: ownerLayout,
text: me.okText,
tooltipType: 'title',
tabIndex: -1,
ariaRole: 'presentation',
handler: me.okHandler,
scope: me
});
me.callParent();
},
privates : {
finishRenderChildren: function() {
var me = this;
me.callParent();
me.hourBtn.finishRender();
me.minuteBtn.finishRender();
me.secondBtn.finishRender();
me.okBtn.finishRender();
}
},
okHandler: function() {
var me = this, btn = me.okBtn;
if(btn && !btn.disabled) {
me.setValue(this.getValue());
me.fireEvent('select', me, me.value);
me.onSelect();
}
return me;
},
selectedUpdate: function(date) {
this.callParent([Ext.Date.clearTime(date, true)]);
},
update: function(date, forceRefresh) {
var me = this;
me.hourBtn.setValue(date.getHours());
me.minuteBtn.setValue(date.getMinutes());
me.secondBtn.setValue(date.getSeconds());
return this.callParent(arguments);
},
setValue: function(date, isFixed) {
var me = this;
if(isFixed !== true) {
date.setHours(me.hourBtn.getValue());
date.setMinutes(me.minuteBtn.getValue());
date.setSeconds(me.secondBtn.getValue());
}
me.value = date;
me.update(me.value);
return me;
},
// @private
// @inheritdoc
beforeDestroy: function() {
var me = this;
if(me.rendered) {
Ext.destroy(
me.hourBtn,
me.minuteBtn,
me.secondBtn,
me.okBtn
);
}
me.callParent();
},
handleDateClick: function(e, t) {
var me = this, handler = me.handler;
e.stopEvent();
if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){
me.doCancelFocus = me.focusOnSelect === false;
me.setValue(new Date(t.dateValue));
delete me.doCancelFocus;
// by pass on select to keep the window open
me.fireEvent('select', me, me.value);
if (handler) {
handler.call(me.scope || me, me, me.value);
}
// event handling is turned off on hide
// when we are using the picker in a field
// therefore onSelect comes AFTER the select
// event.
me.onSelect();
}
}
});
/**↑↑↑↑↑↑↑↑↑↑↑↑↑新增的部分↑↑↑↑↑↑↑↑↑↑↑↑*/