筛选表以仅显示未来30天内的日期

我有一个数据表，其中一列用于"Available Date "。我只想显示Available Date在未来30天内的行。

下面是一个简化的表格示例:

<table id="properties">
  <tr>
    <td>Property 1</td>
    <td class="availability">4/11/2016</td>
  </tr>
  <tr>
    <td>Property 2</td>
    <td class="availability">9/29/2015</td>
  </tr>
</table>

我不能确切地弄清楚如何将30天添加到日期中，所以我可以将当前日期与每个表行的日期进行比较，除了可能使用date .parse()之类的东西转换为毫秒。对于jQuery和JavaScript，我还是个新手，如果你有什么见解，我将不胜感激。

这是如何添加30天的日期:

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(date.getDate() + days);
    return result;
}

请参阅AnthonyWJones的回答:https://stackoverflow.com/a/563442/617027

…和这里的小提琴http://jsfiddle.net/sparebytes/XrWzq/为什么使用简单的new Date()会导致跨月、跨年边界和夏令时的问题。

你可以添加30天的日期对象，然后比较日期在你的html

compareDate.setDate(compareDate.getDate() + 30);

var compareDate = new Date();
compareDate.setDate(compareDate.getDate() + 30);
var tdDate;
$('tr').each(function(){
  tdDate = (new Date($(this).find('td.availability').text()));
  tdDate = ((tdDate-compareDate)/1000/60/60/24/30);
  if(tdDate>0 && tdDate<30){
    $(this).show();
  }else $(this).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="properties">
  <tr>
    <td>Property 1</td>
    <td class="availability">4/11/2016</td>
  </tr>
  <tr>
    <td>Property 2</td>
    <td class="availability">9/29/2015</td>
  </tr>
</table>

可以使用.setDate()为日期添加间隔。下面的示例将隐藏Property 3和Property 4行:

<table id="properties">
  <tr>
    <td>Property 1</td>
    <td class="availability">9/22/2015</td>
  </tr>
  <tr>
    <td>Property 2</td>
    <td class="availability">9/23/2015</td>
  </tr>
  <tr>
    <td>Property 3</td>
    <td class="availability">12/28/2015</td>
  </tr>
  <tr>
    <td>Property 4</td>
    <td class="availability">10/2/2016</td>
  </tr>
</table>

var max_availability = 30;
var end_date = new Date();
end_date.setDate(end_date.getDate() + max_availability);
$("#properties td.availability").each(function() {
    var this_date = new Date($(this).text());
    if(this_date < end_date){
        $(this).parent().show();
    }
    else{
        $(this).parent().hide();
    }    
});

这是一个工作的JSFiddle

相关内容

最新更新

热门标签：