jsLocalTime

Simple Real-Time Clocks for Your Website

Download Get Started

Download

Install
<script src="moment.js"></script>
<script src="jsLocalTime.js"></script>
<script> const jsLocalTime = new JsLocalTime();
jsLocalTime.init({
localTimeFormat:"MMMM Do, YYYY h:mm a", /* Page display fomat */
relativeDate: false, /* Use relative date for all */
utcTimeClass:"jsLocalTime-UTC", /* Your custom aria label */
localTimeClass:"jsLocalTime", /* Your custom class attribute */
}); </script>

Get Started

jsLocalTime converts UTC and ISO timestamps to local machine time with your custom format. To get started, create a 'span' tag with the following attributes:

  • class="jsLocalTime-UTC" (or set custom class on init())
  • aria-label="YOUR_DATE_FORMAT" (i.e. MMMM Do, YYYY)
  • aria-details="YOUR_UTC_TIMESTAMP" (UTC or ISO string)
<span class="jsLocalTime-UTC" aria-label="MMMM Do, YYYY" aria-details="2023-09-08 23:30">No Script (Optional)</span>

No Script (Optional)

No need to correct for timezones on the backend. UTC and ISO formats will be displayed in local machine time. Very little programming knowledge required.

Display Local Time Info

Simply wrap your element with the class "jsLocalTime" to insert local machine time.

Hello, today is

Hello, today is <span class="jsLocalTime" aria-label="MMMM Do, YYYY"></span>

The time is:

The time is: <span class="jsLocalTime" aria-label="hh:mm:ssa"></span>

The year is:

Copyright <span class="jsLocalTime" aria-label="YYYY"></span> Mysite.tld

Use this for your website copyright dates. No more manual updates!

Custom Format Override

Set custom date format on individual elements via aria-label


<span class="jsLocalTime-UTC" aria-label="MMMM Do, YYYY" aria-details="timeNow"></span>


<span class="jsLocalTime-UTC" aria-label="MMMM Do, YYYY hh:mm:ssa" aria-details="2023-09-08 23:30"></span>


<span class="jsLocalTime-UTC" aria-label="YYYY" aria-details="1663920000"></span>

Default UTC Time Conversion


<span class="jsLocalTime-UTC" aria-details="1663920000"></span>

<span class="jsLocalTime-UTC" aria-details="2013-02-08 09:30"></span>

Relative Date

Set individual elements via aria-label with 'relativeDate'


<span class="jsLocalTime-UTC" aria-label="relativeDate" aria-details="2026-09-23 02:37"></span>


<span class="jsLocalTime-UTC" aria-label="relativeDate" aria-details="2024-01-29 13:40"></span>


<span class="jsLocalTime-UTC" aria-label="relativeDate" aria-details="1704085200"></span>

Get Countdown

Set individual elements via aria-label with 'countDown'


<span class="jsLocalTime-UTC" aria-label="countDown" aria-details="2025-09-23 03:33"></span>


<span class="jsLocalTime-UTC" aria-label="countDown" aria-details="1663920000"></span>