Find closest date in elements then add class

Question

Ex : Today is 4. Dec

1. December 2012

2. December 2012

3. December 2012

Title (5. December 2012)

Title (7. December 2012)

1. December 2012

closest date is 5. December (not 3.December) (newer not older)

And If morethan one "5. December" so add class only first-child

HTML :

<div class="wrap">

<div class="zone" id="one">  
<div class="box">
    <footer class="time">1. December 2012</footer>
</div>


<div class="box">
    <footer class="time">1. December 2012</footer>
</div>

<div class="box">
    <footer class="time">3. December 2012</footer>
</div>


<div class="box">
    <h2>Title <span class="time">(5. December 2012)</span></h2>
</div>


<div class="box">
    <h2>Title <span class="time">(7. December 2012)</span></h2>
</div>


<div class="box">
    <footer class="time">9. December 2012</footer>
</div>

</div>

<div class="zone"  id="two">
    <!-- Same .zone#one but i will focus for .zone#one only-->
</div>

</div>


<code></code>

jQuery :

var closest = [];

$('.wrap > .zone:eq(0) .box').each(function(i) {
        var date = $(this).find(".time").html().replace("(","").split(".");
        closest.push(date[0]);
});



$("code").html(closest+"");

Playground : http://jsfiddle.net/WJvZb/

I come to this step now , but have no idea to find closest date and add class it (ex. .closest class)

Answer 1

The most foolproof way of doing this is to parse each date time (depends on the format), push them into an array, then loop over array calculating time difference between them, and pull the smallest value. You can use some useful libraries like moment.js to do date parsing and calculations.

var now = new Date();
var closest = -1; //array ndx
var times = [];
var els = [];

$('.time').each(function(i) {
    times.push(someParsingMethod($(this).text());
    els.push($(this));
});

//initial difference
var diff = times[0].getTime() - now.getTime();

//check for lowest difference greater with a target date greater than now
for(var i=0;i<times.length;i++){
   var tmpDiff = times[i].getTime() - now.getTime();
   if(times[i].getTime() > now.getTime() && tmpDiff < diff){
       closest = i;
   }
}

if(closest != -1){
    els[closest].addClass("closestClass");
}

It's just pseudo code, the real challenge in this task is parsing the proprietary date formats.

Answer 2

You should name your dates in english hence "desember"... Also then you could iterate through your dates and create Date objects from it, then find closest is easy.

var closest = [];

$('.wrap > .zone:eq(0) .box').each(function(i) {
    var date = $(this).find(".time").html().replace("(","").replace(")","");
        closest.push(new Date(date));
});

function closestTime(days, testDate)
{
    var bestDiff = null;

    for(i = 0; i < days.length; ++i){
        currDiff = Math.abs(days[i] - testDate);
        if(currDiff < bestDiff || bestDiff == null){
            bestDate = days[i];
            bestDiff = currDiff;
        } else if (currDiff == bestDiff && days[i] > testDate) {
            bestDiff = currDiff;             
        }
    }

    return bestDate;
}

console.log(closestTime(closest,new Date()));

Answer 3

as long as you are using array this is the easiest way to achive it.

var closest = [];
// Current Date
var current = new Date("04/12/2012");
// Function to get the Minimam value in Array
Array.min = function( array ){
    return Math.min.apply( Math, array );
};
// Played on your code
$('.wrap > .zone:eq(0) .box').each(function(i) {
    var date = $(this).find(".time").html().replace("(","").split(".");
    // If higher than current date
    if(current.getDay() < date[0]) {
        closest.push(date[0]);
    }
});
// Get the closest day..
$("code").html(Array.min(closest)+"");

played on your demo : http://jsfiddle.net/BerkerYuceer/WJvZb/40/

Answer 4

    function findActive(days, testDate) {
        var bestDiff = 0;
        var bestDate = null;
        var strDate = "No active";

        for(i = 0; i < days.length; ++i){
            var dDate = getDate(days[i]);

            currDiff = Math.abs(dDate - testDate);

            if(i ==0){
                bestDiff = currDiff;
            }

            if(dDate <= testDate){
                if(currDiff < bestDiff){
                    strDate = days[i];
                    bestDate =  dDate;
                    bestDiff = currDiff;
                    }else if(currDiff == bestDiff){
                    strDate = days[i];
                    bestDate =  dDate;
                }
            }
        }
        return strDate;
    }


function getDate(strDate){
    var day  = strDate.substring(0,2);
    var month = strDate.substring(3,5);
    var year  = strDate.substring(6,10);

    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
}

date mask is: dd.MM.yyyy

        this code find active date. 
        enter code here
        example
        today is: 07.06.2013

        dates is: 03.06.2013, 4.6.2013, 5.6.2013 => return 5.6.2013
        dates is: 03.06.2013, 14.6.2013, 15.6.2013 => return 3.6.2013
        dates is: 08.06.2013, 14.6.2013, 15.6.2013 => return null
        dates is: 08.06.2013, 7.6.2013, 9.6.2013 => return 7.6.2013
        etc