CODEWITHSUNDEEP
javascriptjquery
user1234
user1234

Reputation: 3159

How to show/hide a span depending on whether the local time is equal to between a “startdate” and “enddate” Jquery

I have a table consisting of multiple rows. I have a delete link at the end, on clicking will delete that row. however I have to display a maintenance window message, if my local time is between the startdate and the enddate: eg: local time: Tue Feb2, 12:27PM startdate: Tue Feb2, 11:11AM and enddate: Wed: Feb3, 11:11AM The above local time falls between start and end dates. So when i delete the row, i first check to see of the deleted row had a "startdate" and the "enddate" between the local time, if so show the message.

here is the html for table:

<table id="show-list">
      <thead>
    <tr>
      <th>Id</th>
      <th>Subject</th>
      <th>Start Date</th>
      <th>End Date</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>12</td>
        <td>abc</td>
        <td>
            <time datetime="Tue Feb2 2016, 11:27AM">Tue Feb2, 12:27PM</time>
        </td>
        <td>
          <time datetime="Wed Feb3 2016, 11:27AM">Wed Feb3, 11:27AM</time>
        </td>
        <td><a href="#">Delete Row</a></td>
      <tr>
      <tr>
        <td>123</td>
        <td>hru</td>
        <td>
            <time datetime="Tue Feb23 2016, 11:27AM">Tue Feb23, 12:27PM</time>
        </td>
        <td>
          <time datetime="Wed Feb24 2016, 11:27AM">Wed Feb24, 11:27AM</time>
        </td>
        <td><a href="#" class="deleterow">Delete Row</a></td>
      <tr>
  </tbody>
 </table>
 <div id="div" style="display:none;"></div>

js:

$('.deleterow').on('click', function(e) {
  var $this = $(this);
  $.ajax({
      url: "/url/delete",
  }).done(function(result) {
   var now = Date.now();
        $this.parent().find("time").each(function(arg,log){
          //not sure how to check for the start and end dates here to see if its between the current time.
        });
 });

Help greatly appreciated!! Thanks

Upvotes: 0

Views: 132

Answers (2)

Roman
Roman

Reputation: 351

Here is simple sample, but you need to define date format :

        var now = Date.now(),
        start = $this.parent().parent().find('time')[0].getAttribute('datetime'),
        end = $this.parent().parent().find('time')[1].getAttribute('datetime');
        start = new Date(start.replace('AM', ' AM'));
        end = new Date(end.replace('AM', ' AM'));
        if ((start.getTime()  <= now.getTime()  && now.getTime()  <= end.getTime() )){
            alert("date contained");
        }

Upvotes: 3

KWeiss
KWeiss

Reputation: 3154

First, you need your dates in a format that can be interpreted by the JavaScript Date.parse() function. For example:

var earliest = Date.parse('2016-03-04T11:24')

This will return a number of milliseconds since 01.01.1970. In this case, the number is 1457090640000. Date.now() also produces a number of this kind.

Now you can just compare the two numbers:

if (earliest < now) {
    // do something... 
}

Do the same thing for the "latest" date and you're set.

Keep in mind though: If you're running the code in the browser, Date.now() produces whatever date the user's browser thinks is today. If you need your local time, you may want to use some server-side code. For example, you could define a JavaScript variable or data-attribute for each row that is affected while rendering your HTML on the server.

Upvotes: 1

Related Questions