當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

bootstrap框架的日历（bootstrap-datetimepicker）

發布時間：2023/12/20 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap框架的日历（bootstrap-datetimepicker）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。