Real-time, date-time JavaScript code for your website
Tags: coding, code, datetime, javascript
Published: 2017-12-26 16:03:03

---
title: "Real-time, date-time JavaScript code for your website"
published: true
tags: Coding,code,date-time,javascript
canonical_url: https://pauljacobson.me/2017/10/22/real-time-date-time-javascript-code/
---

_I’ve been on a little bit of a journey over the last 6 months or so. I’ll explain in a future blog post but the short version is that I’ve expanded my skills to web development. I’ve been developing solutions to challenges I face as I learn more, and as I continue to update my [Modi’in Bus](http://modiinbus.com) project. I thought I’d start sharing some of those little solutions here on my blog, in addition to other helpful spaces._

I wanted to create a live date/time string for [Modi’in Bus](http://modiinbus.com). My goal was to use JavaScript to insert a line that stated the current date and time. I searched for a few explanations of how to effectively use the JavaScript `getDate()` method (here is [the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate)).

Adding the date is relatively straightforward. I couldn’t find a clean solution for adding a clock that changes in real-time, until I found [this great implementation](https://codepen.io/k3no/pen/akEQJB) by [Eugenio Leon](http://www.k3no.com/). The challenge with the time is that you want the live display to be dynamic, and not just update when you refresh.

The solution I came up with (with the help of the resources I mentioned) uses ES6 syntax, and seems to work pretty much as expected.

This is [my solution](https://gist.github.com/pauljacobson/f388945b61be9bd86acb06a99f475dbc). The script determines the current date and time, and inserts it into a `div` element with the class of `container` in my site code:

```
// The purpose of this block is to list the month names 
// which will correspond with the corresponding numerical 
// value of the particular month that is other derived from the getDate() method.
Date.prototype.monthName = function() {
  const monthsOfYear = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return monthsOfYear[this.getMonth()];
}

// As with the previous block, this block states the days 
// of the week so the script can match the named days of 
// the week to corresponding numerical values.
Date.prototype.dayName = function() {
  const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return daysOfWeek[this.getDay()];
}

function realtimeClock() {
  const now = new Date(),
  today = now.dayName(),
  year = now.getFullYear(),
  month = now.monthName(),
  day = now.getDate(),
  secs = ('0' + now.getSeconds()).slice(-2),
  mins = ('0' + now.getMinutes()).slice(-2),
  hours = now.getHours(),
  container = document.querySelector('.clock');
  
  container.innerHTML = Today is ${today}, ${day} ${month} ${year}. The current time is ${hours}:${mins}:${secs};
  requestAnimationFrame(realtimeClock);
};

requestAnimationFrame(realtimeClock);
```

I thought I’d share it because I couldn’t find anything that did the trick quite like this on StackOverflow.