배열 - 두 날짜 사이의 필터

Question

배열이 있고 날짜 선택기와 버튼이 2 개 있습니다. FROM 날짜와 TO 날짜를 선택하고 버튼을 클릭 한 후이 배열을 2 개의 선택 날짜 사이로 필터링하려고하지만 어떻게 든 작동하지 않습니다. 도와주세요. 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); 
     } 

Answer 1

난 당신이 filter 기능을 사용할 수 있습니다 생각합니다.

filter() 메서드는 제공된 함수로 구현 된 테스트 을 전달하는 모든 요소로 새 배열을 만듭니다.

또한, 여기에 코드에 약간의 수정은 다음과 같습니다

$(".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

희망이 도움이!

Answer 2

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); 

이 변형은 앞으로 dateList 요소 형식을 변경해야하는 경우에도 작동합니다.

데모 : http://jsfiddle.net/89wbv/2/

Answer 3

사용 moment.js

예 :

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