版权所有，转载请注明来源http://gogo1217.iteye.com，违者必究！
最近在做一个case的时候，客户要求能在选择年月日，时分秒在一个面板中选择；客户端JS框架使用的是ExtJs4.2。
我们知道，ExtJs4.2的Ext.picker.Date只能选择年月日，网上有部分实现，但大多数的都是基于ExtJs3修改的，而且过多的破坏了ExtJs的编写习惯。
现将我写的跟大家分享下，代码中有相关注释，目前还不支持minValue和maxValue设置。
顺便提下，官方示例中的时间区间的vtype扩展在2个日历控件都设置了value情况下会陷入无限的validate校验，从而导致浏览器崩溃。
1、自定义DateTime选择器：
/*
* 带时间选择的日历选择器
* 转载请注明来自于gogo1217.iteye.com
*/
Ext.define('Go.picker.DateTime', {
extend: 'Ext.picker.Date',//继承于 Ext.picker.Date
alias: 'widget.dateptimeicker',//添加xtype dateptimeicker
okText:'确定',//确认按钮文字描述
okTip:'确定',//确认按钮提示内容
renderTpl: [
'<div id="{id}-innerEl" role="grid">',
'<div role="presentation" class="{baseCls}-header">',
'<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
'<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',
'</div>',
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',
'<thead role="presentation"><tr role="presentation">',
'<tpl for="dayNames">',
'<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
'<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
'</th>',
'</tpl>',
'</tr></thead>',
'<tbody role="presentation"><tr role="presentation">',
'<tpl for="days">',
'{#:this.isEndOfWeek}',
'<td role="gridcell" id="{[Ext.id()]}">',
'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
'</td>',
'</tpl>',
'</tr></tbody>',
'</table>',
//指定时分秒渲染框架
'<table id="{id}-timeEl" style="table-layout:auto;width:auto;margin:0 3px;" class="x-datepicker-inner" cellspacing="0">',
'<tbody><tr>',
'<td>{%this.renderHourBtn(values,out)%}</td>',
'<td>{%this.renderMinuteBtn(values,out)%}</td>',
'<td>{%this.renderSecondBtn(values,out)%}</td>',
'</tr></tbody>',
'</table>',
'<tpl if="showToday">',
//添加一个确认按钮渲染
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>',
'</tpl>',
'</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);//根据组件获得组件的html输出
},
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;
//在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化
//组件宽度可能需要调整下，根据使用的theme不同，宽度需要调整
me.hourBtn=new _$Number({
minValue:0,
maxValue:23,
step:1,
width:55
});
me.minuteBtn=new _$Number({
minValue:0,
maxValue:59,
step:1,
width:70,
labelWidth:10,
fieldLabel:' '
});
me.secondBtn=new _$Number({
minValue:0,
maxValue:59,
step:1,
width:70,
labelWidth:10,
fieldLabel:' '//在组件之前渲染 ':'
});
me.okBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: me.okText,
tooltip: me.okTip,
tooltipType:'title',
handler:me.okHandler,//确认按钮的事件委托
scope: me
});
me.callParent();
},
finishRenderChildren: function () {
var me = this;
//组件渲染完成后，需要调用子元素的finishRender，从而获得事件绑定
me.hourBtn.finishRender();
me.minuteBtn.finishRender();
me.secondBtn.finishRender();
me.okBtn.finishRender();
me.callParent();
},
/**
* 确认 按钮触发的调用
*/
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;
},
/**
* 覆盖了父类的方法，因为父类中是根据时间的getTime判断的，因此需要对时、分、秒分别值为0才能保证当前值的日期选择
* @private
* @param {Date} date The new date
*/
selectedUpdate: function(date){
this.callParent([Ext.Date.clearTime(date,true)]);
},
/**
* 更新picker的显示内容，需要同时更新时、分、秒输入框的值
* @private
* @param {Date} date The new date
* @param {Boolean} forceRefresh True to force a full refresh
*/
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);
},
/**
* 从picker选中后，赋值时，需要从时、分、秒也获得当前值
* datetimefield也会调用这个方法对picker初始化，因此添加一个isfixed参数。
* @param {Date} date The new date
* @param {Boolean} isfixed True 时，忽略从时分秒中获取值
*/
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();
}
},
function() {
var proto = this.prototype,
date = Ext.Date;
proto.monthNames = date.monthNames;
proto.dayNames = date.dayNames;
proto.format = date.defaultFormat;
});
2、自定义DateTime Field输入控件。
/**
* 带时间的日期输入控件
* 转载请注明来自于gogo1217.iteye.com
*/
Ext.define('Go.form.field.DateTime', {
extend:'Ext.form.field.Date',
alias: 'widget.datetimefield',
requires: ['Go.picker.DateTime'],
/**
* @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 : "Y-m-d H:i:s",
/**
* @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 : "Y-m-d H:i:s",
createPicker: function() {
var me = this,
format = Ext.String.format;
//修改picker为自定义picker
return new Go.picker.DateTime({
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: 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();
}
}
});
},
/**
* @private
*/
onExpand: function() {
var value = this.getValue();
//多传一个参数，从而避免时分秒被忽略。
this.picker.setValue(Ext.isDate(value) ? value : new Date(), true);
}
});
3、测试示例代码：
<html>
<head>
<title>Ext JS 4.2 Examples</title>
<meta http-equiv="Context-Type" content="text/html;chartset=utf-8">
<link rel="stylesheet" type="text/css" href="resources/ext-theme-neptune/ext-theme-neptune-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//启动ExtJs4动态加载特性
Ext.Loader.setConfig({
enabled:true,
disableCaching:false,
paths:{
'Go':'Go/'
}
});
Ext.onReady(function(){
Ext.create('Go.form.field.DateTime',{
renderTo:Ext.getBody(),
fieldLabel:'日期选择器',
value:'2013-04-27 12:12:12',
format:'Y-m-d H:i:s'
});
});
</script>
</head>
<body>
</body>
</html>
3、效果：
4、附代码：下载
正好要用到，非常感谢！
测试可用，十分感谢，如果可以做到点确定选时间而不是选择日期就选的时间就好了，感觉确定按钮有点鸡肋，我去掉了，哈哈
相关推荐
这个日历控件不仅提供标准的日期选择功能，还扩展到了小时、分钟和秒钟的精细化选择，使得用户能够精确设定时间，这对于需要精确时间输入的场景（如会议预约、定时任务等）非常有用。 该控件的核心功能可能包括以下...
总之，"ExtJs4.2.1年月日时分秒、时分秒控件"是关于使用ExtJS框架创建日期和时间选择功能的。通过理解和利用提供的组件、配置以及测试样例，开发者可以轻松地在Web应用中集成这些控件，提升用户体验。
《深入浅出Ext JS》是由徐会生编著，由人民邮电出版社出版的一本关于Ext JS技术的权威著作，特别是其第三版，专注于讲解Ext JS 4.2的新特性和实战应用。这本书旨在帮助读者从基础知识到高级技巧，全方位理解和掌握...
win7修复本地系统工具
《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt
《计算机专业英语》chapter12-Intelligent-Transportation.ppt
内容概要：本文详细介绍了基于西门子S7-1200博图平台的3轴伺服螺丝机程序。该程序使用SCL语言编写，结合KTP700组态和TIA V14及以上版本，实现了对X、Y、Z三个轴的精密控制。文章首先概述了程序的整体架构，强调了其在自动化控制领域的高参考价值。接着深入探讨了关键代码片段，如轴初始化、运动控制以及主程序的设计思路。此外，还展示了如何通过KTP700组态实现人机交互，并分享了一些实用的操作技巧和技术细节，如状态机设计、HMI交互、异常处理等。 适用人群：从事自动化控制系统开发的技术人员，尤其是对西门子PLC编程感兴趣的工程师。 使用场景及目标：适用于希望深入了解西门子S7-1200博图平台及其SCL语言编程特点的学习者；旨在帮助读者掌握3轴伺服系统的具体实现方法，提高实际项目中的编程能力。 其他说明：文中提供的代码示例和设计理念不仅有助于理解和学习，还能直接应用于类似的实际工程项目中。
内容概要：本文详细探讨了五种非线性滤波器（卡尔曼滤波(KF)、扩展卡尔曼滤波(EKF)、无迹卡尔曼滤波(UKF)、粒子滤波(PF)和变维卡尔曼滤波(VDKF)）在水下长基线定位（LBL）系统中的应用。通过对每种滤波器的具体实现进行MATLAB代码展示，分析了它们在不同条件下的优缺点。例如，KF适用于线性系统但在非线性环境中失效；EKF通过雅可比矩阵线性化处理非线性问题，但在剧烈机动时表现不佳；UKF利用sigma点处理非线性，精度较高但计算量大；PF采用蒙特卡罗方法，鲁棒性强但计算耗时；VDKF能够动态调整状态维度，适合信标数量变化的场景。 适合人群：从事水下机器人(AUV)导航研究的技术人员、研究生以及对非线性滤波感兴趣的科研工作者。 使用场景及目标：①理解各种非线性滤波器的工作原理及其在水下定位中的具体应用；②评估不同滤波器在特定条件下的性能，以便为实际项目选择合适的滤波器；③掌握MATLAB实现非线性滤波器的方法和技术。 其他说明：文中提供了详细的MATLAB代码片段，帮助读者更好地理解和实现这些滤波器。此外，还讨论了数值稳定性问题和一些实用技巧，如Cholesky分解失败的处理方法。
VMware-workstation-full-14.1.3-9474260
DeepSeek系列-提示词工程和落地场景.pdf
javaSE阶段面试题
《综合布线施工技术》第5章-综合布线工程测试.ppt
安川机器人NX100使用说明书.pdf
内容概要：本文详细介绍了将M7120型平面磨床的传统继电器控制系统升级为基于西门子S7-1200 PLC的自动化控制系统的过程。主要内容涵盖IO分配、梯形图设计和组态画面实现。通过合理的IO分配，确保了系统的可靠性和可维护性；梯形图设计实现了主控制逻辑、砂轮升降控制和报警逻辑等功能；组态画面则提供了友好的人机交互界面，便于操作和监控。此次改造显著提高了设备的自动化水平、运行效率和可靠性，降低了维护成本。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉PLC编程和控制系统设计的专业人士。 使用场景及目标：适用于需要进行老旧设备升级改造的企业，旨在提高生产设备的自动化水平和可靠性，降低故障率和维护成本。具体应用场景包括但不限于金属加工行业中的平面磨床等设备的控制系统改造。 其他说明：文中还分享了一些实际调试中的经验和技巧，如急停逻辑的设计、信号抖动的处理方法等，有助于读者在类似项目中借鉴和应用。
chromedriver-linux64-136.0.7103.48.zip
IMG_20250421_180507.jpg
《网络营销策划实务》项目一-网络营销策划认知.ppt
Lianantech_Security-Vulnerabil_1744433229
MybatisCodeHelperNew2019.1-2023.1-3.4.1