首頁 > 文章 > web前端 > bootstrap日期外掛程式daterangepicker實例詳解

bootstrap日期外掛程式daterangepicker實例詳解

小云云原創: 2018-05-15 10:04:433086瀏覽

本文主要為大家詳細介紹了bootstrap日期插件daterangepicker的使用方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助大家。

今天用的了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() {
 $(&#39;input[name="daterange"]&#39;).daterangepicker();
});
</script>

用jq取得到你要插入的那個元素然後執行daterangepicker函數就能使用它預設的樣式和屬性了，
不過光有這個肯定是不行的，daterangepicker函數可以接受一個參數物件和一個回呼函數，如下：

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

回呼函數會在日期更改之後觸發有三個參數，開始時間，結束時間以及標籤名，可以在這裡執行你要進行的操作如ajax請求

#以上就可以構建一個英文版的日期控件了

接下來著重介紹locale和ranges兩個參數

首先是locale這個參數locale是建構本地語言應用的重要參數（github上說locale接受對象參數，不過並沒有說明物件的屬性）

以下是插件中locale預設屬性

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

我們只有更改這些參數就能夠使這個插件變成中文的插件

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

效果如下：

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

$(&#39;input[name=datetime]&#39;).daterangepicker({ 
  format: &#39;YYYY-MM-DD&#39;,
  startDate: &#39;2013-01-01&#39;,
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: &#39;确认&#39;,
   cancelLabel: &#39;取消&#39;,
   fromLabel: &#39;从&#39;,
   toLabel: &#39;到&#39;,
   weekLabel: &#39;W&#39;,
   customRangeLabel: &#39;选择时间&#39;,
   daysOfWeek:["日","一","二","三","四","五","六"],
   monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
  range: {
   "近期": [&#39;2015-04-12&#39;,new Date()]
  }
 }, function (start, end, label) {
  alert(&#39;A date range was chosen: &#39; + start.format(&#39;YYYY-MM-DD&#39;) + &#39; to &#39; + end.format(&#39;YYYY-MM-DD&#39;));
 });

效果如下：

這樣就有了一個中文的日期插件了，當然還有其他的參數可以使用包含添加自己的class用來敷寫bootstrap的樣式來實現自己想要的樣式，也可以使用單選時間框函數來實現，具體的大家可以仔細查看官方的文檔來構建自己需要的時間選取控制項。

bootstrap日期外掛程式daterangepicker實例詳解

相關文章