2017-02-12 9 views
0

曜日に基づいてテーブルの行を表示/非表示にしたい。現時点で私が持っているコードを示し/ 24時間の期間ではなく、暦日に基づいて非表示を:)moment.formatの「DDDD」(としてモーメント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

は、あなたが簡単にそれを比較することができ曜日名を表しボタンラベル付き。

すべてのボタンに共通のクラスを追加してクリックハンドラをアタッチします。 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

は、日を取得または設定します..あなたは、日曜日は0、月曜日は1などを取得する、曜日に基づいて番号を取得するには.weekdayメソッドを使用しますロケールに応じた週。

例:ロケールは、週の最初の月曜日割り当てモーメント()場合、方法は、ドキュメント

から、認識ローカルであること

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

注平日(0)は月曜日になります。日曜日が週の最初の日であれば、moment()。曜日(0)は日曜日になります。

+0

ありがとうございました。私はこのソリューションについて知りませんでした。 –