<h1>Convert Unix Time to U.S. Date Format in JavaScript</h1>

<p><label for="date">Enter a date: </label><input type="text" id="date" placeholder="January 1, 1970" value="January 1, 1970"> <button>Convert to Unix</button></p>

<p><label for="unix">Enter a Unix timestamp: </label><input type="text" id="unix" placeholder="1610796674" value="1610796674"> <button>Convert to Date</button></p>
<output></output>
body {
  padding: 0 20px;
  text-align: center;
  font-size: 1.2em;
}

h1 {
  font-size: 1.6em;  
}

output {
  display: block;
  line-height: 1.4;
}
console.clear();

let output = document.querySelector('output'),
    dateinput = document.querySelector('#date'),
    unixinput = document.querySelector('#unix'),
    datebtn = document.querySelector('button'),
    unixbtn = document.querySelectorAll('button')[1];

function convertUnixTime(unix) {
  let a = new Date(unix * 1000),
      year = a.getFullYear(),
      months = ['January','February','March','April','May','June','July','August','September','October','November','December'],
      month = months[a.getMonth()],
      date = a.getDate(),
      hour = a.getHours(),
      min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes(),
      sec = a.getSeconds() < 10 ? '0' + a.getSeconds() : a.getSeconds();
  return `${month} ${date}, ${year}, ${hour}:${min}:${sec}`;
}

// Pass in a UNIX timestamp (milliseconds since January 1, 1970)
console.log(convertUnixTime(1610796674));

datebtn.addEventListener('click', function () {
  output.innerHTML = parseInt((new Date(dateinput.value).getTime() / 1000).toFixed(0));
}, false);

unixbtn.addEventListener('click', function () {
  output.innerHTML = convertUnixTime(unixinput.value);
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.