Question

I want to have two select tags in html, one for hour and one for minutes. I want the default value of hour to be set on current hour and the value of minute to be set on current minute. I think with default time to be set for example on 3, i should have some thing like this:

<select name="hour">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
...
<option value="23">23</option>
</select>

now my question is how can i use javascript to show the current hour and minutes by default?

Answer 1

Depending on how you’re creating the option elements, one approach is to use:

var now = new Date(),
    // we're adding one because JavaScript returns zero-based hours, 0-23
    hour = now.getUTCHours() + 1,
    sel = document.getElementById('hours'),
    opt;

for (var i=0; i<24; i++){
    opt = document.createElement('option');
    opt.value = i;
    opt.textContent = i;
    sel.appendChild(opt);
    if (i == hour) {
        opt.selected = true;
    }
}

JS Fiddle demo.

This uses the JavaScript Date() methods, getUTCHours()

If your option elements are already set in the HTML, and you’re simply changing which is selected by default:

var now = new Date(),
    hour = now.getUTCHours() + 1,
    sel = document.getElementById('hours'),
    curHour = sel.getElementsByTagName('option')[hour];

curHour.selected = true;

JS Fiddle demo.

References:

• Date().