CODEWITHSUNDEEP
javascriptjqueryhtml
abcid d
abcid d

Reputation: 2947

Array - Filter in between two dates

I have an array, 2 date pickers and a button. After picking a FROM date and a TO date and click on the button, I want to filter this array in between 2 choice dates, but somehow it doesn't work out. Please help. LIVE CODE

HTML

<p>From: <input class="datepicker" id="dateFrom" type="text"> To: <input class="datepicker" id="dateTo" type="text"><button  class="buttApply">APPLY</button></p>

    <div class="text"></div>
    <table id="myTable" border="1" width="150" cellpadding="5">
        <tr><td>DATE LIST</td></tr>
    </table>

JS

$( ".datepicker" ).datepicker();

 var dateFrm = $('#dateFrom').val();
 var datTo = $('#dateTo').val();

        $('.buttApply').click(
            function()
            {
                dateList.sort(function(dateFrm, datTo)
                              {
                                  return dateFrm > datTo;
                              }
                );


            }
        );

var dateList =[
            "07/01/2014",
            "07/02/2014",
            "07/03/2014",
            "07/04/2014",
            "07/05/2014",
            "07/06/2014",
            "07/07/2014",
            "07/08/2014",
            "07/09/2014",
            "07/10/2014",
    ];

    for (var i=0; i< dateList.length; i++)
        {
            var tr="<tr>";
            var td = "<td>" + dateList[i] + "</td></tr>";
            $('#myTable').append(tr+td);
        }

Upvotes: 2

Views: 10555

Answers (3)

Abdallah Ali
Abdallah Ali

Reputation: 69

Use moment.js

example:

    var startDate = new Date(2013, 1, 12)
  , endDate   = new Date(2013, 1, 15)
  , date  = new Date(2013, 2, 15)
  , range = moment().range(startDate, endDate);

range.contains(date); // false

Upvotes: 0

itnelo
itnelo

Reputation: 1103

var dateList = [
      "07/01/2014"
    , "07/02/2014"
    , "07/03/2014"
    , "07/04/2014"
    , "07/05/2014"
    , "07/06/2014"
    , "07/07/2014"
    , "07/08/2014"
    , "07/09/2014"
    , "07/10/2014"
];

function renderTable( dateList )
{
    $('#myTable').html('');

    for (var i=0; i< dateList.length; i++)
    {
        var tr="<tr>";
        var td = "<td>" + dateList[i] + "</td></tr>";
        $('#myTable').append(tr+td);
    }
}

// If you need to change dateList element format,
// just only change this convert function.
function DateToUnixtime( date_string )
{
    return new Date(date_string).getTime() / 1000;
}

$('.buttApply').click(function()
{
    var unixtime_from = $('#dateFrom').datepicker('getDate').getTime() / 1000;
    var unixtime_to = $('#dateTo').datepicker('getDate').getTime() / 1000;

    var dateListFiltered = dateList.filter(function(date)
    {
        var unixtime = DateToUnixtime( date );
        return unixtime >= unixtime_from && unixtime <= unixtime_to;
    });

    renderTable( dateListFiltered );
});

$( ".datepicker" ).datepicker();

renderTable( dateList );

This variant works even if you need to change dateList element format in future.

demo: http://jsfiddle.net/89wbv/2/

Upvotes: 0

Antoine Cloutier
Antoine Cloutier

Reputation: 1330

I think you might want to use the filter function.

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Also, here are a few modifications to your code:

$(".datepicker").datepicker();

$('.buttApply').click(
    function () {
        // Retrieve your dateForm and dateTo value here, otherwise your dateFrm and datTo will be equal to ''.
        // Also, use filter instead of sort. The filtered variable is your new array.
        var filtered = dateList.filter(function (item) {
            return item >= $('#dateFrom').val() && item <= $(
                '#dateTo').val();
        });

        // Refresh your table
        refreshTable(filtered);
    }
);

var dateList = [
    "07/01/2014",
    "07/02/2014",
    "07/03/2014",
    "07/04/2014",
    "07/05/2014",
    "07/06/2014",
    "07/07/2014",
    "07/08/2014",
    "07/09/2014",
    "07/10/2014",
];

function refreshTable(list) {
    $("#myTable").html("");
    for (var i = 0; i < list.length; i++) {
        var tr = "<tr>";
        var td = "<td>" + list[i] + "</td></tr>";
        $('#myTable').append(tr + td);
    }
}

refreshTable(dateList);

Working demo

Hope this helps!

Upvotes: 5

Related Questions