js 代碼，按照上下順序?qū)?yīng)html四部分

$('input[name="datePicker"]').daterangepicker({
  timePicker: true, //顯示時(shí)間
  timePicker24Hour: true, //時(shí)間制
  timePickerSeconds: true, //時(shí)間顯示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
  endDate: moment(new Date()), //設(shè)置結(jié)束器日期
  maxDate: moment(new Date()), //設(shè)置最大日期
  "opens": "center",
  ranges: {
   // '今天': [moment(), moment()],
   '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
   '上周': [moment().subtract(6, 'days'), moment()],
   '前30天': [moment().subtract(29, 'days'), moment()],
   '本月': [moment().startOf('month'), moment().endOf('month')],
   '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
   applyLabel: '確定', //確定按鈕文本
   cancelLabel: '取消', //取消按鈕文本
   customRangeLabel: '自定義',
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, function(start, end, label) {
  timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
  console.log(timeRangeChange);
 });

$('input[name="singledatePicker"]').daterangepicker({
  "autoApply": true, //選擇日期后自動(dòng)提交;只有在不顯示時(shí)間的時(shí)候起作用timePicker:false
  singleDatePicker: true, //單日歷
  showDropdowns: true, //年月份下拉框
  timePicker: true, //顯示時(shí)間
  timePicker24Hour: true, //時(shí)間制
  timePickerSeconds: true, //時(shí)間顯示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
  maxDate: moment(new Date()), //設(shè)置最大日期
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
   applyLabel: '確定', //確定按鈕文本
   cancelLabel: '取消', //取消按鈕文本
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, function(start) {
  console.log(start.format('YYYY-MM-DD HH:mm:ss'));
 });

var minDate = null;
 var max = null;
 function fromDate(maxDate) {
  if(!maxDate){
   max = moment(new Date())
  }else{
   max = maxDate;
  }
  $('input[name="from"]').daterangepicker({
   "autoApply": true, //選擇日期后自動(dòng)提交;只有在不顯示時(shí)間的時(shí)候起作用timePicker:false
   singleDatePicker: true, //單日歷
   showDropdowns: true, //年月份下拉框
   timePicker: true, //顯示時(shí)間
   timePicker24Hour: true, //時(shí)間制
   timePickerSeconds: true, //時(shí)間顯示到秒
   // startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
   maxDate: max , //設(shè)置最大日期
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
    applyLabel: '確定', //確定按鈕文本
    cancelLabel: '取消', //取消按鈕文本
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
     '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    firstDay: 1
   },
  }, function(s) {
   toDate(s);
  });
 }
 fromDate()
 function toDate(minDate) {
  $('input[name="to"]').daterangepicker({
   "autoApply": true, //選擇日期后自動(dòng)提交;只有在不顯示時(shí)間的時(shí)候起作用timePicker:false
   singleDatePicker: true, //單日歷
   showDropdowns: true, //年月份下拉框
   timePicker: true, //顯示時(shí)間
   timePicker24Hour: true, //時(shí)間制
   timePickerSeconds: true, //時(shí)間顯示到秒
   // startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
   maxDate: moment(new Date()), //設(shè)置最大日期
   minDate: minDate,
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
    applyLabel: '確定', //確定按鈕文本
    cancelLabel: '取消', //取消按鈕文本
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
     '七月', '八月', '九月', '十月', '十一月', '十二月'
    ],
    firstDay: 1
   },
  }, function(s) {
   fromDate(s)
  });
 }
 toDate();

var start = moment(new Date());
 function cb(start) {
  $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 $('#divDateSelect').daterangepicker({
  "autoApply": true, //選擇日期后自動(dòng)提交;只有在不顯示時(shí)間的時(shí)候起作用timePicker:false
  singleDatePicker: true, //單日歷
  showDropdowns: true, //年月份下拉框
  // timePicker: true, //顯示時(shí)間
  timePicker24Hour: true, //時(shí)間制
  timePickerSeconds: true, //時(shí)間顯示到秒
  startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
  maxDate: moment(new Date()), //設(shè)置最大日期
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
   applyLabel: '確定', //確定按鈕文本
   cancelLabel: '取消', //取消按鈕文本
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'
   ],
   firstDay: 1
  },
 }, cb);
 cb(start);

效果圖:

第一部分:

第二部分:

第三部分就是兩個(gè)第二部分組實(shí)現(xiàn)第一部分的效果;原理為在確定好開始日期后;設(shè)置選擇結(jié)束日期日歷的最小選擇日期;在結(jié)束日期選中后;設(shè)置開始日期的最大選擇日期;

第四部分:

關(guān)鍵選項(xiàng)的含義已經(jīng)在代碼中注釋了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;

備注：

1 moment.js使用了數(shù)組的indexOf()方法;但I(xiàn)E8不支持;需要引入兼容代碼;代碼地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf　　在polyfill下;

2 在IE8下;雙日歷的范圍選擇出現(xiàn)連個(gè)日歷豎直排列問題;解決方法為給存放兩個(gè)日歷的盒子設(shè)置固定的寬度,足以放下兩個(gè)日歷的div;再把兩個(gè)日歷的div設(shè)置float:left即可;

3 官網(wǎng)地址;選項(xiàng)設(shè)置: http://www.daterangepicker.com/#options

例子: http://www.daterangepicker.com/#examples

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“日期時(shí)間范圍選擇插件daterangepicker怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!