18. JavaScript Dates

What you will learn

• How to create a date object
• How to read parts of a date
• How to format dates for people
• How to calculate with dates

Creating dates

The Date object stores a moment in time. Creating one with no arguments gives the current date and time from the visitor’s device.

<p id="demo"></p>

<script>
  const now = new Date();
  document.getElementById("demo").textContent = "Right now: " + now.toString();
</script>

Ways to create a specific date

Reading parts of a date

<p id="demo"></p>

<script>
  const d = new Date(2026, 2, 15, 14, 30);

  document.getElementById("demo").innerHTML =
    "Year: " + d.getFullYear() + "<br>" +
    "Month (0-11): " + d.getMonth() + "<br>" +
    "Day of month: " + d.getDate() + "<br>" +
    "Day of week (0 = Sunday): " + d.getDay() + "<br>" +
    "Hours: " + d.getHours() + "<br>" +
    "Minutes: " + d.getMinutes();
</script>

Note the odd names: getDate() is the day of the month, and getDay() is the day of the week.

Formatting for people

toLocaleDateString() formats a date in the style of a language and region, which is far better than building text yourself.

<p id="demo"></p>

<script>
  const d = new Date(2026, 2, 15);

  document.getElementById("demo").innerHTML =
    "US: " + d.toLocaleDateString("en-US") + "<br>" +
    "UK: " + d.toLocaleDateString("en-GB") + "<br>" +
    "Long: " + d.toLocaleDateString("en-US", {
      weekday: "long", year: "numeric", month: "long", day: "numeric"
    });
</script>

Use toLocaleTimeString() for times, and toISOString() to get a standard text form such as 2026-03-15T09:30:00.000Z that is good for storing or sending.

Changing dates

The set methods change a date. JavaScript fixes overflow for you: adding 30 days to the 15th moves into the next month correctly.

<p id="demo"></p>

<script>
  const start = new Date(2026, 0, 20);   // 20 January 2026
  const later = new Date(start);         // a copy
  later.setDate(later.getDate() + 30);   // add 30 days

  const fmt = { year: "numeric", month: "long", day: "numeric" };
  document.getElementById("demo").textContent =
    start.toLocaleDateString("en-US", fmt) + " + 30 days = " +
    later.toLocaleDateString("en-US", fmt);
</script>

Notice the copy: new Date(start). The set methods change the original, so copy first if you still need it.

Comparing and subtracting dates

Dates can be compared with < and >. Subtracting two dates gives milliseconds, which you can convert.

<p id="demo"></p>

<script>
  const a = new Date(2026, 0, 1);
  const b = new Date(2026, 11, 25);

  const msPerDay = 1000 * 60 * 60 * 24;
  const days = Math.round((b - a) / msPerDay);

  document.getElementById("demo").textContent =
    "Days from 1 Jan to 25 Dec: " + days + " | b is later: " + (b > a);
</script>

Time zones

A date shows in the time zone of the visitor’s device, so two people may see different clock times for the same moment. For stored or shared values, use toISOString() (which uses UTC), and format for display only when you show it. Dates are tricky in general. For heavy date work, many developers use a tested library.

Common mistakes

• Forgetting that months start at 0.
• Confusing getDate() (day of month) with getDay() (day of week).
• Changing a date with set methods when you needed the original.
• Parsing unusual date strings such as "15/03/2026", which browsers read differently. Use YYYY-MM-DD.
• Assuming every visitor has the same time zone.

<p id="demo"></p>

<script>
  const birthday = new Date(2000, 4, 20);
  document.getElementById("demo").textContent =
    birthday.toLocaleDateString("en-US", { weekday: "long" });
</script>

Summary

• new Date() gives the current moment, and you can also build specific dates.
• Months start at 0, and the get and set methods read and change parts.
• Format with toLocaleDateString(), and store with toISOString().