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