Display Date In Letters Using JavaScript

to display date in letters using JavaScript isn’t that difficult, only that Working with the built in javascript functions may sometimes not give you what you really want however, you can add some few more options or method to give you your desired result.

Let’s take an instance where you will want to display the current date in letters using JavaScript, well, for a beginner, you might have your code up and running like the one below.

Example 1

Html

      <p  id="dt" style="  color: white;
          position: absolute;
          right: 25px;
          top: 5px;
          font-size: 25px;
">
</p>

JavaScript

var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("dt").innerHTML = n;
</script>
  </body>

Code Explanation

new Date() : new Date() is a built in function which holds a value of the current date

Displaying the Date in Letters

But this is not really what we want. Our preference as mentioned above is to display the date display in letters.

So how do we fix this? Well, if you recall, there Is a way in javascript to override the default data type of built in function, in this case, we are going to create an object and specify how we would want the date to display. The code below can be used to perform such operation.

Example 2

   Html
      <p  id="dt" ></p>

Css
#dt{
          color: white;
          position: absolute;
          right: 25px;
          top: 5px;
          font-size: 25px;
       }
      
    JavaScript
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

var d = new Date();
var n = d.toLocaleDateString("en-EN", options);
document.getElementById("dt").innerHTML = n;

toLocaledatestring() : Is a function that takes two parameters and uses the parameter provided to format the current date.

This is the simple ways you can display date in full using JavaScript. You can also check how to create a responsive Navbar using Html, Css and JavaScript.