bootstrap_datetimepicker插件的使用

终有弱水替沧海i

于 2022-08-17 19:03:46 发布

阅读量503

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap servlet 前端

本文链接：https://blog.csdn.net/qq_64431576/article/details/126392393

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

以下是日历插件使用具体的测试实例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--
        http://127.0.0.1:8080/crm/
        request.getScheme()用来获取协议
        request.getServerName()用来获取主机ip
        request.getServerPort()用来获取端口号
        request.getContextPath()用来获取资源跟路径
    --%>
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"%>">
    <meta charset="UTF-8">
    <%--引入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>
    <%--引入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>datetimepicker插件演示</title>
    <script type="text/javascript">
        $(function (){
            //语言包
            (function($){
                $.fn.datetimepicker.dates['zh-CN'] = {
                    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
                    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
                    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    today: "今天",
                    suffix: [],
                    meridiem: ["上午", "下午"],
                    clear:'清空'
                };
            }(jQuery));
            //当容器加载完成之后，对容器调用日历工具函数
            $("#myDate").datetimepicker({
                language:'zh-CN',//设置语言
                initialData:new Date(),//初始化显示的日期
                clearBtn:true,//设置是否显示”清空“按钮，默认为false不显示
                todayBtn:true,//设置是否显示”今天“按钮，默认为false不显示
                autoclose:true,//设置选择完日期后是否自动关闭
                format:'yyyy-mm-dd',//设置日期格式
                minView:'month'//设置可以选择的最小视图
            })
        })
    </script>
</head>
<body>
    <input type="text" id="myDate" readonly>
</body>
</html>

bootstrap_datetimepicker插件-Javascript文档类资源-CSDN下载