Hide past and future date jquery Hi developers, can you help Me to solve this with Jquery.
<script>
(function($){
$('[data-fieldlabel=\'Date and Price\']').each(function() {
//hide all past and future date checkbox and display only current date checkbox
});
})(jQuery);
This is my HTML
<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
>
Here is my try:
<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>
and jQuery
$('[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();
}
});
@Nakov thanks,
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>
@david001 This is a bit hacky, but it should give you a clue at least.
$('[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();
let parsedDate = currentDateEl.match(/(\d+)/g);
let elDate = new Date('20' + parsedDate[2], parsedDate[0] - 1, parsedDate[1])
if (currentDateEl.startsWith(today) || elDate.getTime() >= date.getTime()) {
$(this).show();
return false;
}
});
Make sure you add style="display: none" to all your span elements, like this:
<span class="checkbox custom-checkbox custom-check-box" style="display: none">
@Nakov thanks i will marked it solved can you tell me why you mentioned 20 here
let elDate = new Date('20' + parsedDate[2], parsedDate[0] - 1, parsedDate[1])
Thanks
@david001 '20' + '21' = '2021' (+ with strings means concatenate)
Please sign in or create an account to participate in this conversation.
