display only items that contain a date of weekend-CodePudding

i have this nice script that lets me show only items that are dated in the future, but from this i'm trying to make a click that displays only dates that are weekends.

Codepen

$('#basicform_checkbox_2').click(function(e) {
  
    $('.div1').each(function(index, element) {
        var event_day = $(this).text();
        event_day = new Date(event_day);
        var today = new Date();
        event_day.setHours(0,0,0,0)
        today.setDate(today.getDate() 0);
        today.setHours(0,0,0,0)

      if(event_day < today) {
           $(this).toggleClass('toggle');
        }
      
    });
  
});

body {font-family: 'Ubuntu', sans-serif; font-weight: 400; color: white; background: black;}

div {margin-left: 3vmax;}
.div1 {display: block;}
.div1.toggle {display: none;}

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<br>
<div>
  <input type="checkbox" name="basicform_checkbox_2" id="basicform_checkbox_2"/>
  <label for="basicform_checkbox_2">Weekends only</label>
</div>
<br>

<div >2022 06 08</div>
<div >2022 06 09</div>
<div >2022 06 10</div>
<div >2022 06 11</div>
<div >2022 06 12</div>
<div >2022 06 15</div>
<div >2022 06 18</div>

i understand i have to use something like

var today = data.getDay();
if (today == 6 || today == 0) {

var today = new Date();
if(today.getDay() == 6 || today.getDay() == 0) alert('Weekend!');

var DayOfTheWeek = new Date().getDay();
if(DayOfTheWeek == 6 || DayOfTheWeek == 0){ $('#div1').hide(); }

var days_to_hide = { 0 : "Sunday", 6 : "Saturday" }
var today = new Date().getDay();
if( typeof days_to_hide[ today ] !== "undefined" ){ $('#div1').hide(); }

but i just can't seem to be able to incorporate any of it into my script, nor to adapt these into a new one to meet task's requirement — not for the lack of trying, but due to a low understanding of basics.

Thank you for your attention!

CodePudding user response：

You need to check if it's not future or (||) it's not any weekend day. I refactored your example to:

const isNotFutureWeekend = (date) => {
  const weekends = [0,6]
  
  const eventDay = new Date(date)
  eventDay.setHours(0,0,0,0)
  
  const today = new Date();
  today.setHours(0,0,0,0)
  
  return eventDay < today || !weekends.includes(eventDay.getDay())
}

$('#basicform_checkbox_2').click(function(e) {
  
    $('.div1').each(function(index, element) {
      if(isNotFutureWeekend($(this).text())) {
           $(this).toggleClass('toggle');
      }
    });
  
});