CODEWITHSUNDEEP
javascriptarraysrange
rwilliams
rwilliams

Reputation: 21487

Range of Years in JavaScript for a select box

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;
    }

Upvotes: 46

Views: 67369

Answers (12)

Md Mahir
Md Mahir

Reputation: 101

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

Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i);
// => [2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012]

Upvotes: 5

Wolfyr
Wolfyr

Reputation: 479

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 '+'.

Upvotes: 19

hunain60
hunain60

Reputation: 337

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

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

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

Upvotes: 10

Vaidas D.
Vaidas D.

Reputation: 413

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];

Upvotes: 6

Nilesh Kalange
Nilesh Kalange

Reputation: 31

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]

Upvotes: 3

dcangulo
dcangulo

Reputation: 2107

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>

Upvotes: 4

J. Jerez
J. Jerez

Reputation: 794

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]

Upvotes: 36

SOHEL AHMED GHORI
SOHEL AHMED GHORI

Reputation: 31

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

Upvotes: 3

springerkc
springerkc

Reputation: 179

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>;
}

Upvotes: 12

Justin Johnson
Justin Johnson

Reputation: 31300

JavaScript does have a Range object, but it refers to an arbitrary portion of the DOM and is not supported in IE 6/7.

If you want, you can simplify your function to this, but it's all the same really.

this.years = function(startYear) {
    var currentYear = new Date().getFullYear(), years = [];
    startYear = startYear || 1980;  
    while ( startYear <= currentYear ) {
        years.push(startYear++);
    }   
    return years;
}
 
console.log( this.years(2019-20));

Upvotes: 64

kennebec
kennebec

Reputation: 104760

You can provide a range method in javascript, but you would need to use it a lot to pay for its inclusion in your source code.

var A= Array.from(-5,5) >>> return value:

(Array) -5,-4,-3,-2,-1,0,1,2,3,4,5

var B= Array.from(10,100,10) >>> return value:

(Array) 10,20,30,40,50,60,70,80,90,100

var C= Array.from('a','z') >>> return value:

(Array)a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z

Array.from= function(what, n, step){
    var A= [];
    if(arguments.length){
        if(n){
            return A.range(what, n, step)
        }
        L= what.length;
        if(L){
            while(L){
                A[--L]= what[L];
            }
            return A;
        }
        if(what.hasOwnProperty){
            for(var p in what){
                if(what.hasOwnProperty(p)){
                    A[A.length]= what[p];
                }
            }
            return A;
        }
    }
    return A;
}

Array.prototype.range= function(what, n, step){
    this[this.length]= what;
    if(what.split && n.split){
        what= what.charCodeAt(0);
        n= n.charCodeAt(0);
        while(what<n){
            this[this.length]= String.fromCharCode(++what);
        }
    }
    else if(isFinite(what)){
        step= step || 1;
        while(what <n) this[this.length]= what+= step;
    }
    return this;
}

Upvotes: 1

Ben Torell
Ben Torell

Reputation: 2093

Unfortunately, no, there's no "range" function in Javascript that's comparable to Ruby's, so you'll have to do it with a loop. It looks like what you're doing should work, though.

Upvotes: 1

Related Questions