如何显示开始日期在一个月内而结束日期在另一个月内的元素？

Question

我试图只显示与特定月份相关的元素。我正在使用 PHP 制作一个选择框，该框的值是月份的第一天和最后一天。

这里是选择框的 HTML：

<select id="month" name="monthdaterange">
    <option value="1427864400,1430370000">April</option>
    <option value="1430456400,1433048400">May</option>
    <option value="1433134800,1435640400">June</option>
    <option value="1435726800,1438318800">July</option>
    <option value="1438405200,1440997200">August</option>
    <option value="1441083600,1443589200">September</option>
    <option value="1443675600,1446267600">October</option>
    <option value="1446354000,1448863200">November</option>
    <option value="1448949600,1451541600">December</option>
    <option value="1451628000,1454220000">January</option>
    <option value="1454306400,1456725600">February</option>
    <option value="1456812000,1459400400">March</option>
</select>

这是一个相关的元素：

<div data-start-date="1429765200" data-end-date="1431061200" class="small-12 medium-6 large-6 columns special-container">
    <div class="special-block">
        <div class="special-block-text">
            <h3>Special Test 1</h3>
            <p>Lorem ipsum dolor sit amet....</p>
        </div>
    </div>
</div>

如您所见，我使用data-start-date 和data-end-date 来存储元素的开始和结束日期。

然后我使用 jQuery 将元素日期范围与选择框值进行比较。

function get_month_specials(mnth){
    var daterange = mnth.split(',');
    var firstofmonth = daterange[0];
    var lastofmonth = daterange[1];
    //alert('The start date of this month is: ' + firstofmonth + '. The end date of this month is: ' + lastofmonth);

    jQuery('.special-container').each( function( index, value ){
        if(jQuery(this).attr('data-start-date') >= firstofmonth || jQuery(this).attr('data-end-date') <= lastofmonth){
            jQuery(this).css( 'background-color', '#fff' );
        }
    });
}

我遇到的问题与上述元素有关。它的开始日期为 4 月，结束日期为 5 月。这意味着它应该在选择后的两个月中显示。但相反，它只在四月显示。我缺少什么让日期范围介于两个或多个月份之间的元素在选择这些月份时显示？

这是一个 Codepen：http://codepen.io/anon/pen/wBLwwv

Answer 1

如果您只关心是否在该月，那么只需使用该月的开始日期。

改变这一行

if(jQuery(this).attr('data-start-date') >= firstofmonth || jQuery(this).attr('data-end-date') >= lastofmonth){

到

if(jQuery(this).attr('data-start-date') >= firstofmonth || jQuery(this).attr('data-end-date') >= firstofmonth ){

月末何时结束并不重要，您只需要知道该事件是否持续到当月 1 日之后

Answer 2

逻辑错了，试试这个

$('.special-container').each( function( index, value ){
    $(this).addClass('hidden');
    if(
      ($(this).attr('data-start-date') >= firstofmonth && $(this).attr('data-start-date') <= lastofmonth) ||
      ($(this).attr('data-end-date') <= lastofmonth && $(this).attr('data-end-date') >= firstofmonth)) {
        $(this).removeClass('hidden');
    }
});

已编辑：最终修复：双向“看起来”

$('.special-container').each( function( index, value ){
  $(this).addClass('hidden');
  if( 
     (firstofmonth >= $(this).attr('data-start-date') && firstofmonth <= $(this).attr('data-end-date')) || 
     (lastofmonth >= $(this).attr('data-start-date') && lastofmonth <= $(this).attr('data-end-date')) ||
     ($(this).attr('data-start-date') >= firstofmonth && $(this).attr('data-start-date') <= lastofmonth)
  ) {
    $(this).removeClass('hidden');
  }
});

http://codepen.io/anon/pen/qEzZvw