Range of Years in JavaScript for a select box

user_164552 0
Viewed 47172

I'm trying to create a dynamic select box in JavaScript with a range of years starting with 'some' year and ending with the current year. Is there anything like Ruby's range class in JavaScript or do I have to loop trough the years using a for loop?

Here's what I've come up with though I think it's a bit much considering in Ruby I can just use a range. 

    this.years = function(startYear){
        startYear = (typeof(startYear) == 'undefined') ? 1980 : startYear
        var currentYear = new Date().getFullYear();
        var years = []
        for(var i=startYear;i<=currentYear;i++){
            years.push(i);
        } 
        return years;
    }
range arrays javascript
11 Answers

Use Array.from

const currentYear = (new Date()).getFullYear();
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
console.log(range(currentYear, currentYear - 50, -1)); 
// [2019, 2018, 2017, 2016, ..., 1969]

user_80001200

Use Array.fill() if you're transpiling or not worried about IE users.

const now = new Date().getUTCFullYear();    
const years = Array(now - (now - 20)).fill('').map((v, idx) => now - idx);

// (20) [2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002, 2001, 2000]

TypeScript

get years() {
  const now = new Date().getUTCFullYear();
  return Array(now - (now - 20)).fill('').map((v, idx) => now - idx) as Array<number>;
}
user_31868040

This will generate an array starting in the current year and ending 50 years earlier.

Array.from({ length: 51 }, (_, i) => new Date().getFullYear() - i);

If you want to change the start year just adjust

new Date().getFullYear()

If you want to add from the start instead of subtracting just change the '-' into a '+'

Hope that helps :)

user_83633430

If you're looking for one line answer, you can use Array.from in one line to create a list of years.

Array.from(Array(new Date().getFullYear() - 1949), (_, i) => (i + 1950).toString())

This will create years from 1950 to Current Year. This function will run in all browsers

user_35960180

While the above answers work perfectly I will just add an answer for lodash users.

_.range([start=0], end, [step=1])

Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end.

I added 1 to max since lodash doesn't include end in range.

This will create an array of year from 60 years ago to present.

You can use _.rangeRight if you want the opposite order.

const max = new Date().getUTCFullYear();
const min = max - 60;
const yearRange = _.range(min, max + 1);

console.log(yearRange);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

user_93755330 
    getYear(){
       var currentYear = new Date().getFullYear(),
       var years = [];
       var startYear = 1980;
       for(var i=startYear; i<= currentYear; i++){
          year.push(startYear++);
       }
       return years;
    }
user_119661280

const years = [...Array(new Date().getFullYear() - 1989).keys()].map((e)=>e+1990)

This will generate year list from 1990 to current year [1990,1991,.....2021]

user_103253230

Use Date() and Array.from():

getCurrentYear = new Date().getFullYear(); // current year
listOfYears = Array.from({length: 11}, (_, i) => this.getCurrentYear - i);
console.log(listOfYears);
// Output: [2022, 2021, 2020, ...2012];
user_102032510
Related