Set Default Value in Dropdownlist based on current date

Question

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?

Please see follow this post: http://stackoverflow.com/questions/19611557/how-to-set-default-value-for-html-select — samnu pel, Apr 12 '17 at 15:38

Titus · Accepted Answer · 2017-04-12T15:52:18.903

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>

I get a console error saying `syntax error` and the cursor is pointing at the lambda in `optionsArray.find(o => o.value == str)` — Grizzly, Apr 12 '17 at 15:47
You can replace that with `optionsArray.find(function(o){return o.value == str;})` — Titus, Apr 12 '17 at 15:48
another console error saying `object doesn't support property or method 'from` on `Array.from` — Grizzly, Apr 12 '17 at 15:50
@BviLLe_Kid I've changed it to use vanilla JavaScript, it should work in most browser versions. — Titus, Apr 12 '17 at 15:52

score 0 · Answer 2 · answered Apr 12 '17 at 15:38

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>

I do not have `toLocaleFormat`.. only `.toLocaleDateString` & `.toLocaleTimeString` — Grizzly, Apr 12 '17 at 15:43

charlietfl · Answer 3 · 2017-04-12T16:05:32.990

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>

Set Default Value in Dropdownlist based on current date

3 Answers3