datepicker - jQuery display date in order from min to max

Question

I am grateful to have received the following date sorting code on another one of my questions :) but I have a quick query.

How could I make the result of the min-date and max-date apear in order from min-date to max-date?

jQuery:

$(function() {
    $.datepicker.setDefaults({ dateFormat: "dd/mm/yy" }); //sets default datepicker's dateFormat
    $("#mindate, #maxdate")
        .datepicker() //initializes both of the date inputs as jQuery UI datepickers
        .on('keypress keyup change blur', function(){ filter(); }); //sets listeners to filter the table on the fly
});

function filter(){
    $('tr').show(); //resets table to default before executing the filter
    datefields = $('table.bordered tr td:nth-child(2)'); //stores a jquery oject containing all tds of the 2nd column (dates)
    datefields.each(function(){ //iterates through them..
        var evdate = pdate($(this).html()); //evaluates each of their dates as date objects
        var mindate = pdate($('#mindate').val()); //evaluates the entered mindate (will return false if not valid*)
        if (mindate) //checks if the mindate is valid
            if (evdate < mindate)
                $(this).parent().hide(); //hides the row if its date is previous to the mindate
        var maxdate = pdate($('#maxdate').val()); //repeats same as above, now for maxdate filtering
        if (maxdate)
            if (evdate > maxdate)
                $(this).parent().hide(); //hides the row if its date is after the maxdate
    });

}

function pdate(str){ //parse date function, receives a string and returns a date if it's valid or false if it isn't
    if (!isValidDate(str))
        return false; //returns false if the date isn't valid
    var parts = str.split("/");
    // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
    return new Date(parts[2], parts[1]-1, parts[0]);
}



//this is my custom date validating function, much better than those which you may find in the web :P
function isValidDate(date)
{    
    parts = date.split('/');
    if (parts.length != 3)
        return false;
    else if (parts[0] == '' || /[^0-9]/.test(parts[0]) || parts[1] == '' || /[^0-9]/.test(parts[1]) || parts[2] == '' || /[^0-9]/.test(parts[2]))
        return false;

    day = parts[0];
    month = parts[1];
    year = parts[2];

    if (year >= 1800 && year <= 2200) //define the limits of valid dates
    {
        if (day > 0 && day <= 31 && month > 0 && month <= 12)
        {  
            if ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30)
                return false;
            if (month == 2)
            {
                if (year%4 == 0 && (year%100 != 0 || year%400==0))
                {
                    if (day > 29)
                        return false; 
                }
                else if (day > 28)
                    return false;
            }
            return true;
        }
        else
            return false;
    }
    else
        return false;
}

Answer 1

Here's a complementary function that will work:

function orderAsc(td){
    var evdate = pdate(td.html());
    var datefields = $('table.bordered tr td:nth-child(2)');
    datefields.each(function(i){
        var tempdate = pdate($(this).html());
        if (evdate > tempdate)
            td.parent().before($(this).parent());
    });
}

Then just call it from inside your filter() function's .each with orderAsc($(this)).

I'd suggest sorting your table only when you first load the page and when you load new content into it to save CPU processing in your clients' side, anyway, here's the working Fiddle with some comments. =]