How to Get Today's Date in HTML Ultimate Guide

HTML has no built-in live date display. Use JavaScript to create a Date, format the value for your readers, and place the resulting text in an HTML element. A Date object represents a point in time; methods such as getMonth() and toLocaleDateString() determine how that value is presented.

Display the Current Date and Time with JavaScript in HTML

Use new Date() when you need a Date object and its methods. Calling Date() without new instead returns a date-time string immediately, so it cannot be used with methods such as getFullYear(). Put an element with the current-date ID in the page, then select that same ID and set its textContent:

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

Because the script follows the element, the element exists when getElementById() runs. The displayed value depends on when the script runs and the machine’s local time zone. Use textContent for plain date text; it avoids treating the value as HTML markup. This browser-page example is not executed by the article runtime.

For a broader introduction to obtaining the current value, see JavaScript get current date.

Format the Date as Month/Day/Year in HTML

To display a numeric US-style date, build the string from the date parts. getMonth() is zero-based, so add 1 to get the conventional month number. getDate() returns the day of the month, while getFullYear() returns the year. This example uses a fixed date so the formatting logic is easy to adapt; replace it with new Date() for today’s local date.

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

The constructor’s month argument is also zero-based: 0 means January. Padding keeps single-digit months and days in a consistent two-digit form. The order month/day/year is a display convention, not a universal date format; choose a different order when it better suits your audience. For additional formatting patterns, see JavaScript format date.

Format the Date for a Locale with toLocaleDateString()

Use toLocaleDateString() to ask the browser’s internationalization support for a date string. Pass a locale such as en-US or en-GB to request a convention explicitly, and provide options to control the parts shown. Without a locale, output can follow the browser environment, so it may differ between readers.

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

Change the locale to en-GB to request British English conventions. The exact wording and punctuation are selected by the runtime’s locale data; avoid parsing the resulting string as though it had a fixed layout. Use toLocaleDateString() when the goal is reader-facing language and regional formatting rather than a machine-readable date.

Add a Weekday or Human-Readable Date Format

A weekday can be included directly through locale formatting. This avoids maintaining a separate array of weekday names and lets the chosen locale determine the wording and order.

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

The same options can be combined with another locale, such as fr-FR, for a localized long date. If you only need a short numeric value, omit weekday and use numeric month and day options. The formatted text can vary across browsers as locale data changes, even when the requested locale and options are the same.

Use Moment.js for Additional Date and Time Formats

Moment.js is an optional library; it is not needed for basic date display. Load Moment.js before calling its API, and include its locale data when using localized formats. The following calls are illustrative and require that dependency in the page: moment().format("YYYY-MM-DD") formats a calendar date; moment().fromNow() gives relative time from the current instant; moment.locale("fr"); moment().format("LL") requests a French long-date format when the French locale data is loaded; and moment().calendar() chooses wording based on how near the date is to now.

Relative time describes an interval, not the date a page was published or updated. Do not label moment().fromNow() as “Last updated” unless the value is based on a real saved update timestamp. Moment.js can be useful in existing projects that already include it, while the built-in Date APIs avoid adding a dependency for simple displays.

Convert a Date to UTC with toUTCString()

Use toUTCString() when a shared time standard is more useful than the viewer’s local clock. It returns a string representation of the Date value in UTC; it does not change the underlying instant or convert it into the viewer’s local time.

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

For a live value, replace the fixed ISO timestamp with new Date(). A UTC date can fall on a different calendar day from the same instant in a local time zone. Choose local formatting for a date intended for the viewer, locale formatting for regional conventions, and UTC when people need to compare or share a consistent time reference. See JavaScript convert date to UTC for related UTC guidance.