Display month, date, and year with javascript and html

Question

I need to display the month, date and year in addition to the time.

I have tried to create variables for the month, day and year and then get element by ID. Example of how I was trying to do it:

var d = date.getDay();
var mn = date.getmonth();
var y = date.getFullYear();

EDIT: Here is my current code. I have to have a clock as well, but I have successfully coded it.

function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    var s = date.getSeconds();
    var session = "AM";

    if(h == 0){
        h = 12;
    }

    if(h > 12){
        h = h - 12;
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;

    setTimeout(showTime, 1000);

}

showTime();

<div id="MyClockDisplay" class="clock"></div>

<div id="Month"></div>
<div id="Day"></div>
<div id="Years"></div>

Welcome to StackOverflow. If you could provide what you've tried/what you've looked at that you're not understanding we would be more able to help. Admittedly the Date Object is one of the most badly implemented(or at least annoying) APIs in all of JS so don't feel bad that you're not sure what's going on with it. — zfrisch, Nov 29 '18 at 17:38
That looks like the code for what's working. Could you also show what you've tried that is **not** working? — Scott Sauyet, Nov 29 '18 at 18:03
Clock part seems to be working fine ... What's not working? https://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript and https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date — mc01, Nov 29 '18 at 18:09
Hi. I deleted my attempt at the date coding. But i did var d = date.getDay(); var mn = date.getmonth(); var y = date.getFullYear(); and then i said went through and tried to call each item by get element by id — newgirl97, Nov 29 '18 at 18:27

benvc · Answer 1 · 2021-10-01T22:55:29.740

You are on the right track if you follow the same pattern you used to build your clock in order to build the date, but you are misunderstanding some of the JavaScript date methods. getDay() returns a numerical value for the day of the week (0 for Sunday, etc), so instead you need to use getDate() to return the day of the month. Also, be aware that getMonth() returns the month index starting at 0 for January so you have to make an adjustment when displaying your date.

You could accomplish the same thing with a lot less code, but the example below follows your pattern so that it will hopefully be a bit easier for you to follow.

function showTime() {
  var timediv = document.getElementById("myClockDisplay");
  var datediv = document.getElementById("myDateDisplay");
  var dt = new Date();
  var d = dt.getDate();
  var m = dt.getMonth() + 1; // getMonth() returns the month "index" starting with 0 for Jan
  var y = dt.getFullYear();
  var hh = dt.getHours();
  var mm = dt.getMinutes();
  var ss = dt.getSeconds();
  var session = "AM";
  if (hh == 0) {
    hh = 12;
  }

  if (hh > 12) {
    hh = hh - 12;
    session = "PM";
  }

  d = (d < 10) ? "0" + d : d;
  m = (m < 10) ? "0" + m : m;
  hh = (hh < 10) ? "0" + hh : hh;
  mm = (mm < 10) ? "0" + mm : mm;
  ss = (ss < 10) ? "0" + ss : ss;
  timediv.textContent = hh + ":" + mm + ":" + ss + " " + session;
  datediv.textContent = m + "/" + d + "/" + y;
  setTimeout(showTime, 1000);
}

showTime();

<div id="myClockDisplay" class="clock"></div>
<div id="myDateDisplay"></div>

score -1 · Answer 2 · answered Nov 29 '18 at 18:34

Please see below . working copy of your code.

    <html>
    <body onload='showTime()'>
    <h1>Show a push button:</h1>
   <form>
    <div id="MyClockDisplay" class="clock"></div>
    <div id="Month"></div>
    <div id="Day"></div>
    <div id="Years"></div>
    </form>

    <script>
    function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    var s = date.getSeconds();
    var session = "AM";

    if(h == 0){
     h = 12;
    }

    if(h > 12){
    h = h - 12;
    session = "PM";
 }

 h = (h < 10) ? "0" + h : h;
 m = (m < 10) ? "0" + m : m;
 s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
// document.getElementById("MyClockDisplay").textContent = time;

setTimeout(showTime, 1000);

}

Display month, date, and year with javascript and html

2 Answers2