How to hide past time using javascript?

Question

I have a button with name Today When I click on that there should not be display past time.

How can I do that?

My code:

$('.today').click(function() {
  $('.custom_time li').each(function() {
    $(this).hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>

Seems like your code is already doing what you want. What's the problem? — glhr, Apr 01 '19 at 09:31
@glhr look at his current code, there is no logic inside, he just hided everything — Jacky, Apr 01 '19 at 09:32
when i click on today button there is all times hide but i want to just hide past time as per current time. — Rohit Verma, Apr 01 '19 at 09:32

Zakaria Acharki · Accepted Answer · 2019-04-01T10:38:39.190

You need to get the current hour and compare it with each timeNumeric, you need also to check for the "pm/am" period hours, like:

$('.today').click(function(){
  var hour, period;
  var current_hour = new Date().getHours();

  $('.custom_time li').each(function() {
    period = $("small", this).text() === "pm" ? 12 : 0;
    hour = parseInt($(".timeNumeric", this).text().split(':')[0]) + period;

    if (hour <= current_hour || hour === 24) {
      $(this).hide();
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>

there is 12:00 pm also should be hide because it is less than current time — Rohit Verma, Apr 01 '19 at 09:57
Thanks @Zakaria Acharki now its working fine exactly what is want. Thanks — Rohit Verma, Apr 01 '19 at 10:08

mplungjan · Answer 2 · 2019-04-01T12:58:43.727

Try filter

Note I converted the am/pm to 24 hours using this script

const pad = (num) => ("0"+num).slice(-2);
const convertTime12to24 = (time12h) => { const [time, modifier] = time12h.split(' '); let [hours, minutes] = time.split(':'); if (hours === '12') hours = '00'; if (modifier.toUpperCase() === 'PM') hours = parseInt(hours, 10) + 12; return `${pad(hours)}:${pad(minutes)}`; }
const padTime = (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;

$('.today').on("click",() => {
  const now = padTime(new Date());
  $('#output').text(` Filtering on ${now}`)
  $('.custom_time li').filter((_,elm) => {
    const $t = $(elm).find('.timeNumeric');
    const text = convertTime12to24($t.text()+' '+$t.next().text());
    return text<now;
  }).hide();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button><span id="output"></span>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>

still hiding everything – Muhammad Usman Apr 01 '19 at 09:39 — Muhammad Usman, Apr 01 '19 at 09:39
what about 3,4,5,6 PM ? – Muhammad Usman Apr 01 '19 at 10:07 — Muhammad Usman, Apr 01 '19 at 10:07
I think it is. 12:00PM is less than 3:00PM No ? – Muhammad Usman Apr 01 '19 at 10:30 — Muhammad Usman, Apr 01 '19 at 10:30

Nordine · Answer 3 · 2019-04-01T11:40:52.683

You can do it like this...I think that piece of code can be improved a lot but hey, that's a start.

$('.today').click(function() {
  $('.custom_time li').each(function() {
    var hour = $(this).find('.timeNumeric').html();
    hour = hour.split(':')[0];
    hour = parseInt(hour);
    var isMorning = $(this).find('small').html() == 'am';
    if (!isMorning && hour != 12) hour += 12;
    var currentDate = new Date();
    if (hour <= currentDate.getHours()) {
        $(this).hide();
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>

there is 12:00 pm also should be hide because it is less than current time — Rohit Verma, Apr 01 '19 at 09:59

score 1 · Answer 4 · answered Apr 01 '19 at 10:06

What I would suggest you to do is, Just take a random date (without the time part).

Now set the current date's minutes, hours , seconds for that date.

Now create a date (date part same as above) with time of that mentioned in your li and compare them with simple < or > and you should be able to get what you want

$('.today').click(function() {
  var d = new Date();
  
  var today = new Date("11/24/1993");
  
  today.setHours(d.getHours());
  today.setMinutes(d.getMinutes());
  today.setSeconds(d.getSeconds());
   
  $('.custom_time li').each(function() {
       var tempDate = new Date("11/24/1993 "+$(this).text());
       
        
       
       if(tempDate < today)
           $(this).hide()
      
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>

There is no need to create a date each time. Just the string HH:MM (with or without am/pm) is enough since it sorts correctly — mplungjan, Apr 01 '19 at 10:29

How to hide past time using javascript?

4 Answers4