Question

I have a requirement to add a standard drop-down from which you can select a date value (month/year) and based on a date you select, three check-boxes will show right below the drop-down of the next 3 calendar quarters.

For ex. if you were to select September 2011 from the drop-down, it would show check-boxes for Q4 2011, Q1 2012, Q2 2012. Since September 2011 is Q3 2011.

Is there a way to do this without hard-coding the year value? I appreciate the help!

select markup would be:

<select name="selectMonth">
 <option value="month1">Janurary 2011/option>
 <option value="month2">June 2011</option>
 <option value="month3">December 2011</option>
 <option value="month3">February 2012</option>
</select>

This is my friend’s JS interpretation, though it uses a timestamp:

var Selected = "2012-03-28";

var Date = new Date(Selected);
var After = Date.getMonth()+3;
var Before = Date.getMonth()-3;

function sayQuarter(date) {
 var m = Date.getMonth(date);
 var y = Date.getYear(date);
 var q = floor((m / 3) + 0.9);
 if (q.length == 1) { q = "0"+q; }
  return "Q"+q+" "+y;
 }

 var output = "3mo Before = "+Before+" ... "+sayQuarter.Before+"<br/>"+
        "Selected   = "+Selected+" ... "+sayQuarter.Selected+"<br/>"+
        "3mo After  = "+After+" ... "+sayQuarter.After+"<br/>";

 if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = output;
 }

I need to essentially do this with Javascript and have it check based on values within a select dropdown. Thoughts?

Answer 1

First of all, we have to prepare some elements. Since you don’t want to save every year, it’s better to create the select element dynamically:

var monthSelection = document.createElement('select');
var yearSelection = document.createElement('select');
var quartalWrapper = document.createElement('div');

We fill them when the page is loaded and add them to the document:

window.addEventListener('load',function(){    
    var monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];    
    var i;
    var option;
    for(i = 0; i < 12; ++i){
        option = document.createElement('option');
        option.value = i;
        option.appendChild(document.createTextNode(monthNames[i]));
        monthSelection.appendChild(option);
    }
    for(i = firstYear; i <= lastYear; ++i){
        option = document.createElement('option');
        option.value = i;
        option.appendChild(document.createTextNode(i));
        yearSelection.appendChild(option);
    }
    // Append elements to the document
    document.getElementById('quartal').appendChild(monthSelection);
    document.getElementById('quartal').appendChild(yearSelection);
    // Add an event listener
    monthSelection.addEventListener('change',updateQuartals);
    yearSelection.addEventListener('change',updateQuartals);
});

Please note that you have to use attachEvent or .onload/.onchange in Internet Explorer prior to version 9(?) instead of addEventListener. You could create and fill the elements also at the beginning of your script, but you can’t append them before the DOM is loaded.

Now when the user changes the value in either monthSelection or yearSelection updateQuartals gets called:

window.updateQuartals = function (){
    var i;
    if(    oldMonth === monthSelection.value &&
        oldYear === yearSelection.value)
    {
        return;
    }

If the quartalWrapper has no parent node we create the labels and checkboxes, since that means it’s not yet appended to the document:

    if(!quartalWrapper.parentNode){
        for(i = 0; i < 3; ++i){
            var label = document.createElement('label');
            var input = document.createElement('input');
            input.type = 'checkbox';
            input.name = 'quartal[]';
            label.appendChild(input);
            label.appendChild(document.createTextNode('Please choose a date'));
            quartalWrapper.appendChild(label);
        }
        document.getElementById('quartal').appendChild(quartalWrapper);
    }

Then we will update all three children labels and checkboxes. Note that label.firstChild is the checkbox, while label.lastChild is the textNode we created above. quartalWrapper.childNodes[i] is actually one of the labels.

    for(i = 0; i < 3; ++i){
        var quartals = getQuartals(monthSelection.value);
        var year = quartals[i][1] + parseInt(yearSelection.value);
        quartalWrapper.childNodes[i].firstChild.value = 'q'+quartals[i][0]+'/'+year;
        quartalWrapper.childNodes[i].firstChild.checked = false;
        quartalWrapper.childNodes[i].lastChild.data = quartals[i][0]+'Q '+year;
    }
};

Since the following quartals are always defined for a given month we can hardcode them into the function getQuartals:

window.getQuartals = function(month){
    var quartArray = [];    
    if (month < 3)
        return [[2,0],[3,0],[4,0]];
    if (month < 6)
        return [[3,0],[4,0],[1,1]];
    if (month < 9)
        return [[4,0],[1,1],[2,1]];
    return [[1,1],[2,1],[3,1]];
}

Notice that the first value is the quarter and the second one is the year offset. You could also calculate these arrays:

window.getQuartals = function(month){
    var quartArray = [];
    var i;
    month = parseInt(month);
    for(i = 0; i < 3; ++i){
        month+=3;
        quartArray.push([Math.floor(month/3)%4+1,Math.floor(month/12)]);        
    }
    return quartArray;
}

Jsfiddle demonstrations: using hardcoded values, using calculation.

Note that this solution doesn’t use jQuery. If you want to use jQuery feel free to change the code (use $() or .on instead of addEventListener(), .append,…).