日期插件——bs_datetimepicker

一.效果

二.文档

中文文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

博客文档：http://www.h-ui.net/lib/Bootstrap.datetimepicker.js.shtml

三.使用步骤

3.1 引入开发包：.js,.css

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

• bootstrap.min.css
• jQuery.min.js
• bootstrap.min.js
• bootstrap-datetimepicker.min.css
• bootstrap-datetimepicker.min.js
• bootstrap-datetimepicker.zh-CN.js (汉化)

<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" />

<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/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="static/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

有可能存在汉化不成的情况，可以将汉化包中的内容自行编写到<script>标签中!!! 如下：

<script type="text/javascript">
	//解决日期中文乱码问题
	(function($){
		$.fn.datetimepicker.dates['zh-CN'] = {
			days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
			daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
			daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
			months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			today: "今天",
			clear: "清空",
			suffix: [],
			meridiem: ["上午", "下午"]
		};
	}(jQuery));
</script>

3.2 创建容器

<input type="text"><div>

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

$(".mydate").datetimepicker({
	format:"yyyy-mm-dd",//日期的格式
	minView:"month",//可以选择的最小视图
	autoclose:true,//设置选择完日期或者时间之后，是否自动关闭日历
	language:"zh-CN",//语言
	initialDate:new Date(),//初始化显示的日期
	todayBtn:true,//设置是否显示"今天"按钮,默认是false
	clearBtn:true//设置是否显示"清空"按钮，默认是false
});

end: 如需了解更多，请去官方文档查询！！！！