How to Date Format in HTML?

To format dates in HTML, you can use JavaScript along with the built-in toLocaleDateString() method to customize the date format according to your requirements. Here’s an example of formatting a date in HTML using JavaScript:

HTML:

<p id="date"></p>

JavaScript:

var dateElement = document.getElementById("date");
var currentDate = new Date();
var formattedDate = currentDate.toLocaleDateString("en-US", { 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
});

dateElement.innerHTML = formattedDate;

Result:

June 18, 2023

In this example, we have an HTML paragraph element <p> with the id "date". In the JavaScript code, we first retrieve the element using getElementById() and store it in the dateElement variable.

Next, we create a new Date object using new Date(), which represents the current date and time.

Then, we use the toLocaleDateString() method on the currentDate object to format the date according to the specified options. In this case, we pass "en-US" as the locale parameter, which represents the United States English format. We also provide an options object with the properties year, month, and day to customize the format.

Finally, we set the innerHTML of the dateElement to the formatted date, which updates the content of the HTML paragraph element.

The resulting formatted date will be displayed in the HTML as per the specified format. You can modify the options passed to toLocaleDateString() to customize the date format further based on your needs.