0

I need to show a message called expired near the title of each row if the end date is less than todays date. This is going to be done using hover in jquery.

My table view is below:

                     <div class="table-responsive">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">Title</th>
                              <th scope="col">Start Date</th>
                              <th scope="col">End Date</th>
                              <th scope="col">Description</th>
                              <th scope="col">Edit</th>
                            </tr>
                          </thead>
                          <tbody>
                            <?php foreach($offerList as $info){ ?>
                            <tr>
                                <td><a href="<?php echo base_url()."offer/publicview/?id=".urlencode($this->encrypt->encode($info->offid)); ?>"><?php echo $info->title; ?></a></td>
                                <td><?php echo $info->startdate; ?></td>
                                <td><?php echo $info->enddate; ?></td>
                                <td><?php echo $info->discrip; ?></td>
                                <td>
                                    <a href="<?php echo base_url()."offer/edit/?id=".urlencode($this->encrypt->encode($info->offid)); ?>">Edit</a>                    

                                </td>
                            </tr>
                            <?php } ?>
                          </tbody>
                        </table>
                        </div>

jquery :

<script>


var today = t.getDate() + '/' + (t.getMonth()+1) + '/' + t.getFullYear() ;

$( "tr" ).hover(

  function() {  
   $( this ).append( $( "<span> expired </span>" ) );    
  }, function() {
   $( this ).find( "span:last" ).remove();
  });

 $( "tr.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
 });

</script>

I need to get the end date of each row and compare it with todays date. And if the end date is less than todays date then the message should be shown near the title.

Any idea on doing this? I have no idea on how to get the end date of each row.

shavindip
  • 607
  • 9
  • 27

3 Answers3

2

Try Following

Just Add endDate class to end date <td> While appending <table> body

$('tr:not(:first)').hover(function(){
 var trDate=$(this).find('.endDate')
   var d = new Date();
 var month = d.getMonth()+1;
 var day = d.getDate();
 var CurrentDate =(day<10 ? '0' : '') + day  + '-' +
    (month<10 ? '0' : '') + month + '-' +d.getFullYear();
    
    if(CurrentDate > $(trDate).text())
    {
     alert('expired');
 }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
                        <table class="table" border="1">
                          <thead>
                            <tr>
                              <th scope="col">Title</th>
                              <th scope="col">Start Date</th>
                              <th scope="col">End Date</th>
                              <th scope="col">Description</th>
                              <th scope="col">Edit</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                                <td>Test</td>
                                <td>05-09-2018</td>
                                <td class="endDate">19-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                             <tr>
                                <td>Ended date</td>
                                <td>09-09-2018</td>
                                <td class="endDate">18-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                             <tr>
                                <td>Date</td>
                                <td>12-09-2018</td>
                                <td class="endDate">22-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                             <tr>
                                <td>Date Ended</td>
                                <td>12-09-2018</td>
                                <td class="endDate">01-09-2018</td>
                                <td>Testing Hover</td>
                                <td>Edit</td>
                            </tr>
                          </tbody>
                        </table>
                        </div>
Som
  • 598
  • 3
  • 12
  • Thanks a lot. I got the current date and found the way to use the if statement in a jquery function thanks to you. – shavindip Sep 19 '18 at 09:30
1

Just add a class to the td you want to get the date from and do something like:

$('.hov').hover(function(){
    var el_value = $(this).text(); // date
    var enddate = new Date(el_value).getTime();
    var today = new Date().setHours(0,0,0,0);
    if (enddate < today) {
        console.log('expired');
    } else {
        console.log('not expired');
    }
});

http://jsfiddle.net/vbjwe43m/4/

Uses: Check if date is in the past Javascript

Alex
  • 9,215
  • 8
  • 39
  • 82
1

You can add a class attribute to the <td><?php echo $info->enddate; ?></td> so that it looks like <td class='enddate'><?php echo $info->enddate; ?></td>. Then in your jquery you would get the enddate by

$( "tr" ).hover(

//this is the enddate
var $enddate = $(this).find('.enddate').text();

function() { $( this ).append( $( " expired " ) ); }, function() { $( this ).find( "span:last" ).remove(); });

$( "tr.fade" ).hover(function() { $( this ).fadeOut( 100 ); $( this ).fadeIn( 500 ); });

Ojo Tokunbo
  • 56
  • 1
  • 5