如何在daterangepicker中设置自定义范围标签

Question

我试图在没有硬编码值的情况下在 daterangepicker 范围内显示过去 4 年。例如：如果当前年份是 2020 年，则应显示 2020 年、2019 年、2018 年和 2017 年。我尝试使用 'Year '+ currentYear: [moment()....] 但这没有用。
非常感谢任何帮助！

Code with hard coded value

$(function() {
  var currentYear = moment().year(); // This Year
  var currentYearStart = moment({
    years: currentYear,
    months: '0',
    date: '1'
  }); // 1st Jan this year
  var currentYearEnd = moment({
    years: currentYear,
    months: '11',
    date: '31'
  }); // 31st Dec this year
  var start = moment().subtract(29, 'days'); // Subtract 29 days from today
  var end = moment(); // Today
  function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  }
  $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'Year 2017': [moment(currentYearStart.subtract(1, 'year')), moment(currentYearEnd.subtract(1, 'year'))],
      'Year 2016': [moment(currentYearStart.subtract(1, 'year')), moment(currentYearEnd.subtract(1, 'year'))],
      'Year 2015': [moment(currentYearStart.subtract(1, 'year')), moment(currentYearEnd.subtract(1, 'year'))],
      'Year 2014': [moment(currentYearStart.subtract(1, 'year')), moment(currentYearEnd.subtract(1, 'year'))],
    }
  }, cb);
  cb(start, end);
});

Demo

http://jsfiddle.net/4xuvLyr5/

Answer 1

以防万一其他人正在寻找类似的答案，我使用以下代码解决了这个问题。

  var dateRange = {};
  dateRange["Today"] = [moment(), moment()];
  dateRange["Last 30 Days"] = [moment().subtract(29, 'days'), moment()];
  dateRange["Year " + (currentYear - 1)] = [moment(currentYearStart.subtract(1, "year")), moment(currentYearEnd.subtract(1, "year"))]; // Year 2017
  dateRange["Year " + (currentYear - 2)] = [moment(currentYearStart.subtract(1, "year")), moment(currentYearEnd.subtract(1, "year"))]; // Year 2016
  dateRange["Year " + (currentYear - 3)] = [moment(currentYearStart.subtract(1, "year")), moment(currentYearEnd.subtract(1, "year"))]; // Year 2015
  dateRange["Year " + (currentYear - 4)] = [moment(currentYearStart.subtract(1, "year")), moment(currentYearEnd.subtract(1, "year"))]; // Year 2014

  $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: dateRange
  }, cb);

Reference:

JavaScript set object key by variable

Demo:

http://jsfiddle.net/e6th72b0/

如何在daterangepicker中设置自定义范围标签

How to set custom range label in daterangepicker

javascript

jquery

daterangepicker