【无标题】

在开发过程中，遇到一些 (1)实现起来比较复杂；(2)跟业务无关； 的问题，可以选择使用插件解决，例如在使用日历时，用户自行输入较为繁琐，且格式容易出错，所以可以使用其他人开发的插件，满足用户需求。

bootstrap中日历插件为：bootstrap-datetimepicker
bootstrap插件使用步骤：

1.引入开发包：

(1)下载开发包，拷贝到项目webapp目录下

在bootstrap官网中找到bootstrap框架和bootstrap_datatimepicker插件包，并下载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YWYcOcRd-1673360995855)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20230110122230966.png)]

(2)把开发包引入到jsp文件中：

<%--引入jquery--%>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<%-- 引入bootstrap框架--%>
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"/>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%--bootstrap_datatimepicker插件--%>
<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"/>
<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>

2.创建容器：

<%--readonly属性 只能读不能手动改--%>
   <input type="text" id="myDate" readonly>

​

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

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

4.项目中应用：

js代码：

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

容器代码：

<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>

<input type="text" class="form-control mydate" name="mydate" id="create-endDate" readonly>