<!-- 需要引用的依賴庫 -->
<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',  //最小時間
  showDropdowns: true,
  showWeekNumbers: false, //是否顯示第幾周
  dateLimit: {days: 300}, //起止時間的最大間隔
  timePicker: true,
  timePickerIncrement: 1, //時間的增量，單位為分鐘
  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: '起始時間',
    toLabel: '結(jié)束時間',
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    firstDay: 1
  }
}

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

// 創(chuàng)建一個新的日期范圍選擇器
$('#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'));
});