How to set custom range label in daterangepicker

Question

I am trying to display last 4 years in daterangepicker range without hardcoding values. For eg: If current year is 2020 then Year 2020, Year 2019, Year 2018 and Year 2017 should be displayed. I tried using 'Year '+ currentYear: [moment()....] but that didn't worked.
Any help is highly appreciated!

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/

Alvin · Accepted Answer · 2018-07-05T20:53:19.503

Just in case anyone else is looking for similar answer I solved this by using below code.

  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/

How to set custom range label in daterangepicker

1 Answers1