2017-02-12 3 views
0

Я хочу показать/скрыть строки таблицы в зависимости от дня недели. Код у меня на данный момент показывает/скрывает на основе периодов времени, 24 часа, а не календарных дней:Момент JS диапазон дат

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



<button type="button" id="button1">Monday</button> 
<button type="button" id="button2">Tuesday</button> 

<table id="myTable"> 
<thead> 
    <tr> 
    <th>Table</th> 
    </tr> 
</thead> 

<tbody> 
    <tr>   
    <td class="dates">13/02/2017 12:45 pm</td>  
    </tr> 

    <tr> 
    <td class="dates">14/02/2017 12:45 pm</td>  
    </tr> 

</tbody> 


$('#button1').click(function(){ 
    var $dates = $('.dates'); 
    var m = moment().add(1, 'd'); 

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

ответ

0

В «дддд» в moment.format() представляет собой название дня недели вы можете легко сравнить его с ярлыками кнопок.

Прикрепите обработчик кликов ко всем кнопкам, добавив к ним общий класс. jQuery позволяет выбирать все элементы, соответствующие критериям выбора.

Как только вы попадете в обработчик, возьмите метку нажатой кнопки и сравните ее с разобранными датами, чтобы решить показать/скрыть каждый.

$('.day-btns').click(function() { 
 
    var btnText = $(this).text(); 
 
    $('.dates').each(function() { 
 
    var date = moment($(this).text(), 'DD/MM/YYYY hh:mm a'); 
 
    if (date.format('dddd') == btnText) { 
 
     $(this).parent().show(); 
 
    } else { 
 
     $(this).parent().hide(); 
 
    } 
 
    }); 
 
    
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button" class="day-btns" id="button1">Monday</button> 
 
<button type="button" class="day-btns" id="button2">Tuesday</button> 
 

 
<table id="myTable"> 
 
<thead> 
 
    <tr> 
 
    <th>Table</th> 
 
    </tr> 
 
</thead> 
 

 
<tbody> 
 
    <tr>   
 
    <td class="dates">13/02/2017 12:45 pm</td>  
 
    </tr> 
 

 
    <tr> 
 
    <td class="dates">14/02/2017 12:45 pm</td>  
 
    </tr> 
 

 
</tbody>

0

Используйте метод .weekday, чтобы получить число, основанное на день недели, вы получите 0 в воскресенье, 1 понедельник, и т.д ..

Получает или устанавливает день неделю в соответствии с местностью.

Пример:.

moment().weekday(); // code ran on a sunday 
// 0 
moment(new Date(1, 12, 2005)).weekday(); 
// 5 

Обратите внимание, что метод локальной известно, от докторов

Если локаль назначает понедельник как первый день недели, момент() день недели (0) будет в понедельник. Если воскресенье - первый день недели, момент(). Weekday (0) будет в воскресенье.

+0

Спасибо, я не знал об этом решении. –

Смежные вопросы