集成bootstrap-datetimepicker插件到ExtJs中

系统有一个需求：查询某个时间段内的后台数据，这就需要选择起始日期时间跟结束日期时间。但在ExtJs中只有DatePicker和TimePicker，不能满足我们的需求。这也就是本文的由来。我找到了一个bootstrap的datetimepicker插件，做法是将这个plugin集成到我们的ExtJs系统中来实现目的,分享在这里。

1 插件详情：
插件地址：[url]http://tarruda.github.io/bootstrap-datetimepicker/[/url]
这个插件既能选择日期也能选择时间，且使用起来也非常方便。
默认参数：

   $.fn.datetimepicker.defaults = {
    maskInput: false,
    pickDate: true,
    pickTime: true,
    pick12HourFormat: false,
    pickSeconds: true,
    startDate: -Infinity,
    endDate: Infinity,
    collapse: true
  };

2 使用插件
先下载下来：[url]http://tarruda.github.io/bootstrap-datetimepicker/assets/dist/bootstrap-datetimepicker-0.0.11.zip[/url]解压。
datetimepicker下里面有四个文件：
bootstrap-combined.min.css
bootstrap-datetimepicker.js
bootstrap-datetimepicker.min.css
bootstrap.min.js
（1）将文件夹拷贝到project里面。
（2）初始化页面中加入相应的css和js

<link href="js/datetimepicker/bootstrap-combined.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" media="screen" href="js/datetimepicker/bootstrap-datetimepicker.min.css">
	<!-- javascript used by bootstrap-datetimepicker -->
	<script type="text/javascript" src="js/datetimepicker/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/datetimepicker/bootstrap-datetimepicker.js"></script>

（2）UI里面插入要放置插件的div标识：

items: [
				{
					xtype: 'label',
					html: '<div id="fromDatetime" class="input-append date"><input type="text" class="ux-datetime-field" readonly></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div> '
				},//开始日期时间
				{
					xtype: 'label',
					html: '<div id="toDatetime" class="input-append date"><input type="text" class="ux-datetime-field" readonly></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div>'
				},//结束日期时间
				{
					xtype: 'tbseparator',
					style: {
						left: '157px !important',
						top: '3px !important'
					}
				},//工具栏垂直分割符
				{
					xtype: 'button',
					frame: false,
					itemId: 'searchBtn',
					margin: 1,
					padding: '0px 0px 1px',
					style: {
						top: '1px !important',
						left: '160px !important'
					},
					iconCls: 'icon-search',
					tooltip: '<div style="white-space:nowrap">Search for the failures within the dates</div>'
				}//查询按钮
		]

（3）控制器中对插件要进行初始化

onTriageToolbarAfterRender: function(component, eOpts) {
			var adjustDate = new Date(new Date().setDate(new Date().getDate()-3));
			var formatDate = Ext.Date.format(adjustDate, 'Y/m/d');
			$("#fromDatetime > input").attr('value',formatDate);
			$("#toDatetime > input").attr('value',Ext.Date.format(new Date() ,'Y/m/d 23:59:59'));
			$('#fromDatetime').datetimepicker({//初始化起始日期
				format: 'yyyy/MM/dd',
				language: 'en',
				//endDate: adjustDate,
				pickTime: true
			});

			$('#toDatetime').datetimepicker({//初始化结束日期
				format: 'yyyy/MM/dd hh:mm:ss',
				language: 'en',
				pickTime: true
				//startDate: adjustDate
			});
			var pick = $('#fromDatetime').data('datetimepicker');
			pick.format="MM/dd";
			pick.show();
			pick.hide();
			pick = $('#toDatetime').data('datetimepicker');
			pick.format="MM/dd";
			pick.show();
			pick.hide();
			return false;
	  }

（4）查询取值

onSearchBtnClick: function(button, e, eOpts) {
        var store = button.up('panel').store;
        if(store){
            fromPicker = $('#fromDatetime').data('datetimepicker');
            toPicker = $('#toDatetime').data('datetimepicker');
            store.proxy.extraParams = {
                ....
                start: Ext.Date.format(fromPicker.getDate(), 'Y/m/d')+" "+fromPicker.getDate().getUTCHours()+":"+fromPicker.getDate().getUTCMinutes()+":"+fromPicker.getDate().getUTCSeconds(),//取值
                end: Ext.Date.format(toPicker.getDate(), 'Y/m/d')+" "+toPicker.getDate().getUTCHours()+":"+toPicker.getDate().getUTCMinutes()+":"+toPicker.getDate().getUTCSeconds()//取值
            };
            store.load();
        }
        return false;
    },

3 效果如图

[img]http://dl2.iteye.com/upload/attachment/0097/9970/fc5a5c36-6694-3e74-ab3e-2c3c180a914b.png[/img]