SO

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<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>

JavaScript

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

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

        $('.buttApply').click(
            function()
            {   
                var filtered = dateList.filter(function(item){
                    return item >= $('#dateFrom').val() && item <= $('#dateTo').val();
                });
                
                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);