<!-- 需要引用的依賴庫(kù) -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css"  rel="external nofollow" />
<!-- 引用 daterangepicker 相關(guān)文件-->
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css"  rel="external nofollow" />

$('input[name="daterange"]').daterangepicker();

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

 $('input[name=dateStr]', '#themeAddPage').daterangepicker(dateRangePickerAfterTodayConfig);

var dateLongRangePickerOptionObj = {
  minDate: '2015/01/01 00:00:00',  //最小時(shí)間
  showDropdowns: true,
  showWeekNumbers: false, //是否顯示第幾周
  dateLimit: {days: 300}, //起止時(shí)間的最大間隔
  timePicker: true,
  timePickerIncrement: 1, //時(shí)間的增量，單位為分鐘
  timePicker12Hour: false,
  opens: 'right', //日期選擇框的彈出位置
  buttonClasses: ['btn btn-default'],
  applyClass: 'btn-small btn-primary blue',
  cancelClass: 'btn-small',
  format: 'YYYY/MM/DD HH:mm:ss', //控件中from和to 顯示的日期格式MM/DD/YYYY
  separator: '-',
  defaultDate: new Date(),
  locale: {
    applyLabel: '確定',
    cancelLabel: '取消',
    fromLabel: '起始時(shí)間',
    toLabel: '結(jié)束時(shí)間',
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    firstDay: 1
  }
}

startDate: (Date 對(duì)象, moment 對(duì)象或者string類型)初始化日期范圍選中的開始時(shí)間。
endDate: (Date 對(duì)象, moment 對(duì)象或者string類型)初始化日期范圍選中的結(jié)束時(shí)間。
minDate: (Date 對(duì)象, moment 對(duì)象或者string類型) 用戶可以選擇的最早時(shí)間。
maxDate: (Date 對(duì)象, moment 對(duì)象或者string類型) 用戶可以選擇的最晚時(shí)間。
dateLimit: (object類型) 選中的開始和結(jié)束日期之間最大時(shí)間間隔?？梢允悄軌蛱砑拥絤oment對(duì)象（moment.add()）中的任何屬性（如：days, months）。
showDropdowns: (boolean類型) 在日歷上面顯示年和月的下拉框，選中后將跳到指定的年和月
showWeekNumbers: (boolean類型) 在日歷上每周開始的地方顯示本地化的周編號(hào)。
showISOWeekNumbers: (boolean類型) 在日歷上每周開始的地方顯示國(guó)際標(biāo)準(zhǔn)的周編號(hào)。
timePicker: (boolean類型) 允許選擇日期和時(shí)間，而不是局限于日期。
timePickerIncrement: (number類型) 時(shí)間選擇框中分鐘列的增加步長(zhǎng)（如：設(shè)置為30后只允許選擇以0和30結(jié)束的時(shí)間）。
timePicker24Hour: (boolean類型) 使用24小時(shí)制來(lái)代替12小時(shí)制，同時(shí)刪除AM/PM選擇框。
timePickerSeconds: (boolean類型) 在時(shí)間選擇框中顯示秒選擇列。
ranges: (object類型) 設(shè)置用戶可以選擇的預(yù)定義日期范圍。每個(gè)鍵名即范圍的標(biāo)簽名，對(duì)應(yīng)值是兩個(gè)日期組成的數(shù)組，來(lái)表示范圍的界限。
showCustomRangeLabel: (boolean類型) 當(dāng)使用范圍選項(xiàng)時(shí)，在預(yù)定義范圍列表的末尾顯示標(biāo)記為"Custom Range"的標(biāo)簽。當(dāng)選擇的日期范圍與任何一個(gè)預(yù)定義的范圍都不匹配時(shí)，該選項(xiàng)將被高亮顯示。單擊它顯示日歷可以選擇新的范圍。
alwaysShowCalendars: (boolean類型) 通常，如果使用范圍選項(xiàng)指定了預(yù)定義日期范圍，則用戶除了單擊 "Custom Range"之外，日期選擇器都不會(huì)顯示用于選擇自定義日期范圍的日歷。當(dāng)選項(xiàng)設(shè)置為true時(shí)，將始終顯示用于選擇自定義日期范圍的日歷。
opens: (string: 'left'/'right'/'center') 設(shè)置日期選擇器以綁定元素左對(duì)齊、右對(duì)齊或者居中顯示。
drops: (string: 'down' or 'up') 設(shè)置日期選擇器在綁定元素的下面（默認(rèn)）或者上面顯示。
buttonClasses: (array類型)為日期選擇器中的所有button元素添加CSS類。
applyClass: (string類型) 為日期選擇器中的apply按鈕添加類。
cancelClass: (string類型) 為日期選擇器中的cancel按鈕添加類。
locale: (object類型) 允許為按鈕和標(biāo)簽提供本地化的字符串，自定義日期格式，并更改日歷中周的第一天。 查看配置生成器中的“l(fā)ocale配置（包含設(shè)置示例）”，以了解如何自定義這些選項(xiàng)。
singleDatePicker: (boolean類型) 只顯示一個(gè)日歷來(lái)選擇一個(gè)日期，而不是帶有兩個(gè)日歷的范圍選擇器；回調(diào)函數(shù)中提供的開始和結(jié)束日期將和選擇的單個(gè)日期相同。
autoApply: (boolean類型) 隱藏apply和cancel按鈕。選擇兩個(gè)日期或預(yù)定義范圍時(shí)，會(huì)自動(dòng)應(yīng)用新的日期范圍。
linkedCalendars: (boolean類型) 啟用時(shí)，顯示的兩個(gè)日歷將始終為兩個(gè)連續(xù)的月份（如：1月和2月），并且當(dāng)單擊日歷上方的左側(cè)或右側(cè)箭頭時(shí)，兩個(gè)日歷都將變化。 禁用時(shí)，兩個(gè)日歷可以單獨(dú)變化并顯示任何月/年。
isInvalidDate: (function類型) 在顯示兩個(gè)日歷之前傳遞一個(gè)日期參數(shù)，然后通過(guò)返回true或false，標(biāo)示該日期是否可供選擇。
isCustomDate: (function類型) 在顯示兩個(gè)日歷之前傳遞一個(gè)日期參數(shù)，然后將返回的CSS類名字符串傳或者數(shù)組應(yīng)用在日歷中的該日期上。
autoUpdateInput: (boolean類型) 標(biāo)示日期范圍選擇器是否應(yīng)在初始化和所選日期改變時(shí)，自動(dòng)更新綁定在<input>元素上的值。
parentEl: (string類型) 給日期選擇器添加父元素的jQuery選擇器，如果沒(méi)有提供，body將被作為父元素。

// 創(chuàng)建一個(gè)新的日期范圍選擇器
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });
// 改變?nèi)掌谶x擇器中選中的日期范圍
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');

$('#daterange').daterangepicker({
 locale: { cancelLabel: 'Clear' }
});
$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
 $('#daterange').val('');
});

$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
 console.log(picker.startDate.format('YYYY-MM-DD'));
 console.log(picker.endDate.format('YYYY-MM-DD'));
});