目录
一、介绍bootstrap_datetimepicker插件
bootstrap_datetimepickep是日期时间选择器,用于在表单中添加日历
二、bootstrap_datetimepicker使用效果
三、bootstrap_datetimepicker的使用
我是在jsp页面中引入的bootstrap_datetimepicker的插件,按照如下顺序引入,被依赖的插件放在前面,必须按照如下顺序引入,首先是引入Jquery插件,其次是bootstrap插件,最后是datetimepicker插件,强调,必须按照如下顺序:
引入插件后,调用工具函数使用
文章来源:https://www.toymoban.com/news/detail-606368.html
完整测试代码
<%@ 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.min.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,//设置自动显示为今天
clearBtn:false//设置是否清空按钮,默认为false
});
});
</script>
</head>
<body>
<input type="text" id="myDate">
</body>
</html>
官方文档:https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
插件地址:链接:https://pan.baidu.com/s/1yN-L7bhwdSXwfYfh2MUj2A
提取码:yyds文章来源地址https://www.toymoban.com/news/detail-606368.html
到了这里,关于介绍bootstrap_datetimepicker插件的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!