時間外掛--daterangepicker使用和配置詳解
阿新 • • 發佈：2018-11-10
---------------------
作者：呆呆_小茗
來源：CSDN
原文：https://blog.csdn.net/baidu_38990811/article/details/79509418
版權宣告：本文為博主原創文章，轉載請附上博文連結！
1.序言:
daterangepicker是Bootstrap的一個時間元件,使用很方便用於選擇日期範圍的JavaScript元件。 設計用於Bootstrap CSS框架。它最初是為了改善報表而建立的，它可以連線到任何網頁元素，彈出兩個日曆，用於選擇日期、時間或從預定義的範圍，如“最後30天”。
2.需要的js和css:
bootstrap.min.css
daterangepicker.css
jquery-2.2.3.min.js
moment.js
daterangepicker.js
獲取程式碼檔案和js css檔案地址:https://pan.baidu.com/s/12fjQSWkm5rlWi2dgPH_tyw 密碼:elwb
3.配置詳解參考網址:
配置詳解(不太全,但夠了):https://www.cnblogs.com/leijing0607/p/7698414.html
配置詳解(配合上面一起看):http://blog.csdn.net/Webben/article/details/78319276
問題已經小BUG修復(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html
4.程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>daterangepicker元件Demo</title> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="daterangepicker.css"> <script src="jquery-2.2.3.min.js"></script> <script src="daterangepicker/moment.js"></script> <script src="daterangepicker/daterangepicker.js"></script> <script type="text/javascript"> $(function () { //單個時間外掛 $("input[name='date1']").daterangepicker( { singleDatePicker: true,//設定為單個的datepicker，而不是有區間的datepicker 預設false showDropdowns: true,//當設定值為true的時候，允許年份和月份通過下拉框的形式選擇 預設false autoUpdateInput: false,//1.當設定為false的時候,不給與預設值(當前時間)2.選擇時間時,失去滑鼠焦點,不會給與預設值 預設true timePicker24Hour : true,//設定小時為24小時制 預設false timePicker : false,//可選中時分 預設false locale: { format: "YYYY-MM-DD", separator: " - ", daysOfWeek: ["日","一","二","三","四","五","六"], monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"] } } ).on('cancel.daterangepicker', function(ev, picker) { $("#date1").val("請選擇日期"); $("#submitDate").val(""); }).on('apply.daterangepicker', function(ev, picker) { $("#submitDate").val(picker.startDate.format('YYYY-MM-DD')); $("#date1").val(picker.startDate.format('YYYY-MM-DD')); }); //區間時間外掛 $("input[name='date2']").daterangepicker( { // autoApply: true, autoUpdateInput: false, // alwaysShowCalendars: true, ranges: { '今天': [moment(),moment()], '昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')], '近7天': [moment().subtract(7, 'days'), moment()], '這個月': [moment().startOf('month'), moment().endOf('month')], '上個月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] }, locale: { format: "YYYY/MM/DD HH:MM:SS", separator: " - ", applyLabel: "確認", cancelLabel: "清空", fromLabel: "開始時間", toLabel: "結束時間", customRangeLabel: "自定義", daysOfWeek: ["日","一","二","三","四","五","六"], monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"] } } ).on('cancel.daterangepicker', function(ev, picker) { $("#date2").val("請選擇日期範圍"); $("#startTime").val(""); $("#endTime").val(""); }).on('apply.daterangepicker', function(ev, picker) { $("#startTime").val(picker.startDate.format('YYYY-MM-DD')); $("#endTime").val(picker.endDate.format('YYYY-MM-DD')); $("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD')); }); }); </script> </head> <body> <div class="form-group"> <label>單個</label> <div> <input type="text" name="date1" id="date1" class="form-control" style="width: 20%;"> <input type="hidden" id = "submitDate" name="submitDate" class="form-control" /> </div> </div> <br> <div class="form-group"> <label>區間</label> <div> <input type="text" name="date2" id="date2" class="form-control" style="width: 20%;"> <input type="hidden" id = "startTime" name="startTime" class="form-control" /> <input type="hidden" id = "endTime" name="endTime" class="form-control" /> </div> </div> </body> </html>