日历插件datatimepicker的使用 - JSP

achong

2022-08-01 / 0 评论 / 63 阅读 / 正在检测是否收录...

08/01

DateTimePicker
图形化日历时间日期选择器
DateTimePicker是基于JQuery的时间日期选择插件。只需要2行代码，即可轻松实现网页图形化日期时间选择器。
批注 2022-08-01 170819.png

datatimepicker软件包下载地址：https://www.datetimepicker.cn/download/

有一个编辑框

<body>
    <input id="myDate" type="text" readonly>
</body>

然后按顺序引入相关css和js

jquery依赖
bootstrap框架
dataTimePicker插件

<%--    jquery--%>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<%--    bootstrapk框架--%>
    <link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" href="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%--    bootstrap datetimepicker插件--%>
    <link rel="stylesheet" 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>

在页面加载完成后注册插件

<script type="text/javascript">
$(function (){
    //当容器加载完成，对容器调用工具函数
    $("#myDate").datetimepicker({
        language:'zh-CN',   //语言
        format:'yyyy-mm-dd',    //日期格式
        minView:'month',    //最小精度
        autoclose:'true',   //默认值false，当选择一个日期之后是否立即关闭此日期时间选择器。
        initData:new Date(),     //默认时间
        todayBtn:'ture',       //是否显示选择当前时间按钮
        clearBtn:'true'         //是否显示清空按钮

    });
})

完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
<%--    jquery--%>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<%--    bootstrapk框架--%>
    <link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" href="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%--    bootstrap datetimepicker插件--%>
    <link rel="stylesheet" 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_datetimepicker插件</title>
    <script type="text/javascript">
    $(function (){
        //当容器加载完成，对容器调用工具函数
        $("#myDate").datetimepicker({
            language:'zh-CN',   //语言
            format:'yyyy-mm-dd',    //日期格式
            minView:'month',    //最小精度
            autoclose:'true',   //默认值false，当选择一个日期之后是否立即关闭此日期时间选择器。
            initData:new Date(),     //默认时间
            todayBtn:'ture',       //是否显示选择当前时间按钮
            clearBtn:'true'         //是否显示清空按钮

        });
    })
    </script>
</head>
<body>
    <input type="text" id="myDate" readonly>
</body>
</html>

版权属于： Hello World

本文链接： http://bnzuu.com/index.php/archives/32.html

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

日历插件datatimepicker的使用 - JSP

完整代码

评论 (0)