BootStrap bootstrap日历控件
位置:https://www.layui.com/laydate/
原创博客:https://blog.****.net/qq_28633249/article/details/77142352
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<title>日历部分</title>
<!-- 这个是自适应各种分辨率的屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/first_page.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<style>
body{
padding: 20px;
}
.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}
.demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
.demo-footer a{padding: 0 5px; color: #01AAED;}
</style>
</head>
<body>
<!-- 日历 -->
<input type="text" class="demo-input" placeholder="请选择日期" id="test1">
<script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
<script>
lay('#version').html('-v'+ laydate.v);
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
</script>
</body>
</html>
把laydate文件夹全部拷贝到myelipse的web项目下面,不能少。
效果图如下:
这里有一大堆时间日期格式可以选择;
如果你想要用什么样的格式,只要点击查看代码就可以了,然后把代码拷贝一下就可以了,
但是一定注意: