CODEWITHSUNDEEP
javascripthtml-select
Grizzly
Grizzly

Reputation: 5943

Set Default Value in Dropdownlist based on current date

If I have a dropdownlist like so:

<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

How do I set the default value to equal today's current month-year via js?

Upvotes: 0

Views: 2530

Answers (3)

charlietfl
charlietfl

Reputation: 171669

Compare the date strings to today's date string

// get current year/month as string
var d= new Date().toISOString().slice(0,7);

var opts = document.getElementById('dropdown').options;

[].forEach.call(opts, function(opt){
    // set "selected" based on year/month matching current
    opt.selected = opt.value.slice(0,7) === d;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

Upvotes: 0

Titus
Titus

Reputation: 22474

You could do something like this.

var d = new Date();
var m = d.getMonth() + 1;
var str = d.getFullYear() + "-" + (m >= 10 ? "" : "0") + m + "-01T00:00:00";
var select = document.getElementById("dropdown"); 
var options = select.options;
for(var i = 0; i < options.length; i++){
    if(options[i].value == str){
        select.selectedIndex = i;
        break;
    }
}
<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

Upvotes: 2

user5734311
user5734311

Reputation:

Create a date string, then set the <select>'s value to it:

$(document).ready(() => {
  var d = new Date();
  var year = d.getYear();
  var month = d.getMonth();
  var thisMonth = new Date(year + 1900, month);
  $("#dropdown").val(thisMonth.toLocaleFormat("%Y-%m-01T00:00:00"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

Upvotes: 0

Related Questions