版权所有，转载请注明来源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);
            },