JavaScript-Formatted Date and Time

When I repeatedly code something, even if only a few times a year, I eventually get disgusted with myself for not having written a function to do the work for me.

Well, below is such a function.

The JavaScript function will format the date and/or time according to your formatting codes. When you call the function, tell it the id value where to publish the result, and how to format the result.

That's pretty much it.

Of course, there are things to consider while getting up to the last step. Mostly, it's how to specify the format you prefer (do you want to print "January" or "Jan", or "01" or "1", for example). I'll address formatting shortly.

Here is the date and time this web page was loaded (according to your browser):

Here is the source code for the JavaScript function. No modifications required. Below the source code, I'll describe how to use the function.

<script type="text/javascript">
function PublishCurrentDateTime(divID4TheResult,outputFormatting)
{
   // Formatted Date and Time
   // Version 1.0
   // August 19, 2026
   // Will Bontrager Software LLC
   // https://www.willmaster.com/
   const today = new Date();
   const dd = String(today.getDate());
   const dd2 = dd.padStart(2,'0');
   const mm = String(today.getMonth() + 1); //January is 0.
   const mm2 = mm.padStart(2,'0');
   const yy = String(today.getFullYear());
   const yy2 = yy.substr(-2);
   var mon = String();
   switch(mm)
   {
      case '1' : mon = 'January'; break;
      case '2' : mon = 'February'; break;
      case '3' : mon = 'March'; break;
      case '4' : mon = 'April'; break;
      case '5' : mon = 'May'; break;
      case '6' : mon = 'June'; break;
      case '7' : mon = 'July'; break;
      case '8' : mon = 'August'; break;
      case '9' : mon = 'September'; break;
      case '10' : mon = 'October'; break;
      case '11' : mon = 'November'; break;
      case '12' : mon = 'December';
   }
   const mon2 = mon.substr(0,3);
   const wk = String(today.getDay() + 1); //Sunday is 0.
   const wk2 = wk.padStart(2,'0');
   var wkdy = String();
   switch(wk)
   {
      case '1' : wkdy = 'Sunday'; break;
      case '2' : wkdy = 'Monday'; break;
      case '3' : wkdy = 'Tuesday'; break;
      case '4' : wkdy = 'Wednesday'; break;
      case '5' : wkdy = 'Thursday'; break;
      case '6' : wkdy = 'Friday'; break;
      case '7' : wkdy = 'Saturday';
   }
   const wkdy2 = wkdy.substr(0,3);
   const hh = String(today.getHours());
   const hh2 = hh.padStart(2,'0');
   const hhap = String( (hh>12)?(hh-12):hh );
   const hhap2 = hhap.padStart(2,'0');
   const mn = String(today.getMinutes());
   const mn2 = mn.padStart(2,'0');
   const ss = String(today.getSeconds());
   const ss2 = ss.padStart(2,'0');
   const AMPM = String( (hh>=12)?"PM":"AM" );
   const ampm = AMPM.toLowerCase();
   var s = outputFormatting;
   s = s.replaceAll('{{WKNUM}}',wk);
   s = s.replaceAll('{{WKNUM2}}',wk2);
   s = s.replaceAll('{{WKALL}}',wkdy);
   s = s.replaceAll('{{WKABR}}',wkdy2);
   s = s.replaceAll('{{MNNUM}}',mm);
   s = s.replaceAll('{{MNNUM2}}',mm2);
   s = s.replaceAll('{{MNALL}}',mon);
   s = s.replaceAll('{{MNABR}}',mon2);
   s = s.replaceAll('{{DYNUM}}',dd);
   s = s.replaceAll('{{DYNUM2}}',dd2);
   s = s.replaceAll('{{YRNUM}}',yy);
   s = s.replaceAll('{{YRNUM2}}',yy2);
   if(s.match(/\{\{ampm\}\}/i))
   {
      s = s.replaceAll('{{HNUM}}',hhap);
      s = s.replaceAll('{{HNUM2}}',hhap2);
   }
   else
   {
      s = s.replaceAll('{{HNUM}}',hh);
      s = s.replaceAll('{{HNUM2}}',hh2);
   }
   s = s.replaceAll('{{MNUM}}',mn);
   s = s.replaceAll('{{MNUM2}}',mn2);
   s = s.replaceAll('{{SNUM}}',ss);
   s = s.replaceAll('{{SNUM2}}',ss2);
   s = s.replaceAll('{{AMPM}}',AMPM);
   s = s.replaceAll('{{ampm}}',ampm);
   document.getElementById(divID4TheResult).innerHTML = s;
} // function PublishCurrentDateTime()
</script>

