時刻比較によるテーブル行の非表示/表示

Question

Moment.jsで解析/書式設定された日付が中央の列にあるテーブルがあります。

私はまた、クリックしたときに1つのボタンに日付が<のテーブル行のみを表示させ、もう1つのボタンは24時間を超える日付を持つテーブル行を表示するようにします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 

<button type="button" id="button1">Less than 24 hours</button> 
<button type="button" id="button2">More than 24 hours</button> 

<table id="myTable"> 
<thead> 
    <tr> 
     <th colspan="3">Table</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">11/23/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
</tbody> 

私はJqueryを使用する必要があると思いますが、これは私が考えていたものです。

$(document).ready(function() { 

    var m = moment(); 
    var n = m.add(24, 'hours'); 
    var $dates = $('.dates'); 

$('#button1').click(function() { 

    if ($dates.each > n) { 
     $dates.hide(); 

     }); 
    }); 
}); 

Answer 1

テーブルの日付がテーブルの日付が間にあるかどうかを確認するために> 24時間の距離とisBetweenであるかどうかをチェックする瞬間isAfterを使用することができます現在の日付と次の24時間（つまり、私はどのように解釈したのですか< 24時間後）

テーブルの日付から瞬間オブジェクトを解析するとき、入力がISO 8601形式でないため、specify formatにする必要があります。ここでは実施例

：

$('#button1').click(function(){ 
 
    var $dates = $('.dates'); 
 
    var m = moment().add(24, 'h'); 
 
    $dates.each(function() { 
 
    var date = moment($(this).text(), 'MM/DD/YYYY hh:mm a'); 
 
    if (date.isBetween(moment(), m)) { 
 
     $(this).parent().show(); 
 
    } else { 
 
     $(this).parent().hide(); 
 
    } 
 
    }); 
 
}); 
 

 
$('#button2').click(function(){ 
 
    var $dates = $('.dates'); 
 
    var m = moment().add(24, 'h'); 
 
    $dates.each(function() { 
 
    var date = moment($(this).text(), 'MM/DD/YYYY hh:mm a'); 
 
    if (date.isAfter(m)) { 
 
     $(this).parent().show(); 
 
    } else { 
 
     $(this).parent().hide(); 
 
    } 
 
    }); 
 
}); 
 

 
$('#button3').click(function(){ 
 
    $('tr').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> 
 

 
<button type="button" id="button1">Less than 24 hours</button> 
 
<button type="button" id="button2">More than 24 hours</button> 
 
<button type="button" id="button3">Show All</button> 
 

 
<table id="myTable"> 
 
<thead> 
 
    <tr> 
 
     <th colspan="3">Table</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>A</td> 
 
     <td class="dates">12/24/2016 12:45 pm</td> 
 
     <td>C</td> 
 
    </tr> 
 
    <tr style="display:none;"> 
 
     <td colspan="3"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>A</td> 
 
     <td class="dates">11/23/2016 12:45 pm</td> 
 
     <td>C</td> 
 
    </tr> 
 
    <tr style="display:none;"> 
 
     <td colspan="3"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>A</td> 
 
     <td class="dates">12/24/2016 12:45 pm</td> 
 
     <td>C</td> 
 
    </tr> 
 
    <tr style="display:none;"> 
 
     <td colspan="3"></td> 
 
    </tr> 
 
</tbody>

Answer 2

このような（テストされていないスニペット）を試してください。

$dates.each(function() { 
    var date = moment($(this).text()); 
    if (date.isAfter(n)) { 
    $(this).hide(); 
    } else { 
    $(this).show(); 
    } 
}); 

momentはあなたの細胞であなたの日時テキストを解析して問題を持っている場合、あなたは、明示的see the documentationをフォーマットを指定することができます。

Answer 3

これはfiddleを使用してください。それが助けてくれるかも！

JS：

$('#less24,#gt24').click(function() { 
var target = $(this).attr('id'); 
var currentdate = new Date(); 
$('.dates').each(function(){ 

var diff=daydiff(currentdate,new Date($(this).text())); 
if(target === 'less24') 
{ 
if(diff <1 && diff >-1) 
{ 
$(this).parent().show(); 
} 
else 
{ 
$(this).parent().hide(); 
} 
} 
else 
{ 
if(diff <1 && diff >-1) 
{ 
$(this).parent().hide(); 
} 
else 
{ 
$(this).parent().show(); 
} 
} 
}); 

}); 

function parseDate(str) { 
    var mdy = str.split('/'); 
    return new Date(mdy[2], mdy[0]-1, mdy[1]); 
} 

function daydiff(first, second) { 
    return Math.round((second-first)/(1000*60*60*24)); 
} 

HTML：

<button type="button" id="less24">Less than 24 hours</button> 
<button type="button" id="gt24">More than 24 hours</button> 

<table id="myTable"> 
<thead> 
    <tr> 
     <th colspan="3">Table</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">11/23/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td class="dates">12/24/2016 12:45 pm</td> 
     <td>C</td> 
    </tr> 
    <tr style="display:none;"> 
     <td colspan="3"></td> 
    </tr> 
</tbody>