daterangepicker?是一個時間段選擇插件。官網地址：http://www.daterangepicker.com/

項目中需要實現如下圖的效果：

?

1.引入該插件所需要的JS?和 CSS ,該項目是以bootstrap為基礎開發的，所以同時也要引用bootstrap相關的文件。

文件目錄結構如下：

我的項目中引用路徑如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> <script type="text/javascript" src="daterangepicker.js"></script>

?

?2.寫文本框，HTML代碼如下：

<div class="input-group input-medium" id="defaultrange"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn default date-range-toggle" type="button"><i class="fa fa-calendar"></i></button></span> </div>

?

3.使用JS調用daterangepicker，并漢化。

$("#defaultrange").daterangepicker({opens: "left", //打開的方向，可選值有'left'/'right'/'center'format: "YYYY-MM-DD",separator: " to ",startDate: moment().subtract("days", 6),endDate: moment(),ranges: {"今天": [moment(), moment()],"昨天": [moment().subtract("days", 1), moment().subtract("days", 1)],"7天前": [moment().subtract("days", 6), moment()],"30天前": [moment().subtract("days", 29), moment()],"這個月": [moment().startOf("month"), moment().endOf("month")],"上個月": [moment().subtract("month", 1).startOf("month"), moment().subtract("month", 1).endOf("month")]},locale: {applyLabel: '確定',cancelLabel: '取消',fromLabel: '起始時間',toLabel: '結束時間',customRangeLabel: '自定義',daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],monthNames: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],firstDay: 1,},minDate: "01/01/2012",maxDate: "12/31/2018" }, function (t, e) {$("#defaultrange input").val(t.format("YYYY-MM-DD") + " - " + e.format("YYYY-MM-DD")) }), $("#defaultrange input").val(moment().subtract("days", 6).format("YYYY-MM-DD")+ " - "+ moment().format("YYYY-MM-DD")); //設置初始值

更多的案例參數配置，事件，方法，可訪問：http://www.daterangepicker.com/#options

?

總結

以上是生活随笔為你收集整理的daterangepicker 使用方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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