Question

0

53

Views

jquery hide checkbox based on dates

developers I need a help with jQuery. I have list of checkbox and I only want certain checkbox to be displayed in page. Currently, My code displays only current date checkbox but I need more checks. Here is what I want

get todays todays date
hide any checkbox options that are before todays date
only pick 1 date which is the next possible date after today (or todays date)
then hide all the other checkboxes

Below is my approach but feel free to help me in your own ways/code. You don't need to necessarily go with my code.

$('[data-fieldlabel=\'Date and Price\'] span').each(function() {
  const date = new Date();
  const today = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear().toString().slice(-2);

  const currentDateEl = $(this).find('.check-box-label').text();

  if (!currentDateEl.startsWith(today)) {
    $(this).hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="checkbox-group" data-fieldlabel="Date and Price">
  <span class="checkbox custom-checkbox custom-check-box">
                 <input id="field_13646002_25035125" type="checkbox"/>
                 <label class="check-box-label" for="field_13646002_25035125">10/9/21 - 8.50</label>
             </span>
  <span class="checkbox custom-checkbox custom-check-box">
                <input id="field_13646002_25035126" type="checkbox"/>
                <label class="check-box-label" for="field_13646002_25035126">10/16/21 - 2.00</label>
            </span>
  <span class="checkbox custom-checkbox custom-check-box">
                <input id="field_13646002_25035126" type="checkbox"/>
                <label class="check-box-label" for="field_13646002_25035126">10/28/21 - 3.00</label>
            </span>
</div>

I need one more check If i don't have current date(I want to show one nearest future date) let's say today date is 10/28/21 but i have below label

 <label class="check-box-label" for="field_13646002_25035126">10/27/21 - 3.00</label>
  <label class="check-box-label" for="field_13646002_25035126">10/29/21 - 3.00</label>
  <label class="check-box-label" for="field_13646002_25035126">10/30/21 - 3.00</label>

Now I want to show only this future nearest data <label class="check-box-label" for="field_13646002_25035126">10/29/21 - 3.00</label>

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T22:20:18.516Z

The following code may be what you need:

let now=new Date();
now.setHours(0);
now.setMinutes(0);
now.setSeconds(0);
let nowTime=now.getTime();
let items=$('[data-fieldlabel=\'Date and Price\'] span');
let index=-1;
for (let i=0;i<items.length;i++){
    let theDate=($(items[i]).find('.check-box-label').text()).split(" ")[0];
  let theDateObj=new Date(theDate);
  let diff=theDateObj.getTime()-nowTime;
  if (diff>=0){
    if (index==-1){
        index=i;
      break;
    }
  }
}
for (let i=0;i<items.length;i++){
    if (i!=index){
    $(items[i]).hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-group" data-fieldlabel="Date and Price">
  <span class="checkbox custom-checkbox custom-check-box">
    <input id="field_13646002_25035126" type="checkbox" />
    <label class="check-box-label" for="field_13646002_25035126">10/29/21 - 3.00</label>
  </span>
  <span class="checkbox custom-checkbox custom-check-box">
    <input id="field_13646002_25035126" type="checkbox" />
    <label class="check-box-label" for="field_13646002_25035126">10/30/21 - 3.00</label>
  </span>
  <span class="checkbox custom-checkbox custom-check-box">
    <input id="field_13646002_25035126" type="checkbox" />
    <label class="check-box-label" for="field_13646002_25035126">10/28/21 - 3.00</label>
  </span>
</div>