js插件---bootstrap插件daterangepicker是什麼

js插件---bootstrap插件daterangepicker是什麼

1、總結

一句話總結：日期段選擇插件，也可選擇日期

日期段選擇插件，也可選擇日期

 

一、daterangepicker 控件如何設置日期格式？

不能直接在選項中format，而是得在選項的locale屬性中再format

不能直接在選項中format，而是得在選項的locale屬性中再format，由於這個插件的locale屬性是設置顯示樣式的

直接搜索插件如何使用卻是一個不錯的方式

代碼以下：

<script> $(function () {//Date range picker
 $('#reservation').daterangepicker({ format: 'YYYY-MM-DD', locale:{ format: 'YYYY-MM-DD', } },function (start, end) { //alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 }); }); </script>

 

 

 

 

 

2、bootstrap日期插件daterangepicker的使用

官網文檔位置：Date Range Picker — JavaScript Date & Time Picker Library
http://www.daterangepicker.com/

參考：bootstrap日期插件daterangepicker的使用 - u012854400的專欄 - CSDN博客
https://blog.csdn.net/u012854400/article/details/45293037

今天用的了bootstrap日期插件感受搜索的資料不是不少在此寫下一些使用的心得：
插件開源地址：daterangepicker日期控件，
插件使用只要按照開源中的文檔信息來就好先包括如下引用：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

包含對jquery，bootstrap框架的引用，以及日期處理用的moment.js,最後加載上這個插件的js和css文件
而後和大部分jq插件同樣，該插件也是對$.fn的擴展因此進行如下的操做來使用這個控件

<script type="text/javascript"> $(document).ready(function() { $('input[name="daterange"]').daterangepicker(); }); </script>

用jq獲取到你要插入的那個元素而後運行daterangepicker函數就能使用它默認的樣式和屬性了，
不過光有這個確定是不行的，daterangepicker函數能夠接受一個參數對象和一個回調函數，以下：

$('input[name="daterange"]').daterangepicker(
  { 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: '2013-12-31'
  },
  function(start, end, label) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }
);

回調函數會在日期更改以後觸發有三個參數，開始時間，結束時間以及標籤名，能夠在這裏執行你要進行的操做如ajax請求
以上就能夠構建一個英文版的日期控件了

接下來着重介紹一下locale和ranges兩個參數
首先是locale這個參數locale是構建本地語言應用的重要參數（github上說locale接受對象參數，不過並無說明對象的屬性）
如下是插件中locale默認屬性

{
applyLabel: ‘Apply’,
cancelLabel: ‘Cancel’,
fromLabel: ‘From’,
toLabel: ‘To’,
weekLabel: ‘W’,
customRangeLabel: ‘Custom Range’,
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData()._week.dow };

咱們只有更改這些參數就可以使這個插件變成中文的插件

$('input[name=datetime]').daterangepicker({ 
        format: 'YYYY-MM-DD',
        startDate: '2013-01-01',
        endDate: new Date(),
        maxDate:new Date(),
        locale:{
            applyLabel: '確認',
            cancelLabel: '取消',
            fromLabel: '從',
            toLabel: '到',
            weekLabel: 'W',
            customRangeLabel: 'Custom Range',
            daysOfWeek:["日","一","二","三","四","五","六"],
            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        }
    }, function (start, end, label) {
        alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });

效果以下：

固然你可能也許想實現github中的那個效果，想加個添加時間的快捷鍵：
Improvely.com
沒問題可使用range參數實現：
range參數也是對象參數{name:[start,end] name是快捷鍵的名稱，接受一個數組分別是時間的開始和結束

$('input[name=datetime]').daterangepicker({ 
        format: 'YYYY-MM-DD',
        startDate: '2013-01-01',
        endDate: new Date(),
        maxDate:new Date(),
        locale:{
            applyLabel: '確認',
            cancelLabel: '取消',
            fromLabel: '從',
            toLabel: '到',
            weekLabel: 'W',
            customRangeLabel: '選擇時間',
            daysOfWeek:["日","一","二","三","四","五","六"],
            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        },
        range: {
            "近期": ['2015-04-12',new Date()]
        }
    }, function (start, end, label) {
        alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });

效果以下：

這樣就有了一箇中文的日期插件了，固然還有其餘的參數可使用包括添加本身的class用來敷寫bootstrap的樣式來實現本身想要的樣式，也可使用單選時間框函數來實現，具體的你們能夠仔細查看官方的文檔來構建本身須要的時間選取控件

 

 

2、daterangepicker 控件設置日期格式

 

 

<div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">計劃結束時間  </label>
                         <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="scheduledEndTime" name="scheduledEndTime" class="date-picker form-control col-md-7 col-xs-12" type="text">
                        </div>
                      </div>

var cb = function(start, end, label) {
              $('#scheduledEndTime span').html(start.format('YYYY-MM-DD HH:mm:ss'));
           };

          var optionSet1 = {
            startDate: moment(),
           
            showDropdowns: false,
            showWeekNumbers: false,
            timePicker: true,
            timePickerIncrement: 1,
            singleDatePicker: true,
            timePicker24Hour: true,
            locale: {
          		 format: 'YYYY-MM-DD HH:mm:ss',
          		  daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                  monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
       			 },
         
            opens: 'left',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            format: 'YYYY-MM-DD HH:mm:ss',
              
          };
           
         $('#scheduledEndTime').daterangepicker(optionSet1, cb);

4、這個插件是真好用

代碼簡介，功能強大，直接設置ranges屬性，就能夠直接在input裏面選擇時間段，好比前一週等等

js代碼：

 1 <script>
 2  $(function () {  3         //Date range picker
 4  $('#reservation').daterangepicker({  5  format: 'YYYY-MM-DD',  6  locale:{  7  format: 'YYYY-MM-DD',  8  customRangeLabel: '日期段選擇',  9  }, 10  ranges : { 11                 '今天' : [moment(), moment()], 12                 '昨天' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 13                 '前三天' : [moment().subtract(3, 'days'), moment()], 14                 '前一週' : [moment().subtract(6, 'days'), moment()], 15                 '前一月': [moment().subtract(30, 'days'), moment()], 16                 '這個月' : [moment().startOf('month'), moment().endOf('month')], 17                 '上個月' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 18                 '上上月' : [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')], 19  }, 20 
21  },function (start, end) { 22             //alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
23  }); 24  }); 25 </script>

html代碼：

 1 <div class="form-group">
 2     <label>或者選擇日期段:</label>
 3 
 4     <div class="input-group">
 5         <div class="input-group-addon">
 6             <i class="fa fa-calendar"></i>
 7         </div>
 8         <input type="text" class="form-control pull-right" id="reservation">
 9     </div>
10     <!-- /.input group -->
11 </div>