js日历插件

最新推荐文章于 2024-07-31 16:50:55 发布

h259077

最新推荐文章于 2024-07-31 16:50:55 发布

阅读量1.1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/h259077/article/details/127825069

版权

日历插件：bootstraprap-datetimepicker

前端插件使用步骤：

1.引入开发包： js css 文件

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

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

<link rel="stylesheet" type="text/css" href="*/*.css">
<script type="text/javascript" src="*/*.js"></script>

2.创建容器：

<input type="text" id="myDate">

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <%--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 datetimepicker--%>
  <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.min.js"></script>
  <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript">
         $(function(){
             //当容器加载完成，对容器调用工具函数
             $("#myDate").datetimepicker({
                 language:"zh-CN" ,//语言
                 format:'yyyy-mm-dd', //日期的格式
                 minView:'month',//可以选择的最小视图
                 initialDate:new Date(),
                 autoclose: false,//设置选择完日期之后，是否自动关闭日历
                 todayBtn:true //设置死否显示 今天按钮 默认设计false
             });
         })
    </script>
    <title>Title</title>
</head>
<body>
<div style="text-align: center;vertical-align: middle;">
<input type="text" id="myDate" >
</div>
</body>
</html>