BootStrap bootstrap日历控件

最新推荐文章于 2024-08-10 07:14:59 发布

qq_37591637

最新推荐文章于 2024-08-10 07:14:59 发布

阅读量6.2k

点赞数 1

分类专栏： jsp网页学习专栏文章标签： BootStrap 日历控件

本文链接：https://blog.csdn.net/qq_37591637/article/details/84099530

版权

jsp网页学习专栏专栏收录该内容

74 篇文章 7 订阅

订阅专栏

位置：https://www.layui.com/laydate/

原创博客：https://blog.csdn.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>