I'm not good in JavaScript. Here is my html "Event Table" below with Date and Event Name:

<table id="events">
    <tr>
        <td>23 Aug 20:00</td>
        <td>Event 5</td>
    </tr>
    <tr>
        <td>23 Aug 18:30</td>
        <td>Event 4</td>
    </tr>
    <tr>
        <td>23 Aug 17:00</td>
        <td>Event 3</td>
    </tr>
    <tr>
        <td>22 Aug 13:45</td>
        <td>Event 2</td>
    </tr>
    <tr>
        <td>Event 1</td>
    </tr>
 </table> 

Dates are in GMT +2. I would like that these Event Dates be automatically converted to user's local time. Better if it is possible with "foreach", because the table consists of many rows.

Solved, thanks to Answers, but maybe there is a more elegant way?

    <script src=".js/2.18.1/moment.js"></script>
<table id="events">
    <tr>
        <td><script>var date1 = moment('23 Aug 20:00', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 5</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('23 Aug 18:30', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 4</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('23 Aug 17:00', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 3</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('22 Aug 13:45', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 2</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('22 Aug 11:30', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 1</td>
    </tr>
 </table>

I'm not good in JavaScript. Here is my html "Event Table" below with Date and Event Name:

<table id="events">
    <tr>
        <td>23 Aug 20:00</td>
        <td>Event 5</td>
    </tr>
    <tr>
        <td>23 Aug 18:30</td>
        <td>Event 4</td>
    </tr>
    <tr>
        <td>23 Aug 17:00</td>
        <td>Event 3</td>
    </tr>
    <tr>
        <td>22 Aug 13:45</td>
        <td>Event 2</td>
    </tr>
    <tr>
        <td>Event 1</td>
    </tr>
 </table> 

Dates are in GMT +2. I would like that these Event Dates be automatically converted to user's local time. Better if it is possible with "foreach", because the table consists of many rows.

Solved, thanks to Answers, but maybe there is a more elegant way?

    <script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment.js"></script>
<table id="events">
    <tr>
        <td><script>var date1 = moment('23 Aug 20:00', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 5</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('23 Aug 18:30', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 4</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('23 Aug 17:00', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 3</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('22 Aug 13:45', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 2</td>
    </tr>
    <tr>
        <td><script>var date1 = moment('22 Aug 11:30', 'D MMM HH:mm').utc();
document.write(date1.format('D MMM HH:mm'));</script></td>
        <td>Event 1</td>
    </tr>
 </table>

• javascript
• date
• html-table

Share Follow edited Aug 24, 2017 at 11:51 Anton_Dev asked Aug 24, 2017 at 10:25 Anton_DevAnton_Dev 13311 silver badge66 bronze badges 4

• Can you please show us what you've tried and what the problem is? Sounds like you need to use the Date functions of Javascript. – JCooke Commented Aug 24, 2017 at 10:31
• I have no Idea, yet. Only got the Time script, that shows user's local time: – Anton_Dev Commented Aug 24, 2017 at 10:36
• Never post code in ments. It's not readable. Please edit it into your question and explain what you've already tried. You'll get the best help that way. Thanks. – JCooke Commented Aug 24, 2017 at 10:39
• This code has no sense without a function declaration or something. I'll add it to question. My reendation is to modify the document.write(...) – jabujavi Commented Aug 24, 2017 at 10:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use moment library to format and automatically convert dates to user's local time

// here array with timestamps, most developers save dates in this format in database
var eventsDate = [
  1503576747,
  1491998594,
  1482819432,
  1481177832,
  1415463675
];

// function which render table
var renderEventsTable = function() {

  var tableContainer = document.getElementById('tableContainer');
  var table = document.createElement('table');
  var tbody = '';

  table.setAttribute("id", "events");
  table.setAttribute("class", "table");
  
  eventsDate.forEach(function(date, i) {
    tbody += '<tr>' +
               '<td>' + moment(date).format('DD MMMM hh:mm') + '</td>' + 
               '<td>Event ' + i + '</td>' +
             '</tr>'
  });

  table.innerHTML = tbody;
  tableContainer.appendChild(table);
};

// the table will render when the page loads
window.onload = function() {
  renderEventsTable();
}

table {  
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
}

td {  
    border: 1px solid #000; /* No more visible border */
    padding: 6px 12px;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="//cdnjs.cloudflare./ajax/libs/moment.js/2.10.3/moment.js"></script>
</head>
<body>
  <div id="tableContainer"></div>
</body>
</html>

You can use moment.js. Add the script to your page:

<script src="https://cdnjs./libraries/moment.js"></script>

Use the following to change the time format to user's current locale:

var localTime = moment('your date').utc();