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

Question

I am trying to only show elements that are related to certain months. I am using PHP to make a select box that value's are the months' first and last days of the month.

Here is the resulting HTML for the select box:

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

This is one related element:

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

As you can see I am using data-start-date and data-end-date to store the start and end date of the element.

Then I am using jQuery to compare the element date range to the select box values.

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

The issue I am having is with the above element. It has a start date in April and an end date in May. This means it should be displayed in both months when selected. But instead it only displays in April. What am I missing to make it so elements that have a date range between two or more months display when any of those months are selected?

Here is a Codepen: http://codepen.io/anon/pen/wBLwwv

Answer 1

If you're only bothered about if it is in that month then just use the start dates of the month.

Change this line

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

To

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

It doesn't matter when the month ends you just need to know if the event is ongoing past the 1st of the month

Answer 2

the logic is wrong, try this

$('.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');
    }
});

Edited: final fix: "looks" both way

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