js日历插件及其使用

一类问题：
1)实现起来比较复杂。
2)跟业务无关。

日历插件：bootstrap-datetimepicker
前端插件使用步骤：
1)引入开发包：.js,.css
下载开发包，拷贝到项目webapp目录下
把开发包引入到jsp文件中：<link><script>
2)创建容器：<input type="text"><div>
3)当容器加载完成之后，对容器调用工具函数.

步骤1:引入开发包:js,.css

需要去官网下载,这个我没找到,太麻烦了

下载完之后放到项目webapp目录下,引入到jsp文件中.

image-20221030222411469

步骤二:创建容器：

步骤三:)当容器加载完成之后，对容器调用工具函数.

我这个是测试专门写的,页面就一个输入框.所有代码显示如下,这个文件是在webapp下存放的,不是在web-inf,测试主要是为了方便.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    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.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <title>演示bs_datatimepicker插件</title>
<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
    });
});
</script>
</head>
<body>
<input type="text" id="myDate" readonly>
</body>
</html>

实现效果展示

image-20221030223033633

image-20221030223130935

posted @ 2022-10-30 22:32  哩个啷个波  阅读(701)  评论(0)  编辑  收藏  举报