0


介绍bootstrap_datetimepicker插件的使用

目录

文章目录

一、介绍bootstrap_datetimepicker插件

bootstrap_datetimepickep是日期时间选择器,用于在表单中添加日历

二、bootstrap_datetimepicker使用效果

在这里插入图片描述

在这里插入图片描述

三、bootstrap_datetimepicker的使用

我是在jsp页面中引入的bootstrap_datetimepicker的插件,按照如下顺序引入,被依赖的插件放在前面,必须按照如下顺序引入,首先是引入Jquery插件,其次是bootstrap插件,最后是datetimepicker插件,强调必须按照如下顺序:
在这里插入图片描述
在这里插入图片描述
引入插件后,调用工具函数使用
在这里插入图片描述

完整测试代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html><head><basehref="<%=basePath%>"><!--JQUERY--><scripttype="text/javascript"src="jquery/jquery-1.11.1-min.js"></script><!--BOOTSTRAP框架--><linkrel="stylesheet"type="text/css"href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"><scripttype="text/javascript"src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><!--BOOTSTRAP_DATETIMEPICKER插件--><linkrel="stylesheet"type="text/css"href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"><scripttype="text/javascript"src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script><scripttype="text/javascript"src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script><title>演示bs_datatimepicker插件</title><scripttype="text/javascript">$(function(){//当容器加载完成,对容器调用工具函数$("#myDate").datetimepicker({language:'zh-CN',//语言format:'yyyy-mm-dd',//日期的格式minView:'month',//可以选择的最小视图initialDate:newDate(),//初始化显示的日期autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历todayBtn:true,//设置自动显示为今天clearBtn:false//设置是否清空按钮,默认为false});});</script></head><body><inputtype="text"id="myDate"></body></html>

官方文档:https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
插件地址:链接:https://pan.baidu.com/s/1yN-L7bhwdSXwfYfh2MUj2A
提取码:yyds


本文转载自: https://blog.csdn.net/weixin_45773002/article/details/126922626
版权归原作者 南桥秋风 所有, 如有侵权,请联系我们删除。

“介绍bootstrap_datetimepicker插件的使用”的评论:

还没有评论