Use JavaScript to order some dates

Question

I have a WordPress plugin "Ultimate WPQSF" which is outputting a drop down list on the front end of my site but as far as I can tell I can not choose to order this list by date.

On the front end it is outputting the following drop down list

<select id="tdp-0" name="taxo[0][term]">
    <option value="august-2013">August 2013</option>
    <option value="august-2014">August 2014</option>
    <option value="december-2013">December 2013</option>
    <option value="march_2014">March 2014</option>
    <option value="may-2014">May 2014</option>
</select>

What I want to do with this is pull the data from these options and order is by date then input it back into the select in the new order which would be the latest date first (August 2014). The desired outcome after processing it would be as follows

<select id="tdp-0" name="taxo[0][term]">
    <option value="august-2014">August 2014</option>
    <option value="may-2014">May 2014</option>
    <option value="march_2014">March 2014</option>
    <option value="december-2013">December 2013</option>
    <option value="august-2013">August 2013</option>
</select>

I know a bit of jQuery and JavaScript but not enough to do something this advanced. Any advice would be appreciated.

[Convert them into JavaScript date objects](http://stackoverflow.com/questions/8224459/how-to-create-a-date-object-from-string-in-javascript). Then [sort them by date](http://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date) and [format them as strings again](http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript). — Blazemonger, Aug 12 '14 at 15:23
Alternatively, store the dates as self-sorting strings: "20140801" instead of "august-2014". — Blazemonger, Aug 12 '14 at 15:24
And to get the list into strings: http://stackoverflow.com/a/3051100/728393 — DanielST, Aug 12 '14 at 15:25

score 1 · Accepted Answer · answered Aug 12 '14 at 16:29

Dont know if it is a typo with march_2014, if not, you have to alter the code to handle both - and _

JSFiddle: http://jsfiddle.net/6xde9500/

//For adding capitalaizing the first letter-function to strings
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

myMonths = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];

//Array that hold date objects
dateArray = new Array();

//Create date objects
function getDateObject(value){   

    montAndYear = value.split("-");

    date = new Date();

    //Set year and month 
    date.setYear(montAndYear[1]);

    //Since the months are stored by name, get the proper value from the myMoths array
    date.setMonth(myMonths.indexOf(montAndYear[0]));

    return date;
}

function updateSelection(){
    $("#tdp-0")
        .find('option')
        .remove()
        .end();

    for(i = 0; i < dateArray.length; i++){

        month = myMonths[dateArray[i].getMonth()];
        year = dateArray[i].getFullYear();

        $("#tdp-0").append('<option value="'+month+'-'+year+'">'+ month.capitalize() + ' ' + year +'</option>');

        if(i == 0){
            $("#tdp-0").val(month+'-'+year);
        }
    }
}

//Get all the values and sorts them
$("#tdp-0 option").each(function(){
    dateArray.push(getDateObject($(this).val()));
}).promise().done(function(){

    dateArray.sort(function(a,b){
        return a>b ? -1 : a<b ? 1 : 0;
    });

    updateSelection();
});

DannyThunder, this worked perfectly, thanks for your time – matty Aug 13 '14 at 15:32 — matty, Aug 13 '14 at 15:32

Use JavaScript to order some dates

1 Answers1