系统有一个需求:查询某个时间段内的后台数据,这就需要选择起始日期时间跟结束日期时间。但在ExtJs中只有DatePicker和TimePicker,不能满足我们的需求。这也就是本文的由来。我找到了一个bootstrap的datetimepicker插件,做法是将这个plugin集成到我们的ExtJs系统中来实现目的,分享在这里。
1 插件详情:
插件地址:
http://tarruda.github.io/bootstrap-datetimepicker/
这个插件既能选择日期也能选择时间,且使用起来也非常方便。
默认参数:
$.fn.datetimepicker.defaults = {
maskInput: false,
pickDate: true,
pickTime: true,
pick12HourFormat: false,
pickSeconds: true,
startDate: -Infinity,
endDate: Infinity,
collapse: true
};
2 使用插件
先下载下来:
http://tarruda.github.io/bootstrap-datetimepicker/assets/dist/bootstrap-datetimepicker-0.0.11.zip解压。
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 效果如图
- 大小: 10.4 KB
分享到:
相关推荐
bootstrap-datetimepicker-master.zip里面有日期插件js
bootstrap-datetimepicker.min.js、bootstrap-datepicker.min.js
在 bootstrap-datetimepicker 基础上添加了“清空按钮”,目前仅修改了简体、繁体、英文,其它语言版本需要自行添加 clear 对应的文本。bootstrap-datetimepicker.min.js 做了同步修改,已测试通过。当前修改的源码 ...
Bootstrap-datetimepicker年月日时分秒均可选择,对js文件做小的改动,并且附上Boostrap-datetimepicker的css文件,具体运用可参考我的博客!
基于bootstrap-datetimepicker的日期选择中文汉化,同时可以获取选择到的日期 使用说明可见博客: https://blog.csdn.net/qq_41986312/article/details/83750975
bootstrap-datetimepicker是bootstrap自带的时间控件,实现简单方便,功能相对较全
bootstrap样式控制的datetimepicker时间组件,分为bootstrap v2、bootstrap v3、bootstrap v4三个版本
java运行依赖jar包
bootstrap日历控件datetimepicker,所需工具类:bootstrap.css;bootstrap-datetimepicker.min.css;bootstrap.min.js;bootstrap-datetimepicker.min.js
bootstrap-datetimepicker时间控件的js和css包括:bootstrap-datetimepicker.js;moment-with-locales.min.js(汉化js);bootstrap-datetimepicker.min.css
bootstrap-datetimepicker时间控件使用小demo,bootstrap-datetimepicker时间控件使用小demo
bootstrap-datetimepicker-master
react-bootstrap-datetimepicker 时间选择控件
bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...
bootstrap-datetimepicker添加清除按钮
时间控件 中文 可以设置日历为中文 帮助开发 * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung <advanimal@gmail.com>
常用的js,包括jquery-1.12.4.js,bootstrap.min.js,bootstrap-datetimepicker.fr.js,bootstrap-datetimepicker.js
前端项目-angular-js-bootstrap-datetimepicker,日期时间选取器AngularJS引导插件
前端项目-vue-bootstrap-datetimepicker,用于引导日期时间选择器的Vue.js组件
针对 http://blog.csdn.net/xiaofenglu/article/details/18700001 的实例,主要介绍了bootstrap-datetimepicker的使用方式