這篇文章給大家介紹如何在bootstrap中使用daterangepicker插件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)為您提適合企業(yè)的網(wǎng)站設(shè)計?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競爭力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)， 我們的網(wǎng)頁設(shè)計師為您提供的解決方案。

插件使用只要按照開源中的文檔信息來就好先包括以下引用：

<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的擴(kuò)展所以進(jìn)行以下的操作來使用這個控件

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

用jq獲取到你要插入的那個元素然后運行daterangepicker函數(shù)就能使用它默認(rèn)的樣式和屬性了，
不過光有這個肯定是不行的，daterangepicker函數(shù)可以接受一個參數(shù)對象和一個回調(diào)函數(shù)，如下：

$('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'));
 }
);

回調(diào)函數(shù)會在日期更改之后觸發(fā)有三個參數(shù)，開始時間，結(jié)束時間以及標(biāo)簽名，可以在這里執(zhí)行你要進(jìn)行的操作如ajax請求

以上就可以構(gòu)建一個英文版的日期控件了

接下來著重介紹一下locale和ranges兩個參數(shù)

首先是locale這個參數(shù)locale是構(gòu)建本地語言應(yīng)用的重要參數(shù)（github上說locale接受對象參數(shù)，不過并沒有說明對象的屬性）

以下是插件中l(wèi)ocale默認(rèn)屬性

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

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

$('input[name=datetime]').daterangepicker({ 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: '確認(rèn)',
      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'));
  });

效果如下：

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

$('input[name=datetime]').daterangepicker({ 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: '確認(rèn)',
   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'));
 });

效果如下：

關(guān)于如何在bootstrap中使用daterangepicker插件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

名稱欄目：如何在bootstrap中使用daterangepicker插件
當(dāng)前鏈接：http://aaarwkj.com/article8/peseip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、搜索引擎優(yōu)化、網(wǎng)站設(shè)計公司、云服務(wù)器、微信公眾號、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)