CODEWITHSUNDEEP
javascripthtml
SyntaxSage
SyntaxSage

Reputation: 357

getting current year in a dropdown of years

This is my dropdown in html

<select name="select" class="form-control" id="dropdownYear" style="width: 120px;" onchange="getProjectReportFunc()">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017" selected="selected">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>

I have hard coded the year values, i want to populate this dropdown with current year selected and 3 years before and after that.Eg for current year=2017 i want the list to be 2013-2020 with 2017 automatically selected. How do i do this in js?

Upvotes: 3

Views: 36484

Answers (8)

dan.riley
dan.riley

Reputation: 1

While I appreciated a lot of these answers, I felt like these could and should be done using the modern tools .map and Array constructor, so I created the below:

const CreateYearDropdown = () => {
  const nYearsPrior = 20;
  const nYearsPost = 20;
  const yearRange = Array(nYearsPrior+nYearsPost).fill(0);
  const currentYear = new Date().getFullYear();
  const years = yearRange.map(
    (item, index) => (item[index] = currentYear - nYearsPrior + index)
  );

  return (
    <select defaultValue={currentYear}>
      {years.map((year, index) => (
        <option key={index} value={year}>
          {String(year)}
        </option>
      ))}
    </select>
  )
}

Without the above explanation/breakdown, it can be written like so:

const CreateYearDropdown = () => {
  const currentYear = new Date().getFullYear();
  const yearRange = Array(40).fill(0);
  const years = yearRange.map(
    (item, index) => (item[index] = currentYear - 20 + index)
  );

  return (
    <select defaultValue={currentYear}>
      {years.map((year, index) => (
        <option key={index} value={year}>
          {year}
        </option>
      ))}
    </select>
  );
};

Alternatively you can have it running in a single direction (before or after):

const CreateYearDropdown = () => {
  const currentYear = new Date().getFullYear();
  const yearRange = Array(20).fill(0);
  const years = yearRange.map(
    (item, index) => (item[index] = currentYear /* - or + */ + index)
  );

  return (
    <select defaultValue={currentYear}>
      {years.map((year, index) => (
        <option key={index} value={year}>
          {year}
        </option>
      ))}
    </select>
  );
};

Upvotes: 0

Namaskar
Namaskar

Reputation: 2109

To achieve this, using Date is required, be it directly or with some external library. With the native method getFullYear:

Date.prototype.getFullYear()

Returns the year (4 digits for 4-digit years) of the specified date according to local time.

We can set the current year and then loop through desired values. You specified 2013 - 2020, so we'll use the current year minus 4 up to the current year plus 3.

for (var i = year - 4; i <= year + 3; i++)

In the body of the loop, create Options and add them to the Select. To display the values, the innerHTML needs to be set, and if you want to use the value somewhere else in your javascript, the value also needs to be set:

option.value = option.innerHTML = i;

If the index equals the current year, set the selected attribute.

if (i === year) option.selected = true;

Then, all you need to do is append each option element to the select element. After the select has been created, insert it into your HTML (here I am appending to the body).

var select = document.createElement('select');
var date = new Date();
var year = date.getFullYear();
for (var i = year - 4; i <= year + 3; i++) {
  var option = document.createElement('option');
  option.value = option.innerHTML = i;
  if (i === year) option.selected = true;
  select.appendChild(option);
}
document.body.appendChild(select);

Upvotes: 5

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

You can use ES6 array features.

let currentYear=new Date().getFullYear();
let array=Array.from(Array(7), (_, i) => currentYear-3+i);
array.forEach(function(item){
   let option=$('<option></option>').html(item).attr('selected', item == currentYear);
   $('select').append(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="form-control" id="dropdownYear">

</select>

Upvotes: 1

Guillaume Georges
Guillaume Georges

Reputation: 4020

var i, currentYear, startYear, endYear, newOption, dropdownYear;
dropdownYear = document.getElementById("dropdownYear");
currentYear = (new Date()).getFullYear();
startYear = currentYear - 4;
endYear = currentYear + 3;

for (i=startYear;i<=endYear;i++) {
  newOption = document.createElement("option");
  newOption.value = i;
  newOption.label = i;
	if (i == currentYear) {
		newOption.selected = true;
	}
  dropdownYear.appendChild(newOption);
}
<select name="select" class="form-control" id="dropdownYear"
	style="width: 120px;" onchange="getProjectReportFunc()">
</select>

Upvotes: 3

Adrian Frunza
Adrian Frunza

Reputation: 106

HTML: 

<select 
         name="select"
         class="form-control"
         id="dropdownYear"
         style="width: 120px;"
         onchange="getProjectReportFunc()">
</select>

Javascript:

let select = document.getElementById('dropdownYear');
let currYear = new Date().getFullYear();
let futureYear = currYear+3;
let pastYear = currYear-3;
for(let year = pastYear; year <= futureYear; year++){
  let option = document.createElement('option');
  option.setAttribute('value', year);
  if(year === currYear){
    option.setAttribute('selected', true);
  }
  option.innerHTML = year;
  select.appendChild(option);
}

Upvotes: 0

CD-jS
CD-jS

Reputation: 1119

A simple example, without using JQuery - 

var currentYear = new Date().getFullYear();
var yearSelect = document.getElementById('dropdownYear');
for(var i = -2; i < 3; i++) {
    var isSelected = currentYear === currentYear - i
    yearSelect.options[yearSelect.options.length] = new Option(currentYear - i, currentYear - i, isSelected, isSelected);
}

and the HTML:

<select name="select" class="form-control" id="dropdownYear" style="width: 120px;" onchange="getProjectReportFunc()" />

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272789

You may try something like this :

$('#dropdownYear').each(function() {

  var year = (new Date()).getFullYear();
  var current = year;
  year -= 3;
  for (var i = 0; i < 6; i++) {
    if ((year+i) == current)
      $(this).append('<option selected value="' + (year + i) + '">' + (year + i) + '</option>');
    else
      $(this).append('<option value="' + (year + i) + '">' + (year + i) + '</option>');
  }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="form-control" id="dropdownYear" style="width: 120px;" onchange="getProjectReportFunc()">
</select>

Upvotes: 3

shyammakwana.me
shyammakwana.me

Reputation: 5752

This is very simple logic,

  • First get current year,
  • Then run loop starting from currentyear -2 to currenct year + 3
  • Make current year selected

See code below: 

console.clear();
var curYear = new Date().getFullYear();

for(i = curYear-2 ; i <= curYear+3 ; i++) {
  var selected = (curYear === i) ? 'selected="selected"': '';
  console.log('<option '+selected+' value="'+i+'">'+i+'</option>');
}

Upvotes: 1

Related Questions