How to get full time to display with Javascript

Question

I am creating a live application for current weather in a city searched. However, I am just working on displaying the time of the current time on my end at the moment and I am wondering how to fix it to firstly display it as 17:06 instead of the current 17:6 and also how to if wanted to display it as 5:06pm instead of in military style. Thanks!

function formatDate(theDate) {
  let now = new Date();

  let currentDate = document.querySelector("#currentDate");

  console.log(now.getDate());

  console.log(now.getMilliseconds());

  console.log(now.getDay());
  console.log(now.getFullYear());
  console.log(now.getMonth());

  let date = now.getDate();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  let year = now.getFullYear();
  let days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  let months = [
    "Jan",
    "Feb",
    "March",
    "April",
    "May",
    "June",
    "July",
    "Aug",
    "Sept",
    "Oct",
    "Nov",
    "Dec",
  ];
  let day = days[now.getDay()];
  let month = months[now.getMonth()];

  currentDate.innerHTML = ` ${day} ${hours}:${minutes}`;
  return theDate;
}

window.onload = formatDate();

function currentCity() {
  event.preventDefault();
  let city = document.querySelector("#city");
  city.innerHTML = "Works";
}
function searchCity() {
  event.preventDefault();
  let serachInput = document.querySelector("#search-input");
}
let runSearch = document.querySelector("#search-button");

runSearch.addEventListener("click", currentCity);

Starting point: https://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript — jonrsharpe, Jan 16 '21 at 22:23
Use [String#padStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) for the singe digits issue and the am/pm just requires some basic math if the value is greater than 12 — charlietfl, Jan 16 '21 at 22:25

score 2 · Accepted Answer · answered Jan 16 '21 at 22:40

You can use the padStart method to add leading zeros to strings. Remember to cast your number to a string before using padStart: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

For the hours and meridian, it's just a bit of arithmetics.

const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();

const formattedHours = (hours % 12).toString().padStart(2, '0');
const formattedMinutes = minutes.toString().padStart(2, '0')
const meridian = hours / 12 < 1 ? 'AM' : 'PM'

const time = `${formattedHours}:${formattedMinutes}${meridian}`;

console.log(time)

score 1 · Answer 2 · answered Jan 16 '21 at 22:27

Use a built-in JavaScript method to get the date-time string

var currentDate = new Date();
currentDate.toDateString(); //"Sat Jan 16 2021"
currentDate.toGMTString(); //"Sat, 16 Jan 2021 22:22:51 GMT"
currentDate.toISOString(); //"2021-01-16T22:22:51.698Z"
currentDate.toJSON(); //Returns the same as above
currentDate.toLocaleDateString(); //"1/16/2021"
currentDate.toLocaleTimeString(); //"2:22:51 PM"

check out all the "to" methods here https://www.w3schools.com/jsref/jsref_obj_date.asp

How to get full time to display with Javascript

2 Answers2