Put the PublishCurrentDateTime() function on a web page. It needs to be in the web page source code somewhere above where it is being called. Within the web page <head> area is acceptable.

Before using the function, create a div, span, p, or other HTML container where the function will publish the date/time it formats for you.

The container must have an id value.

Example:

<div id="date-goes-here"></div>

To use the function, it needs to be called. When calling the PublishCurrentDateTime() function, you'll need to:

Specify the container's id value.

The function must know the id value of the container you made for the formatted date/time. The example above has id value date-goes-here
Specify a format.

The date/time format contains keywords between double curly brackets. The format also contains any punctuation it needs, along with any other characters. Only the keywords between the curlies will be replaced by the function.

Here is an example.
```
{{MNNUM}}/{{DYNUM2}}/{{YRNUM2}}
```
The above format publishes the date like this:

Here are lists of keywords you can use to format the date/time. (An example between parentheses follows each keyword.)

Weekday

{{WKALL}}} (Monday)

{{WKABR}}} (Mon)

{{WKNUM}}} (2)

{{WKNUM2}} (02)

Month

{{MNALL}}} (April)

{{MNABR}}} (Apr)

{{MNNUM}}} (4)

{{MNNUM2}} (04)

Day

{{DYNUM}}} (7)

{{DYNUM2}} (07)

Year

{{YRNUM}}} (2026)

{{YRNUM2}} (26)

Hour

{{HNUM}}} (3)

{{HNUM2}} (03)

Minute

{{MNUM}}} (4)

{{MNUM2}} (04)

Second

{{SNUM}}} (5)

{{SNUM2}} (05)

Ante/Post Meridiem

{{AMPM}} (PM)

{{ampm}} (pm)

Use keywords from the above lists to format how you want the date/time to be published. Include any punctuation or other characters the format needs.

Here is the format used in the example near the beginning of the article.
```
{{WKALL}}, {{MNALL}} {{DYNUM}}, {{YRNUM}} at {{HNUM}}:{{MNUM2}}:{{SNUM2}} {{ampm}}
```
Note: If {{AMPM}} or {{ampm}} is found in the format you give to the function, the function assumes a 12−hour clock. Otherwise, the function assumes a 24−hour clock.

Here is an illustration of the function being called.

<div id="date-goes-here"></div>
<script type="text/javascript">
PublishCurrentDateTime("date-goes-here","{{WKALL}}, {{MNALL}} {{DYNUM}}, {{YRNUM}} at {{HNUM}}:{{MNUM2}}:{{SNUM2}} {{ampm}}");
</script>

If you're interested in an overview of what the function does:

The PublishCurrentDateTime() function first determines 20 aspects of the current date and time. As an example, there are 4 aspects for the day of the week: the weekday spelled out, the weekday abbreviated, the weekday number, and the 2-digit weekday number (with a leading 0).

Then, the function inserts those aspects as appropriate according to your formatting instructions. The function's final act is to insert the formatted date and time into the HTML element that you provided an id value for.

If you wish to publish non-English dates, you are welcome to replace the English spelling of the months and weekdays with the spelling of your choice.

What you read in the article is a description of how to use JavaScript to publish the current date and time in your own custom format. The browser's own time is the base. Put the function on the page.

Make a div or span to hold the formatted date/time. Call the function with the id of the div and the format to use.

When you've done it once or twice, it should feel simple.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

JavaScript-Formatted Date and Time

Support This Website

More "Web Content Preparation" Articles

Other Recent Articles from the Library