日历插件bootstrap-datetimepicker的使用

日历插件bootstrap-datetimepicker的使用

一、引入开发包：.js,.css

• 下载开发包，拷贝到项目webapp目录下
• 把开发包引入到jsp文件中：

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.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>
<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>
<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>

二、创建容器：

 <div class="form-group">
   <div class="input-group">
      <div class="input-group-addon">开始日期</div>
	  <input id="query-startDate" class="form-control mydate" type="text" readonly/>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">结束日期</div>
	  <input id="query-endDate" class="form-control mydate" type="text" readonly/>
    </div>
</div>

三、当容器加载完成之后，对容器调用工具函数.

/**	日期函数
		 *	当容器加载完成后，对容器调用工具函数
		 *	给对应的日期input设置类属性:mydate
		*/
		$(".mydate").datetimepicker({
			language:'zh-CN',//语言
			format:'yyyy-mm-dd',//日期的格式
			minView:'month',//可以选择的最小视图
			initialDate:new Date(),//初始化显示的日期
			autoclose:'true',//设置选择完日期或者时间之后，是否自动关闭日历
			todayBtn:"true",//设置是否显示“今天”按钮  默认false
			clearBtn:'true',//是否清空日期，默认false
			todayHighlight:'true',
		});

二、在指定的标签中显示jsp页面片段：

• 选择器.html(jsp页面片段的字符串);//覆盖显示
• 选择器.append(jsp页面片段的字符串);//追加显示
• 选择器.after(jsp页面片段的字符串);
• 选择器.before(jsp页面片段的字符串);
• 选择器.text(jsp页面片段的字符串);