bootstrap框架的日历（bootstrap-datetimepicker）
2024-06-24 14:39:53
1.在需要使用 bootstrap框架的日历时候，首先在官网上下载并引入到项目bootstrap_3.3.0的jar包，和bootstrap-datetimepicker-master的jar包
2.在需要使用的该日历的jsp页面，按照顺序引入js文件（jquery文件，bootstarp框架文件，bootstarp-datetimepicker文件），css文件不区分顺序
3.编写datetimepicker函数
4.设置该input标签的只读属性readonly，不可以修改
详细代码
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<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 () {//给“创建”按钮添加单击事件$("#createActivityBtn").click(function () {//初始化工作$("#createActivityForm").get(0).reset();//弹出创建市场活动的模态窗口$("#createActivityModal").modal("show");});//给保存按钮添加单击事件$("#saveCreateActivityBtn").click(function () {//收集参数var owner=$("#create-marketActivityOwner").val();var name=$.trim($("#create-marketActivityName").val());var startDate=$("#create-startTime").val();var endDate=$("#create-endTime").val();var cost=$.trim($("#create-cost").val());var description=$.trim($("#create-describe").val());//表单验证if (owner==""){alert("所有者不能为空!");return;}if (name==""){alert("名称不能为空!");return;}if (startDate!="" && endDate!=""){//使用字符串的大小代替日期大小if (endDate<startDate){alert("结束日期不能比开始日期小!");return;}}var regExp=/^(([1-9]\d*)|0)$/;if (!regExp.test(cost)){alert("成本只能是非负整数！");return;}//发送请求$.ajax({url:"workbench/activity/saveCreateActivity.do",type:'post',data:{owner:owner,name:name,startDate:startDate,endDate:endDate,cost:cost,description:description},dataType:'json',success:function (data) {if (data.code=="1"){//关闭模态窗口$("#createActivityModal").modal("hide");//刷新市场活动列，显示第一页数据，保持每页显示条数不变}else {//提示信息alert(data.message);//模态窗口不关闭$("#createActivityModal").modal("show");}}});});//当容器加载完成之后，对容器调用工具函数$(".mydate").datetimepicker({language:'zh-CN',//语言format:'yyyy-mm-dd',//日期的格式minView:'month',//可以选择的最小视图initialDate:new Date(),//初始化显示的日期autoclose:true,//选择完日期后自动关闭日历todayBtn:true,//设置是否显示今天的按钮clearBtn:true//设置是否显示清空按钮});});</script>
</head>
<body><!-- 创建市场活动的模态窗口 --><div class="modal fade" id="createActivityModal" role="dialog"><div class="modal-dialog" role="document" style="width: 85%;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel1">创建市场活动</h4></div><div class="modal-body"><form id="createActivityForm" class="form-horizontal" role="form"><div class="form-group"><label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><select class="form-control" id="create-marketActivityOwner"><c:forEach items="${requestScope.userList}" var="user"><option value="user.id">${user.name}</option></c:forEach></select></div><label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="create-marketActivityName"></div></div><div class="form-group"><label for="create-startTime" class="col-sm-2 control-label">开始日期</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control mydate" id="create-startTime" readonly></div><label for="create-endTime" class="col-sm-2 control-label">结束日期</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control mydate" id="create-endTime" readonly></div></div><div class="form-group"><label for="create-cost" class="col-sm-2 control-label">成本</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="create-cost"></div></div><div class="form-group"><label for="create-describe" class="col-sm-2 control-label">描述</label><div class="col-sm-10" style="width: 81%;"><textarea class="form-control" rows="3" id="create-describe"></textarea></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button></div></div></div></div><!-- 修改市场活动的模态窗口 --><div class="modal fade" id="editActivityModal" role="dialog"><div class="modal-dialog" role="document" style="width: 85%;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel2">修改市场活动</h4></div><div class="modal-body"><form class="form-horizontal" role="form"><div class="form-group"><label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><select class="form-control" id="edit-marketActivityOwner"><c:forEach items="${requestScope.userList}" var="user"><option value="user.id">${user.name}</option></c:forEach></select></div><label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="edit-marketActivityName" value="发传单"></div></div><div class="form-group"><label for="edit-startTime" class="col-sm-2 control-label">开始日期</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="edit-startTime" value="2020-10-10"></div><label for="edit-endTime" class="col-sm-2 control-label">结束日期</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="edit-endTime" value="2020-10-20"></div></div><div class="form-group"><label for="edit-cost" class="col-sm-2 control-label">成本</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="edit-cost" value="5,000"></div></div><div class="form-group"><label for="edit-describe" class="col-sm-2 control-label">描述</label><div class="col-sm-10" style="width: 81%;"><textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" data-dismiss="modal">更新</button></div></div></div></div><!-- 导入市场活动的模态窗口 --><div class="modal fade" id="importActivityModal" role="dialog"><div class="modal-dialog" role="document" style="width: 85%;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">导入市场活动</h4></div><div class="modal-body" style="height: 350px;"><div style="position: relative;top: 20px; left: 50px;">请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small></div><div style="position: relative;top: 40px; left: 50px;"><input type="file" id="activityFile"></div><div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" ><h3>重要提示</h3><ul><li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li><li>给定文件的第一行将视为字段名。</li><li>请确认您的文件大小不超过5MB。</li><li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li><li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li><li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li><li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li></ul></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button id="importActivityBtn" type="button" class="btn btn-primary">导入</button></div></div></div></div><div><div style="position: relative; left: 10px; top: -10px;"><div class="page-header"><h3>市场活动列表</h3></div></div></div><div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;"><div style="width: 100%; position: absolute;top: 5px; left: 10px;"><div class="btn-toolbar" role="toolbar" style="height: 80px;"><form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;"><div class="form-group"><div class="input-group"><div class="input-group-addon">名称</div><input class="form-control" type="text"></div></div><div class="form-group"><div class="input-group"><div class="input-group-addon">所有者</div><input class="form-control" type="text"></div></div><div class="form-group"><div class="input-group"><div class="input-group-addon">开始日期</div><input class="form-control" type="text" id="startTime" /></div></div><div class="form-group"><div class="input-group"><div class="input-group-addon">结束日期</div><input class="form-control" type="text" id="endTime"></div></div><button type="submit" class="btn btn-default">查询</button></form></div><div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;"><div class="btn-group" style="position: relative; top: 18%;"><button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button><button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button></div><div class="btn-group" style="position: relative; top: 18%;"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button><button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button><button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button></div></div><div style="position: relative;top: 10px;"><table class="table table-hover"><thead><tr style="color: #B3B3B3;"><td><input type="checkbox" /></td><td>名称</td><td>所有者</td><td>开始日期</td><td>结束日期</td></tr></thead><tbody><tr class="active"><td><input type="checkbox" /></td><td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td><td>zhangsan</td><td>2020-10-10</td><td>2020-10-20</td></tr><tr class="active"><td><input type="checkbox" /></td><td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td><td>zhangsan</td><td>2020-10-10</td><td>2020-10-20</td></tr></tbody></table></div><div style="height: 50px; position: relative;top: 30px;"><div><button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button></div><div class="btn-group" style="position: relative;top: -34px; left: 110px;"><button type="button" class="btn btn-default" style="cursor: default;">显示</button><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">10<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">20</a></li><li><a href="#">30</a></li></ul></div><button type="button" class="btn btn-default" style="cursor: default;">条/页</button></div><div style="position: relative;top: -88px; left: 285px;"><nav><ul class="pagination"><li class="disabled"><a href="#">首页</a></li><li class="disabled"><a href="#">上一页</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">下一页</a></li><li class="disabled"><a href="#">末页</a></li></ul></nav></div></div></div></div>
</body>
</html>项目测试
选中文本框，不可以正常删除，点击清空可以正常清空
编写内容，提交数据库
数据库成功添加
bootstrap框架的日历（bootstrap-datetimepicker）相关推荐
- bootstrap框架基础使用
bootstrap框架基础使用 bootstrap简介 bootstrap引入和使用 网络引用 本地引用 bootstrap基础 bootstrap组成 bootstrap组件 bootstrap简介 ...
- 阿里百秀模仿（基于bootstrap框架）
阿里百秀模仿(基于bootstrap框架) 导入bootstrap框架,Normalize.css和jquery.js 创建html与css <!DOCTYPE html> <htm ...
- bootstrap框架过时了吗_浅议bootstrap 框架优缺点
韦建波 韦龙勇 [摘 要]Bootstrap是近年来比较流行的前端开发框架,本文介绍了Bootstrap框架的发展历史和重要特性,分析了Bootstrap框架设计的优缺点,能对web前端开发人员带来一 ...
- Bootstrap学习-详解Bootstrap下拉菜单组件
转载:https://www.cnblogs.com/jnslove/p/5421187.html bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对 ...
- 使用BootStrap框架设置全局CSS样式
一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
- bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
- 前端Bootstrap框架
Bootstrap框架 第1节 学习目标 能够创建bootstrap的模板 能够使用boostrap的两种布局容器 能够理解bootstrap的响应式布局的特点 能够查询文档创建bootstrap的按 ...
- Bootstrap框架菜鸟入门教程
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...
- Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
最新文章
- linux怎么允许远程root登录
- qt中对任务繁忙时QProgressDialog的使用
- Android数据库--Sqlcipher的使用（一）
- Centos 6.2部署CSVN服务器
- Bear and Finding Criminals
- new调用函数，new具体做了什么？
- mysql utf8跟utf8mb4_MySQL utf8 和 utf8mb4 的区别
- 基于HTML5手机上下滑动翻页特效
- InstallShield SdShowMsg未关闭导致安装程序无法停止
- hpml350服务器安装系统,安装HP ML350
- 5个免费邮箱，10分钟临时邮箱，一定能用，持续更新
- 2-2 nginx整体结构
- 安卓真机如何连接本地服务器_Android真机连接本地服务器安装部署方法
- 万能 随机森林回归 补缺函数
- excel如何获取括号内字符以及excel如何根据第一列是否相等判断是否累加第二列
- 4月8日云栖精选夜读：阿里巴巴与清华大学成立联合实验室 机器将有五感、懂感情
- ES6~11：全部内容(2w+字)推荐全文复制到md文档，或者word文档
- 人脸表情识别 微信小程序 百度智能云人脸识别API（含完整项目文件）
- 基于Android平台智能手机报系统的设计与开发
- ArcGIS基础：CAD数据转换为GIS数据（符号化显示、数据转换、线转面、空间连接）