Bootstrap中的时间插件

发布时间 2023-11-18 12:33:06作者: 小徐同学x

需要下面文件包

 

当用户进行对文本框点击的时候弹出来时间选择框,而且用户不能自己修改,只能通过这个插件

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2   <%
 3   String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
 4 %>
 5   <html>
 6   <head>
 7   <base href="<%=basePath%>">
 8   
 9   <!--JQUERY-->
10   <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
11   <!--BOOTSTRAP框架-->
12   <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
13   <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
14   <!--BOOTSTRAP_DATETIMEPICKER插件-->
15   <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
16   <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
17   <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
18  
19   <title>演示bs_datatimepicker插件</title>
20   <script type="text/javascript">
21   $(function () {
22     //当容器加载完成,对容器调用工具函数
23     $("#myDate").datetimepicker({
24       language:'zh-CN', //语言
25       format:'yyyy-mm-dd',//日期的格式
26       minView:'month', //可以选择的最小视图
27       initialDate:new Date(),//初始化显示的日期
28       autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
29       todayBtn:true,//设置是否显示"今天"按钮,默认是false
30       clearBtn:true//设置是否显示"清空"按钮,默认是false
31     });
32   });
33 </script>
34   </head>
35   <body>
36   <input type="text" id="myDate" readonly>
37   </body>
38   </html>