日历、分页插件的使用

日历插件

1、首先把插件所在的文件导入项目中的"webapp"文件夹下的"jquery"文件夹中，这样就可以使用了

2、在"xxx.jsp"文件中导入依赖注意事项如下：

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />   //由于插件是依赖于bootstrap的，所以在导入插件之前要先导入bootstrap，这个文件也在jquery文件夹下
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" /> 
//这两个的type="text/css",表示是用于页面布局的"css"代码依赖项

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
// 这里导入的是写js代码所依赖的src="jquery/jquery-1.11.1-min.js" js文件   以及   src="jquery/bootstrap_3.3.0/js/bootstrap.min.js" 日历插件文件
<%--bs_datetimepicker插件--%>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>  //到这里完成所有依赖的导入

3、在依赖导入完成后，在js的入库函函数中就可以给想要绑定的文本框等绑定日历了：

//当容器加载完成，对容器调用工具函数
$(".myDate").datetimepicker({ //这个".myDate"使用的是class类型选择器
	language:'zh-CN', //语言
	format:'yyyy-mm-dd', //日期的格式
	minView:'month', //设置日期选择器最小能展示的选择范围视图
	initialDate:new Date(), //设置日历初始化日期
	autoclose:true, //选择日期之后，自动关闭日历视图
	todayBtn:true, //显示"今天"按钮
	clearBtn:true  //显示"清空"按钮
})

<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control myDate" id="create-startTime" readonly> //这里的"readonly"是只读的意思，就是只能选，不能修改
</div>

4、到这里就完成了,可以跑动程序来看看效果了

分页查询插件

1、分页查询插件的使用和日历插件的第一步是一样的，把文件导入jquery文件夹下即可。

2、第二步原理一样，在js代码块中，导入各种依赖：

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%-- PAGINATION plugin --%>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

3、导入完成后，给分页查询在页面布局需要使用的地方绑定一个

模块，方便使用：

4、效果