PS:ExtJS自带的日期选择控件只能够选择日期，但是现在的需求需要精确到秒，所以在网上搜索了一些例子（大部分是4.0的）作为参考，然后改出了6.0可用的一个日期时间选择控件。
1、找到extjs6.0源代码中Picker文件路径下的Date.js脚本（路径：ext-6.0.0-gpl\ext-6.0.0\classic\classic\src\picker），拷贝一份出来命名为DateTimePicker.js
2、修改命名空间（把白色底的改成黑色底的命名空间以及别名，你也可以修改为自己存放该文件的路径，名称也可以自己命名）
3、定位到showToday模块
把原来的：'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
替换成：'<div id="{id}-footerEl" role="presentation" style="background-color:#D9E5F3;border-top:0px solid #99BCE8;">{%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}<center>{%this.renderOkQueDingBtn(values, out)%} {%this.renderTodayBtn(values, out)%}</center></div>',
也就是增加 时、分、秒、OK控件
'<tpl if="showToday">',
//'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
'<div id="{id}-footerEl" role="presentation" style="background-color:#D9E5F3;border-top:0px solid #99BCE8;">{%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}<center>{%this.renderOkQueDingBtn(values, out)%} {%this.renderTodayBtn(values, out)%}</center></div>',
'</tpl>',
4、添加时、分、秒、OK控件的渲染事件
longDay: function(value){
return Ext.Date.format(value, this.longDayFormat);
},
renderHour: function(values, out) {
out.push('<font style="float : left;">  </font>');
Ext.DomHelper.generateMarkup(values.$comp.hour.getRenderTree(), out);
},
renderMinute: function(values, out) {
out.push('<font style="float : left;font-weight:bold;"> :  </font>');
Ext.DomHelper.generateMarkup(values.$comp.minute.getRenderTree(), out);
},
renderSecond: function(values, out) {
out.push('<font style="float : left;font-weight:bold;"> :  </font>');
Ext.DomHelper.generateMarkup(values.$comp.second.getRenderTree(), out);
},
renderOkQueDingBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.okQueDingBtn.getRenderTree(), out);
},
5、在beforeRender事件中，添加时、分、秒、OK控件的事件
me.monthBtn = new Ext.button.Split({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: '',
tooltip: me.monthYearText,
tabIndex: -1,
ariaRole: 'presentation',
listeners: {
click: me.doShowMonthPicker,
arrowclick: me.doShowMonthPicker,
scope: me
}
});
me.hour = Ext.create('Ext.form.field.Number', {
scope: me,
ownerCt: me,
editable : true,
ownerLayout: me.getComponentLayout(),
minValue: 0,
maxValue: 23,
width: 70,
style : {float:"left"},
enableKeyEvents: true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 23){
e.stopEvent();
field.setValue(23);
}
}
}
});
me.minute = Ext.create('Ext.form.field.Number', {
scope: me,
ownerCt: me,
style : {float:"left"},
ownerLayout: me.getComponentLayout(),
minValue: 0,
maxValue: 59,
editable : true,
width: 70,
enableKeyEvents: true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 59){
e.stopEvent();
field.setValue(59);
}
}
}
});
me.second = Ext.create('Ext.form.field.Number', {
scope: me,
ownerCt: me,
editable : true,
style : {float:"left"},
ownerLayout: me.getComponentLayout(),
minValue: 0,
maxValue: 59,
width: 70,
enableKeyEvents: true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 59){
e.stopEvent();
field.setValue(59);
}
}
}
});
me.okQueDingBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: me.okText,
tooltip: me.okTip,
tooltipType:'title',
handler:me.okQueDingHandler,//确认按钮的事件委托
scope: me
});
6、添加OK按钮处理事件
/**
* 确认 按钮触发的调用
*/
okQueDingHandler : function(){
var me = this,
btn = me.okQueDingBtn; if(btn && !btn.disabled){
me.setValue(this.getValue());
me.fireEvent('select', me, me.value);
me.onSelect();
}
return me;
},
7、在update事件中添加更新时间的事件
date.setHours(me.hour.getValue());
date.setMinutes(me.minute.getValue());
date.setSeconds(me.second.getValue());
8、在beforeDestroy释放事件中添加释放OK按钮的事件
beforeDestroy: function() {
var me = this;
if (me.rendered) {
Ext.destroy(
me.keyNav,
me.monthPicker,
me.monthBtn,
me.nextRepeater,
me.prevRepeater,
me.todayBtn,
me.okQueDingBtn,
me.todayElSpan
);
delete me.textNodes;
delete me.cells.elements;
}
me.callParent();
},
9、添加其他释放事件
finishRenderChildren: function () {
var me = this;
me.callParent();
me.monthBtn.finishRender();
me.okQueDingBtn.finishRender();
if (me.showToday) {
me.todayBtn.finishRender();
}
//添加时间相关
this.hour.finishRender();
this.minute.finishRender();
this.second.finishRender();
},
10、到此Date.js脚本就改造完毕了下面是完整的DateTimePicker.js脚本
/**
* A date picker. This class is used by the Ext.form.field.Date field to allow browsing and selection of valid
* dates in a popup next to the field, but may also be used with other components.
*
* Typically you will need to implement a handler function to be notified when the user chooses a date from the picker;
* you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.
*
* By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
* {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.
*
* All the string values documented below may be overridden by including an Ext locale file in your page.
*
* @example
* Ext.create('Ext.panel.Panel', {
* title: 'Choose a future date:',
* width: 200,
* bodyPadding: 10,
* renderTo: Ext.getBody(),
* items: [{
* xtype: 'datepicker',
* minDate: new Date(),
* handler: function(picker, date) {
* // do something with the selected date
* }
* }]
* });
*/
Ext.define('Ext.ux.DateTimePicker', {
extend: 'Ext.Component',
alias: 'widget.datetimepicker',
alternateClassName: 'Ext.DateTimePicker',
requires: [
'Ext.XTemplate',
'Ext.button.Button',
'Ext.button.Split',
'Ext.util.ClickRepeater',
'Ext.util.KeyNav',
'Ext.fx.Manager',
'Ext.picker.Month'
], //<locale>
/**
* @cfg {String} todayText
* The text to display on the button that selects the current date
*/
todayText: 'Today',
//添加确定按钮
okText:'Ok',
okTip:'Ok',
//</locale> //<locale>
/**
* @cfg {String} ariaTitle
* The text to display for the aria title
*/
ariaTitle: 'Date Picker: {0}',
//</locale> //<locale>
/**
* @cfg {String} ariaTitleDateFormat
* The date format to display for the current value in the {@link #ariaTitle}
*/
ariaTitleDateFormat: 'F d',
//</locale> /**
* @cfg {Function} handler
* Optional. A function that will handle the select event of this picker. The handler is passed the following
* parameters:
*
* - `picker` : Ext.picker.Date
*
* This Date picker.
*
* - `date` : Date
*
* The selected date.
*/ /**
* @cfg {Object} scope
* The scope (`this` reference) in which the `{@link #handler}` function will be called.
*
* Defaults to this DatePicker instance.
*/ //<locale>
/**
* @cfg {String} todayTip
* A string used to format the message for displaying in a tooltip over the button that selects the current date.
* The `{0}` token in string is replaced by today's date.
*/
todayTip: '{0} (Spacebar)',
//</locale> //<locale>
/**
* @cfg {String} minText
* The error text to display if the minDate validation fails.
*/
minText: 'This date is before the minimum date',
//</locale> //<locale>
/**
* @cfg {String} ariaMinText The text that will be announced by Assistive Technologies
* such as screen readers when user is navigating to the cell which date is less than
* {@link #minDate}.
*/
ariaMinText: "This date is before the minimum date",
//</locale> //<locale>
/**
* @cfg {String} maxText
* The error text to display if the maxDate validation fails.
*/
maxText: 'This date is after the maximum date',
//</locale> //<locale>
/**
* @cfg {String} ariaMaxText The text that will be announced by Assistive Technologies
* such as screen readers when user is navigating to the cell which date is later than
* {@link #maxDate}.
*/
ariaMaxText: "This date is after the maximum date",
//</locale> /**
* @cfg {String} format
* The default date format string which can be overriden for localization support. The format must be valid
* according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
*/ //<locale>
/**
* @cfg {String} disabledDaysText
* The tooltip to display when the date falls on a disabled day.
*/
disabledDaysText: 'Disabled',
//</locale> //<locale>
/**
* @cfg {String} ariaDisabledDaysText The text that Assistive Technologies such as screen readers
* will announce when the date falls on a disabled day of week.
*/
ariaDisabledDaysText: "This day of week is disabled",
//</locale> //<locale>
/**
* @cfg {String} disabledDatesText
* The tooltip text to display when the date falls on a disabled date.
*/
disabledDatesText: 'Disabled',
//</locale> //<locale>
/**
* @cfg {String} ariaDisabledDatesText The text that Assistive Technologies such as screen readers
* will announce when the date falls on a disabled date.
*/
ariaDisabledDatesText: "This date is disabled", //</locale>
/**
* @cfg {String[]} monthNames
* An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
* @deprecated This config is deprecated. In future the month names will be retrieved from {@link Ext.Date}
*/ /**
* @cfg {String[]} dayNames
* An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
* @deprecated This config is deprecated. In future the day names will be retrieved from {@link Ext.Date}
*/ //<locale>
/**
* @cfg {String} nextText
* The next month navigation button tooltip
*/
nextText: 'Next Month (Control+Right)',
//</locale> //<locale>
/**
* @cfg {String} prevText
* The previous month navigation button tooltip
*/
prevText: 'Previous Month (Control+Left)',
//</locale> //<locale>
/**
* @cfg {String} monthYearText
* The header month selector tooltip
*/
monthYearText: 'Choose a month (Control+Up/Down to move years)',
//</locale> //<locale>
/**
* @cfg {String} monthYearFormat
* The date format for the header month
*/
monthYearFormat: 'F Y',
//</locale> //<locale>
/**
* @cfg {Number} [startDay=undefined]
* Day index at which the week should begin, 0-based.
*
* Defaults to `0` (Sunday).
*/
startDay: 0,
//</locale> //<locale>
/**
* @cfg {Boolean} showToday
* False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that
* selects the current date.
*/
showToday: true,
//</locale> /**
* @cfg {Date} [minDate=null]
* Minimum allowable date (JavaScript date object)
*/ /**
* @cfg {Date} [maxDate=null]
* Maximum allowable date (JavaScript date object)
*/ /**
* @cfg {Number[]} [disabledDays=null]
* An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.
*/ /**
* @cfg {RegExp} [disabledDatesRE=null]
* JavaScript regular expression used to disable a pattern of dates. The {@link #disabledDates}
* config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
* disabledDates value.
*/ /**
* @cfg {String[]} disabledDates
* An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular expression so
* they are very powerful. Some examples:
*
* - ['03/08/2003', '09/16/2003'] would disable those exact dates
* - ['03/08', '09/16'] would disable those days for every year
* - ['^03/08'] would only match the beginning (useful if you are using short years)
* - ['03/../2006'] would disable every day in March 2006
* - ['^03'] would disable every day in every March
*
* Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
* to support regular expressions, if you are using a date format that has '.' in it, you will have to escape the
* dot when restricting dates. For example: ['03\\.08\\.03'].
*/ /**
* @cfg {Boolean} disableAnim
* True to disable animations when showing the month picker.
*/
disableAnim: false, /**
* @cfg {String} [baseCls='x-datepicker']
* The base CSS class to apply to this components element.
*/
baseCls: Ext.baseCSSPrefix + 'datepicker', /**
* @cfg {String} [selectedCls='x-datepicker-selected']
* The class to apply to the selected cell.
*/ /**
* @cfg {String} [disabledCellCls='x-datepicker-disabled']
* The class to apply to disabled cells.
*/ //<locale>
/**
* @cfg {String} longDayFormat
* The format for displaying a date in a longer format.
*/
longDayFormat: 'F d, Y',
//</locale> /**
* @cfg {Object} keyNavConfig
* Specifies optional custom key event handlers for the {@link Ext.util.KeyNav} attached to this date picker. Must
* conform to the config format recognized by the {@link Ext.util.KeyNav} constructor. Handlers specified in this
* object will replace default handlers of the same name.
*/ /**
* @cfg {String}
* The {@link Ext.button.Button#ui} to use for the date picker's footer buttons.
*/
footerButtonUI: 'default', isDatePicker: true, ariaRole: 'region',
focusable: true, childEls: [
'innerEl', 'eventEl', 'prevEl', 'nextEl', 'middleBtnEl', 'footerEl'
], border: true, /**
* @cfg
* @inheritdoc
*/
renderTpl: [
'<div id="{id}-innerEl" data-ref="innerEl" 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>',
'<tpl if="showToday">',
//'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
'<div id="{id}-footerEl" role="presentation" style="background-color:#D9E5F3;border-top:0px solid #99BCE8;">{%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}<center>{%this.renderOkQueDingBtn(values, out)%} {%this.renderTodayBtn(values, out)%}</center></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}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{okText}.</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">' : '';
},
longDay: function(value){
return Ext.Date.format(value, this.longDayFormat);
},
renderHour: function(values, out) {
out.push('<font style="float : left;">  </font>');
Ext.DomHelper.generateMarkup(values.$comp.hour.getRenderTree(), out);
},
renderMinute: function(values, out) {
out.push('<font style="float : left;font-weight:bold;"> :  </font>');
Ext.DomHelper.generateMarkup(values.$comp.minute.getRenderTree(), out);
},
renderSecond: function(values, out) {
out.push('<font style="float : left;font-weight:bold;"> :  </font>');
Ext.DomHelper.generateMarkup(values.$comp.second.getRenderTree(), out);
},
renderOkQueDingBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.okQueDingBtn.getRenderTree(), out);
},
renderTodayBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
},
renderMonthBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
}
}
], // Default value used to initialise each date in the DatePicker.
// __Note:__ 12 noon was chosen because it steers well clear of all DST timezone changes.
initHour: 12, // 24-hour format numDays: 42, /**
* @event select
* Fires when a date is selected
* @param {Ext.picker.Date} this DatePicker
* @param {Date} date The selected date
*/ /**
* @private
* @inheritdoc
*/
initComponent: function() {
var me = this,
clearTime = Ext.Date.clearTime; me.selectedCls = me.baseCls + '-selected';
me.disabledCellCls = me.baseCls + '-disabled';
me.prevCls = me.baseCls + '-prevday';
me.activeCls = me.baseCls + '-active';
me.cellCls = me.baseCls + '-cell';
me.nextCls = me.baseCls + '-prevday';
me.todayCls = me.baseCls + '-today'; if (!me.format) {
me.format = Ext.Date.defaultFormat;
}
if (!me.dayNames) {
me.dayNames = Ext.Date.dayNames;
}
me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay)); me.callParent(); me.value = me.value ? clearTime(me.value, true) : clearTime(new Date()); me.initDisabledDays();
}, // Keep the tree structure correct for Ext.form.field.Picker input fields which poke a 'pickerField' reference down into their pop-up pickers.
getRefOwner: function() {
return this.pickerField || this.callParent();
}, getRefItems: function() {
var results = [],
monthBtn = this.monthBtn,
todayBtn = this.todayBtn; if (monthBtn) {
results.push(monthBtn);
} if (todayBtn) {
results.push(todayBtn);
} return results;
}, beforeRender: function() {
/*
* days array for looping through 6 full weeks (6 weeks * 7 days)
* Note that we explicitly force the size here so the template creates
* all the appropriate cells.
*/
var me = this,
encode = Ext.String.htmlEncode,
days = new Array(me.numDays),
today = Ext.Date.format(new Date(), me.format); if (me.padding && !me.width) {
me.cacheWidth();
} me.monthBtn = new Ext.button.Split({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: '',
tooltip: me.monthYearText,
tabIndex: -1,
ariaRole: 'presentation',
listeners: {
click: me.doShowMonthPicker,
arrowclick: me.doShowMonthPicker,
scope: me
}
}); me.hour = Ext.create('Ext.form.field.Number', {
scope: me,
ownerCt: me,
editable : true,
ownerLayout: me.getComponentLayout(),
minValue: 0,
maxValue: 23,
width: 70,
style : {float:"left"},
enableKeyEvents: true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 23){
e.stopEvent();
field.setValue(23);
}
}
}
}); me.minute = Ext.create('Ext.form.field.Number', {
scope: me,
ownerCt: me,
style : {float:"left"},
ownerLayout: me.getComponentLayout(),
minValue: 0,
maxValue: 59,
editable : true,
width: 70,
enableKeyEvents: true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 59){
e.stopEvent();
field.setValue(59);
}
}
}
}); me.second = Ext.create('Ext.form.field.Number', {
scope: me,
ownerCt: me,
editable : true,
style : {float:"left"},
ownerLayout: me.getComponentLayout(),
minValue: 0,
maxValue: 59,
width: 70,
enableKeyEvents: true,
listeners: {
keyup: function(field, e){
if (field.getValue() > 59){
e.stopEvent();
field.setValue(59);
}
}
}
});
me.okQueDingBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: me.okText,
tooltip: me.okTip,
tooltipType:'title',
handler:me.okQueDingHandler,//确认按钮的事件委托
scope: me
});
if (me.showToday) {
me.todayBtn = new Ext.button.Button({
ui: me.footerButtonUI,
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: Ext.String.format(me.todayText, today),
tooltip: Ext.String.format(me.todayTip, today),
tooltipType: 'title',
tabIndex: -1,
ariaRole: 'presentation',
handler: me.selectToday,
scope: me
});
} me.callParent(); Ext.applyIf(me, {
renderData: {}
}); Ext.apply(me.renderData, {
dayNames: me.dayNames,
showToday: me.showToday,
prevText: encode(me.prevText),
nextText: encode(me.nextText),
todayText: encode(me.todayText),
ariaMinText: encode(me.ariaMinText),
ariaMaxText: encode(me.ariaMaxText),
ariaDisabledDaysText: encode(me.ariaDisabledDaysText),
ariaDisabledDatesText: encode(me.ariaDisabledDatesText),
days: days
}); me.protoEl.unselectable();
}, cacheWidth: function() {
var me = this,
padding = me.parseBox(me.padding),
widthEl = Ext.getBody().createChild({
cls: me.baseCls + ' ' + me.borderBoxCls,
style: 'position:absolute;top:-1000px;left:-1000px;'
}); me.self.prototype.width = widthEl.getWidth() + padding.left + padding.right;
widthEl.destroy();
}, /**
* @inheritdoc
* @private
*/
onRender: function(container, position) {
var me = this; me.callParent(arguments); me.cells = me.eventEl.select('tbody td');
me.textNodes = me.eventEl.query('tbody td div'); me.eventEl.set({ 'aria-labelledby': me.monthBtn.id }); me.mon(me.eventEl, {
scope: me,
mousewheel: me.handleMouseWheel,
click: {
fn: me.handleDateClick,
delegate: 'div.' + me.baseCls + '-date'
}
}); }, /**
* @inheritdoc
* @private
*/
initEvents: function(){
var me = this,
pickerField = me.pickerField,
eDate = Ext.Date,
day = eDate.DAY; me.callParent(); // If we're part of a date field, don't allow us to focus, the field will
// handle that. If we are standalone, then allow the default behaviour
// to occur to receive focus
if (pickerField) {
me.el.on('mousedown', me.onMouseDown, me);
} me.prevRepeater = new Ext.util.ClickRepeater(me.prevEl, {
handler: me.showPrevMonth,
scope: me,
preventDefault: true,
stopDefault: true
}); me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
handler: me.showNextMonth,
scope: me,
preventDefault: true,
stopDefault: true
}); me.keyNav = new Ext.util.KeyNav(me.eventEl, Ext.apply({
scope: me, left: function(e) {
if (e.ctrlKey) {
me.showPrevMonth();
} else {
me.update(eDate.add(me.activeDate, day, -1));
}
}, right: function(e){
if (e.ctrlKey) {
me.showNextMonth();
} else {
me.update(eDate.add(me.activeDate, day, 1));
}
}, up: function(e) {
if (e.ctrlKey) {
me.showNextYear();
} else {
me.update(eDate.add(me.activeDate, day, -7));
}
}, down: function(e) {
if (e.ctrlKey) {
me.showPrevYear();
} else {
me.update(eDate.add(me.activeDate, day, 7));
}
}, pageUp: function(e) {
if (e.ctrlKey) {
me.showPrevYear();
} else {
me.showPrevMonth();
}
}, pageDown: function(e) {
if (e.ctrlKey) {
me.showNextYear();
} else {
me.showNextMonth();
}
}, tab: function(e) {
// When the picker is floating and attached to an input field, its
// 'select' handler will focus the inputEl so when navigation happens
// it does so as if the input field was focused all the time.
// This is the desired behavior and we try not to interfere with it
// in the picker itself, see below.
me.handleTabClick(e); // Allow default behaviour of TAB - it MUST be allowed to navigate.
return true;
}, enter: function(e) {
me.handleDateClick(e, me.activeCell.firstChild);
}, space: function() {
me.setValue(new Date(me.activeCell.firstChild.dateValue));
var startValue = me.startValue,
value = me.value,
pickerValue; if (pickerField) {
pickerValue = pickerField.getValue();
if (pickerValue && startValue && pickerValue.getTime() === value.getTime()) {
pickerField.setValue(startValue);
} else {
pickerField.setValue(value);
}
}
}, home: function(e) {
me.update(eDate.getFirstDateOfMonth(me.activeDate));
}, end: function(e) {
me.update(eDate.getLastDateOfMonth(me.activeDate));
}
}, me.keyNavConfig)); if (me.disabled) {
me.syncDisabled(true);
}
me.update(me.value);
}, onMouseDown: function(e) {
e.preventDefault();
}, handleTabClick: function (e) {
var me = this,
t = me.getSelectedDate(me.activeDate),
handler = me.handler; // The following code is like handleDateClick without the e.stopEvent()
if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
me.setValue(new Date(t.dateValue));
me.fireEvent('select', me, me.value);
if (handler) {
handler.call(me.scope || me, me, me.value);
}
me.onSelect();
}
}, getSelectedDate: function (date) {
var me = this,
t = date.getTime(),
cells = me.cells,
cls = me.selectedCls,
cellItems = cells.elements,
cLen = cellItems.length,
cell, c; cells.removeCls(cls); for (c = 0; c < cLen; c++) {
cell = cellItems[c].firstChild;
if (cell.dateValue === t) {
return cell;
}
}
return null;
}, /**
* Setup the disabled dates regex based on config options
* @private
*/
initDisabledDays: function() {
var me = this,
dd = me.disabledDates,
re = '(?:',
len,
d, dLen, dI; if(!me.disabledDatesRE && dd){
len = dd.length - 1; dLen = dd.length; for (d = 0; d < dLen; d++) {
dI = dd[d]; re += Ext.isDate(dI) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(dI, me.format)) + '$' : dI;
if (d !== len) {
re += '|';
}
} me.disabledDatesRE = new RegExp(re + ')');
}
}, /**
* Replaces any existing disabled dates with new values and refreshes the DatePicker.
* @param {String[]/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config for
* details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
* @return {Ext.picker.Date} this
*/
setDisabledDates: function(dd) {
var me = this; if (Ext.isArray(dd)) {
me.disabledDates = dd;
me.disabledDatesRE = null;
} else {
me.disabledDatesRE = dd;
}
me.initDisabledDays();
me.update(me.value, true);
return me;
}, /**
* Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
* @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details
* on supported values.
* @return {Ext.picker.Date} this
*/
setDisabledDays: function(dd) {
this.disabledDays = dd;
return this.update(this.value, true);
}, /**
* Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
* @param {Date} value The minimum date that can be selected
* @return {Ext.picker.Date} this
*/
setMinDate: function(dt) {
this.minDate = dt;
return this.update(this.value, true);
}, /**
* Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
* @param {Date} value The maximum date that can be selected
* @return {Ext.picker.Date} this
*/
setMaxDate: function(dt) {
this.maxDate = dt;
return this.update(this.value, true);
}, /**
* Sets the value of the date field
* @param {Date} value The date to set
* @return {Ext.picker.Date} this
*/
setValue: function(value) {
// If passed a null value just pass in a new date object.
this.value = Ext.Date.clearTime(value || new Date(), true);
return this.update(this.value);
}, /**
* Gets the current selected value of the date field
* @return {Date} The selected date
*/
getValue: function() {
return this.value;
}, //<locale type="function">
/**
* Gets a single character to represent the day of the week
* @return {String} The character
*/
getDayInitial: function(value) {
return value.substr(0,1);
},
//</locale> /**
* @inheritdoc
* @private
*/
onEnable: function() {
var me = this; me.callParent();
me.syncDisabled(false);
me.update(me.activeDate); }, /**
* @inheritdoc
* @private
*/
onShow: function() {
var me = this; me.callParent();
me.syncDisabled(false);
if (me.pickerField) {
me.startValue = me.pickerField.getValue();
}
}, /**
* @inheritdoc
* @private
*/
onHide: function() {
this.callParent();
this.syncDisabled(true);
}, /**
* @inheritdoc
* @private
*/
onDisable: function() {
this.callParent();
this.syncDisabled(true);
}, /**
* Get the current active date.
* @private
* @return {Date} The active date
*/
getActive: function(){
return this.activeDate || this.value;
}, /**
* Run any animation required to hide/show the month picker.
* @private
* @param {Boolean} isHide True if it's a hide operation
*/
runAnimation: function(isHide){
var picker = this.monthPicker,
options = {
duration: 200,
callback: function() {
picker.setVisible(!isHide);
}
}; if (isHide) {
picker.el.slideOut('t', options);
} else {
picker.el.slideIn('t', options);
}
}, /**
* Hides the month picker, if it's visible.
* @param {Boolean} [animate] Indicates whether to animate this action. If the animate
* parameter is not specified, the behavior will use {@link #disableAnim} to determine
* whether to animate or not.
* @return {Ext.picker.Date} this
*/
hideMonthPicker: function(animate){
var me = this,
picker = me.monthPicker; if (picker && picker.isVisible()) {
if (me.shouldAnimate(animate)) {
me.runAnimation(true);
} else {
picker.hide();
}
}
return me;
}, doShowMonthPicker: function(){
// Wrap in an extra call so we can prevent the button
// being passed as an animation parameter.
this.showMonthPicker();
}, doHideMonthPicker: function() {
// Wrap in an extra call so we can prevent this
// being passed as an animation parameter
this.hideMonthPicker();
}, /**
* Show the month picker
* @param {Boolean} [animate] Indicates whether to animate this action. If the animate
* parameter is not specified, the behavior will use {@link #disableAnim} to determine
* whether to animate or not.
* @return {Ext.picker.Date} this
*/
showMonthPicker: function(animate) {
var me = this,
el = me.el,
picker; if (me.rendered && !me.disabled) {
picker = me.createMonthPicker();
if (!picker.isVisible()) {
picker.setValue(me.getActive());
picker.setSize(el.getSize()); // Null out floatParent so that the [-1, -1] position is not made relative to this
picker.floatParent = null;
picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));
if (me.shouldAnimate(animate)) {
me.runAnimation(false);
} else {
picker.show();
}
}
}
return me;
}, /**
* Checks whether a hide/show action should animate
* @private
* @param {Boolean} [animate] A possible animation value
* @return {Boolean} Whether to animate the action
*/
shouldAnimate: function(animate) {
return Ext.isDefined(animate) ? animate : !this.disableAnim;
}, /**
* Create the month picker instance
* @private
* @return {Ext.picker.Month} picker
*/
createMonthPicker: function() {
var me = this,
picker = me.monthPicker; if (!picker) {
me.monthPicker = picker = new Ext.picker.Month({
renderTo: me.el,
// We need to set the ownerCmp so that owns() can correctly
// match up the component hierarchy so that focus does not leave
// an owning picker field if/when this gets focus.
ownerCmp: me,
floating: true,
padding: me.padding,
shadow: false,
small: me.showToday === false,
footerButtonUI: me.footerButtonUI,
listeners: {
scope: me,
cancelclick: me.onCancelClick,
okclick: me.onOkClick,
yeardblclick: me.onOkClick,
monthdblclick: me.onOkClick
}
});
if (!me.disableAnim) {
// hide the element if we're animating to prevent an initial flicker
picker.el.setStyle('display', 'none');
}
picker.hide();
me.on('beforehide', me.doHideMonthPicker, me);
}
return picker;
}, /**
* Respond to an ok click on the month picker
* @private
*/
onOkClick: function(picker, value) {
var me = this,
month = value[0],
year = value[1],
date = new Date(year, month, me.getActive().getDate()); if (date.getMonth() !== month) {
// 'fix' the JS rolling date conversion if needed
date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
}
me.setValue(date);
me.hideMonthPicker();
}, /**
* Respond to a cancel click on the month picker
* @private
*/
onCancelClick: function() {
this.selectedUpdate(this.activeDate);
this.hideMonthPicker();
}, /**
* Show the previous month.
* @param {Object} e
* @return {Ext.picker.Date} this
*/
showPrevMonth: function(e) {
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
}, /**
* Show the next month.
* @param {Object} e
* @return {Ext.picker.Date} this
*/
showNextMonth: function(e) {
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
}, /**
* Show the previous year.
* @return {Ext.picker.Date} this
*/
showPrevYear: function() {
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
}, /**
* Show the next year.
* @return {Ext.picker.Date} this
*/
showNextYear: function() {
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
}, /**
* Respond to the mouse wheel event
* @private
* @param {Ext.event.Event} e
*/
handleMouseWheel: function(e) {
e.stopEvent();
if(!this.disabled){
var delta = e.getWheelDelta();
if(delta > 0){
this.showPrevMonth();
} else if(delta < 0){
this.showNextMonth();
}
}
}, /**
* Respond to a date being clicked in the picker
* @private
* @param {Ext.event.Event} e
* @param {HTMLElement} t
*/
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.setValue(new Date(t.dateValue));
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();
}
}, /**
* Perform any post-select actions
* @private
*/
onSelect: function() {
if (this.hideOnSelect) {
this.hide();
}
}, /**
* Sets the current value to today.
* @return {Ext.picker.Date} this
*/
selectToday: function() {
var me = this,
btn = me.todayBtn,
handler = me.handler; if (btn && !btn.disabled) {
me.setValue(Ext.Date.clearTime(new Date()));
me.fireEvent('select', me, me.value);
if (handler) {
handler.call(me.scope || me, me, me.value);
}
me.onSelect();
}
return me;
}, /**
* Update the selected cell
* @private
* @param {Date} date The new date
*/
selectedUpdate: function(date) {
var me = this,
t = date.getTime(),
cells = me.cells,
cls = me.selectedCls,
c,
cLen = cells.getCount(),
cell; me.eventEl.dom.setAttribute('aria-busy', 'true'); cell = me.activeCell; if (cell) {
Ext.fly(cell).removeCls(cls);
cell.setAttribute('aria-selected', false);
} for (c = 0; c < cLen; c++) {
cell = cells.item(c); if (me.textNodes[c].dateValue === t) {
me.activeCell = cell.dom;
me.eventEl.dom.setAttribute('aria-activedescendant', cell.dom.id);
cell.dom.setAttribute('aria-selected', true);
cell.addCls(cls);
me.fireEvent('highlightitem', me, cell);
break;
}
} me.eventEl.dom.removeAttribute('aria-busy');
}, /**
* Update the contents of the picker for a new month
* @private
* @param {Date} date The new date
*/
fullUpdate: function(date) {
var me = this,
cells = me.cells.elements,
textNodes = me.textNodes,
disabledCls = me.disabledCellCls,
eDate = Ext.Date,
i = 0,
extraDays = 0,
newDate = +eDate.clearTime(date, true),
today = +eDate.clearTime(new Date()),
min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
ddMatch = me.disabledDatesRE,
ddText = me.disabledDatesText,
ddays = me.disabledDays ? me.disabledDays.join('') : false,
ddaysText = me.disabledDaysText,
format = me.format,
days = eDate.getDaysInMonth(date),
firstOfMonth = eDate.getFirstDateOfMonth(date),
startingPos = firstOfMonth.getDay() - me.startDay,
previousMonth = eDate.add(date, eDate.MONTH, -1),
ariaTitleDateFormat = me.ariaTitleDateFormat,
prevStart, current, disableToday, tempDate, setCellClass, html, cls,
formatValue, value; if (startingPos < 0) {
startingPos += 7;
} days += startingPos;
prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour); if (me.showToday) {
tempDate = eDate.clearTime(new Date());
disableToday = (tempDate < min || tempDate > max ||
(ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
(ddays && ddays.indexOf(tempDate.getDay()) !== -1)); if (!me.disabled) {
me.todayBtn.setDisabled(disableToday);
}
} setCellClass = function(cellIndex, cls){
var cell = cells[cellIndex],
describedBy = []; // Cells are not rendered with ids
if (!cell.hasAttribute('id')) {
cell.setAttribute('id', me.id + '-cell-' + cellIndex);
} // store dateValue number as an expando
value = +eDate.clearTime(current, true);
cell.firstChild.dateValue = value; cell.setAttribute('aria-label', eDate.format(current, ariaTitleDateFormat)); // Here and below we can't use title attribute instead of data-qtip
// because JAWS will announce title value before cell content
// which is not what we need. Also we are using aria-describedby attribute
// and not placing the text in aria-label because some cells may have
// compound descriptions (like Today and Disabled day).
cell.removeAttribute('aria-describedby');
cell.removeAttribute('data-qtip'); if (value === today) {
cls += ' ' + me.todayCls;
describedBy.push(me.id + '-todayText');
} if (value === newDate) {
me.activeCell = cell;
me.eventEl.dom.setAttribute('aria-activedescendant', cell.id);
cell.setAttribute('aria-selected', true);
cls += ' ' + me.selectedCls;
me.fireEvent('highlightitem', me, cell);
}
else {
cell.setAttribute('aria-selected', false);
} if (value < min) {
cls += ' ' + disabledCls;
describedBy.push(me.id + '-ariaMinText');
cell.setAttribute('data-qtip', me.minText);
}
else if (value > max) {
cls += ' ' + disabledCls;
describedBy.push(me.id + '-ariaMaxText');
cell.setAttribute('data-qtip', me.maxText);
}
else if (ddays && ddays.indexOf(current.getDay()) !== -1){
cell.setAttribute('data-qtip', ddaysText);
describedBy.push(me.id + '-ariaDisabledDaysText');
cls += ' ' + disabledCls;
}
else if (ddMatch && format){
formatValue = eDate.dateFormat(current, format);
if(ddMatch.test(formatValue)){
cell.setAttribute('data-qtip', ddText.replace('%0', formatValue));
describedBy.push(me.id + '-ariaDisabledDatesText');
cls += ' ' + disabledCls;
}
} if (describedBy.length) {
cell.setAttribute('aria-describedby', describedBy.join(' '));
} cell.className = cls + ' ' + me.cellCls;
}; me.eventEl.dom.setAttribute('aria-busy', 'true'); for (; i < me.numDays; ++i) {
if (i < startingPos) {
html = (++prevStart);
cls = me.prevCls;
} else if (i >= days) {
html = (++extraDays);
cls = me.nextCls;
} else {
html = i - startingPos + 1;
cls = me.activeCls;
}
textNodes[i].innerHTML = html;
current.setDate(current.getDate() + 1);
setCellClass(i, cls);
} me.eventEl.dom.removeAttribute('aria-busy'); me.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));
}, /**
* Update the contents of the picker
* @private
* @param {Date} date The new date
* @param {Boolean} forceRefresh True to force a full refresh
*/
update: function(date, forceRefresh) {
var me = this,
active = me.activeDate;
//添加时间相关
date.setHours(me.hour.getValue());
date.setMinutes(me.minute.getValue());
date.setSeconds(me.second.getValue()); if (me.rendered) {
me.activeDate = date;
if (!forceRefresh && active && me.el &&
active.getMonth() === date.getMonth() &&
active.getFullYear() === date.getFullYear()) {
me.selectedUpdate(date, active);
} else {
me.fullUpdate(date, active);
}
}
return me;
},
/**
* 确认 按钮触发的调用
*/
okQueDingHandler : function(){
var me = this,
btn = me.okQueDingBtn; if(btn && !btn.disabled){
me.setValue(this.getValue());
me.fireEvent('select', me, me.value);
me.onSelect();
}
return me;
},
/**
* @private
* @inheritdoc
*/
beforeDestroy: function() {
var me = this; if (me.rendered) {
Ext.destroy(
me.keyNav,
me.monthPicker,
me.monthBtn,
me.nextRepeater,
me.prevRepeater,
me.todayBtn,
me.okQueDingBtn,
me.todayElSpan
);
delete me.textNodes;
delete me.cells.elements;
}
me.callParent();
}, privates: {
// Do the job of a container layout at this point even though we are not a Container.
// TODO: Refactor as a Container.
finishRenderChildren: function () {
var me = this; me.callParent();
me.monthBtn.finishRender();
me.okQueDingBtn.finishRender();
if (me.showToday) {
me.todayBtn.finishRender();
}
//添加时间相关
this.hour.finishRender();
this.minute.finishRender();
this.second.finishRender();
}, getFocusEl: function() {
return this.eventEl;
}, /**
* Set the disabled state of various internal components
* @param {Boolean} disabled
* @private
*/
syncDisabled: function (disabled) {
var me = this,
keyNav = me.keyNav; // If we have one, we have all
if (keyNav) {
keyNav.setDisabled(disabled);
me.prevRepeater.setDisabled(disabled);
me.nextRepeater.setDisabled(disabled);
if (me.todayBtn) {
me.todayBtn.setDisabled(disabled);
}
}
}
}
});
11、下面则是扩展出来的一个DeteTimeField控件
完整的DeteTimeField.js代码
/**
* @docauthor Jason Johnston <jason@sencha.com>
*
* Provides a date input field with a {@link Ext.picker.Date date picker} dropdown and automatic date
* validation.
*
* This field recognizes and uses the JavaScript Date object as its main {@link #value} type. In addition,
* it recognizes string values which are parsed according to the {@link #format} and/or {@link #altFormats}
* configs. These may be reconfigured to use date formats appropriate for the user's locale.
*
* The field may be limited to a certain range of dates by using the {@link #minValue}, {@link #maxValue},
* {@link #disabledDays}, and {@link #disabledDates} config parameters. These configurations will be used both
* in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.
*
* # Example usage
*
* @example
* Ext.create('Ext.form.Panel', {
* renderTo: Ext.getBody(),
* width: 300,
* bodyPadding: 10,
* title: 'Dates',
* items: [{
* xtype: 'datefield',
* anchor: '100%',
* fieldLabel: 'From',
* name: 'from_date',
* maxValue: new Date() // limited to the current date or prior
* }, {
* xtype: 'datefield',
* anchor: '100%',
* fieldLabel: 'To',
* name: 'to_date',
* value: new Date() // defaults to today
* }]
* });
*
* # Date Formats Examples
*
* This example shows a couple of different date format parsing scenarios. Both use custom date format
* configurations; the first one matches the configured `format` while the second matches the `altFormats`.
*
* @example
* Ext.create('Ext.form.Panel', {
* renderTo: Ext.getBody(),
* width: 300,
* bodyPadding: 10,
* title: 'Dates',
* items: [{
* xtype: 'datefield',
* anchor: '100%',
* fieldLabel: 'Date',
* name: 'date',
* // The value matches the format; will be parsed and displayed using that format.
* format: 'm d Y',
* value: '2 4 1978'
* }, {
* xtype: 'datefield',
* anchor: '100%',
* fieldLabel: 'Date',
* name: 'date',
* // The value does not match the format, but does match an altFormat; will be parsed
* // using the altFormat and displayed using the format.
* format: 'm d Y',
* altFormats: 'm,d,Y|m.d.Y',
* value: '2.4.1978'
* }]
* });
*/
Ext.define('Ext.ux.DateTimeField', {
extend:'Ext.form.field.Picker',
alias: 'widget.datetimefield',
requires: ['Ext.ux.DateTimePicker'], //<locale>
/**
* @cfg {String} format
* The default date format string which can be overriden for localization support. The format must be valid
* according to {@link Ext.Date#parse}.
*/
format : "m/d/Y",
//</locale>
//<locale>
/**
* @cfg {String} altFormats
* Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined
* format.
*/
altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
//</locale>
//<locale>
/**
* @cfg {String} disabledDaysText
* The tooltip to display when the date falls on a disabled day.
*/
disabledDaysText : "Disabled",
//</locale>
//<locale>
/**
* @cfg {String} disabledDatesText
* The tooltip text to display when the date falls on a disabled date.
*/
disabledDatesText : "Disabled",
//</locale>
//<locale>
/**
* @cfg {String} minText
* The error text to display when the date in the cell is before {@link #minValue}.
*/
minText : "The date in this field must be equal to or after {0}",
//</locale>
//<locale>
/**
* @cfg {String} maxText
* The error text to display when the date in the cell is after {@link #maxValue}.
*/
maxText : "The date in this field must be equal to or before {0}",
//</locale>
//<locale>
/**
* @cfg {String} invalidText
* The error text to display when the date in the field is invalid.
*/
invalidText : "{0} is not a valid date - it must be in the format {1}",
//</locale>
/**
* @cfg {String} [triggerCls='x-form-date-trigger']
* An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger'
* and triggerCls will be **appended** if specified (default class displays a calendar icon).
*/
triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',
/**
* @cfg {Boolean} showToday
* false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for
* spacebar that selects the current date.
*/
showToday : true,
/**
* @cfg {Date/String} minValue
* The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.
*/
/**
* @cfg {Date/String} maxValue
* The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.
*/
/**
* @cfg {Number[]} disabledDays
* An array of days to disable, 0 based. Some examples:
*
* // disable Sunday and Saturday:
* disabledDays: [0, 6]
* // disable weekdays:
* disabledDays: [1,2,3,4,5]
*/
/**
* @cfg {String[]} disabledDates
* An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so
* they are very powerful. Some examples:
*
* // disable these exact dates:
* disabledDates: ["03/08/2003", "09/16/2003"]
* // disable these days for every year:
* disabledDates: ["03/08", "09/16"]
* // only match the beginning (useful if you are using short years):
* disabledDates: ["^03/08"]
* // disable every day in March 2006:
* disabledDates: ["03/../2006"]
* // disable every day in every March:
* disabledDates: ["^03"]
*
* Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
* to support regular expressions, if you are using a {@link #format date format} that has "." in it, you will have
* to escape the dot when restricting dates. For example: `["03\\.08\\.03"]`.
*/ /**
* @cfg {String} submitFormat
* The date format string which will be submitted to the server. The format must be valid according to
* {@link Ext.Date#parse}.
*
* Defaults to {@link #format}.
*/ /**
* @cfg {Boolean} useStrict
* True to enforce strict date parsing to prevent the default Javascript "date rollover".
* Defaults to the useStrict parameter set on Ext.Date
* See {@link Ext.Date#parse}.
*/
useStrict: undefined, // in the absence of a time value, a default value of 12 noon will be used
// (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
initTime: '12', // 24 hour format initTimeFormat: 'H', matchFieldWidth: false,
//<locale>
/**
* @cfg {Number} [startDay=undefined]
* Day index at which the week should begin, 0-based.
*
* Defaults to `0` (Sunday).
*/
startDay: 0,
//</locale> /**
* @inheritdoc
*/
valuePublishEvent: ['select', 'blur'], initComponent : function(){
var me = this,
isString = Ext.isString,
min, max; min = me.minValue;
max = me.maxValue;
if(isString(min)){
me.minValue = me.parseDate(min);
}
if(isString(max)){
me.maxValue = me.parseDate(max);
}
me.disabledDatesRE = null;
me.initDisabledDays(); me.callParent();
}, initValue: function() {
var me = this,
value = me.value; // If a String value was supplied, try to convert it to a proper Date
if (Ext.isString(value)) {
me.value = me.rawToValue(value);
} me.callParent();
}, // private
initDisabledDays : function(){
if(this.disabledDates){
var dd = this.disabledDates,
len = dd.length - 1,
re = "(?:",
d,
dLen = dd.length,
date; for (d = 0; d < dLen; d++) {
date = dd[d]; re += Ext.isDate(date) ? '^' + Ext.String.escapeRegex(date.dateFormat(this.format)) + '$' : date;
if (d !== len) {
re += '|';
}
} this.disabledDatesRE = new RegExp(re + ')');
}
}, /**
* Replaces any existing disabled dates with new values and refreshes the Date picker.
* @param {String[]} disabledDates An array of date strings (see the {@link #disabledDates} config for details on
* supported values) used to disable a pattern of dates.
*/
setDisabledDates : function(disabledDates){
var me = this,
picker = me.picker; me.disabledDates = disabledDates;
me.initDisabledDays();
if (picker) {
picker.setDisabledDates(me.disabledDatesRE);
}
}, /**
* Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
* @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details on
* supported values.
*/
setDisabledDays : function(disabledDays){
var picker = this.picker; this.disabledDays = disabledDays;
if (picker) {
picker.setDisabledDays(disabledDays);
}
}, /**
* Replaces any existing {@link #minValue} with the new value and refreshes the Date picker.
* @param {Date} value The minimum date that can be selected
*/
setMinValue : function(value){
var me = this,
picker = me.picker,
minValue = (Ext.isString(value) ? me.parseDate(value) : value); me.minValue = minValue;
if (picker) {
picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
picker.setMinDate(minValue);
}
}, /**
* Replaces any existing {@link #maxValue} with the new value and refreshes the Date picker.
* @param {Date} value The maximum date that can be selected
*/
setMaxValue : function(value){
var me = this,
picker = me.picker,
maxValue = (Ext.isString(value) ? me.parseDate(value) : value); me.maxValue = maxValue;
if (picker) {
picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
picker.setMaxDate(maxValue);
}
}, /**
* Runs all of Date's validations and returns an array of any errors. Note that this first runs Text's validations,
* so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
* the date format is valid, that the chosen date is within the min and max date constraints set, that the date
* chosen is not in the disabledDates regex and that the day chosed is not one of the disabledDays.
* @param {Object} [value] The value to get errors for (defaults to the current field value)
* @return {String[]} All validation errors for this field
*/
getErrors: function(value) {
value = arguments.length > 0 ? value : this.formatDate(this.processRawValue(this.getRawValue())); var me = this,
format = Ext.String.format,
clearTime = Ext.Date.clearTime,
errors = me.callParent([value]),
disabledDays = me.disabledDays,
disabledDatesRE = me.disabledDatesRE,
minValue = me.minValue,
maxValue = me.maxValue,
len = disabledDays ? disabledDays.length : 0,
i = 0,
svalue,
fvalue,
day,
time; if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
return errors;
} svalue = value;
value = me.parseDate(value);
if (!value) {
errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
return errors;
} time = value.getTime();
if (minValue && time < clearTime(minValue).getTime()) {
errors.push(format(me.minText, me.formatDate(minValue)));
} if (maxValue && time > clearTime(maxValue).getTime()) {
errors.push(format(me.maxText, me.formatDate(maxValue)));
} if (disabledDays) {
day = value.getDay(); for(; i < len; i++) {
if (day === disabledDays[i]) {
errors.push(me.disabledDaysText);
break;
}
}
} fvalue = me.formatDate(value);
if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
errors.push(format(me.disabledDatesText, fvalue));
} return errors;
}, rawToValue: function(rawValue) {
return this.parseDate(rawValue) || rawValue || null;
}, valueToRaw: function(value) {
return this.formatDate(this.parseDate(value));
}, /**
* @method setValue
* Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid date,
* using {@link #format} as the date format, according to the same rules as {@link Ext.Date#parse} (the default
* format used is "m/d/Y").
*
* Usage:
*
* //All of these calls set the same date value (May 4, 2006)
*
* //Pass a date object:
* var dt = new Date('5/4/2006');
* dateField.setValue(dt);
*
* //Pass a date string (default format):
* dateField.setValue('05/04/2006');
*
* //Pass a date string (custom format):
* dateField.format = 'Y-m-d';
* dateField.setValue('2006-05-04');
*
* @param {String/Date} date The date or valid date string
* @return {Ext.form.field.Date} this
*/ /**
* Attempts to parse a given string value using a given {@link Ext.Date#parse date format}.
* @param {String} value The value to attempt to parse
* @param {String} format A valid date format (see {@link Ext.Date#parse})
* @return {Date} The parsed Date object, or null if the value could not be successfully parsed.
*/
safeParse : function(value, format) {
var me = this,
utilDate = Ext.Date,
result = null,
strict = me.useStrict,
parsedDate; if (utilDate.formatContainsHourInfo(format)) {
// if parse format contains hour information, no DST adjustment is necessary
result = utilDate.parse(value, format, strict);
} else {
// set time to 12 noon, then clear the time
parsedDate = utilDate.parse(value + ' ' + me.initTime, format + ' ' + me.initTimeFormat, strict);
if (parsedDate) {
result = utilDate.clearTime(parsedDate);
}
}
return result;
}, // @private
getSubmitValue: function() {
var format = this.submitFormat || this.format,
value = this.getValue(); return value ? Ext.Date.format(value, format) : '';
}, /**
* @private
*/
parseDate : function(value) {
if(!value || Ext.isDate(value)){
return value;
} var me = this,
val = me.safeParse(value, me.format),
altFormats = me.altFormats,
altFormatsArray = me.altFormatsArray,
i = 0,
len; if (!val && altFormats) {
altFormatsArray = altFormatsArray || altFormats.split('|');
len = altFormatsArray.length;
for (; i < len && !val; ++i) {
val = me.safeParse(value, altFormatsArray[i]);
}
}
return val;
}, // private
formatDate: function(date){
return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
}, createPicker: function() {
var me = this,
format = Ext.String.format; // Create floating Picker BoundList. It will acquire a floatParent by looking up
// its ancestor hierarchy (Pickers use their pickerField property as an upward link)
// for a floating component.
return new Ext.ux.DateTimePicker({
pickerField: me,
floating: true,
focusable: false, // Key events are listened from the input field which is never blurred
hidden: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
listeners: {
scope: me,
select: me.onSelect
},
keyNavConfig: {
esc: function() {
me.collapse();
}
}
});
}, onSelect: function(m, d) {
var me = this; me.setValue(d);
me.fireEvent('select', me, d);
me.collapse();
}, /**
* @private
* Sets the Date picker's value to match the current field value when expanding.
*/
onExpand: function() {
var me = this,
value = me.getValue() instanceof Date ? me.getValue() : new Date();
me.picker.setValue(value);
me.picker.hour.setValue(value.getHours());
me.picker.minute.setValue(value.getMinutes());
me.picker.second.setValue(value.getSeconds());
}, // private
onBlur: function(e) {
var me = this,
v = me.rawToValue(me.getRawValue()); if (Ext.isDate(v)) {
me.setValue(v);
}
me.callParent([e]);
} /**
* @cfg {Boolean} grow
* @private
*/
/**
* @cfg {Number} growMin
* @private
*/
/**
* @cfg {Number} growMax
* @private
*/
/**
* @method autoSize
* @private
*/
});
PS：写这篇文章也是为了方便以后自己用，也方便一下使用EXTJS的同道，为了生命远离EXTJS...
参考文章：http://www.cnblogs.com/linxiong945/p/3977445.html
http://toutiao.com/a4669125293/
http://gogo1217.iteye.com/blog/1856265
http://express.ruanko.com/ruanko-express_69/tech-overnight1.html
http://blog.csdn.net/oscar999/article/details/9984679