jquery-disable-with is a jQuery plugin which converts UTC time to local time easily.

jquery-utc-time example

jquery-disable-with is a jQuery plugin which converts UTC time to local time easily.

Running Example

Page render time

Two minutes before page render

Two hours before page render

Two days before page render

Source Code
<h4>Page render time</h4>
<label data-utc-time="2/1/2023 6:52:19 AM">


<h4>Two minutes before page render</h4>
<label data-utc-time="2/1/2023 6:50:19 AM">


<h4>Two hours before page render</h4>
<label data-utc-time="2/1/2023 4:52:19 AM">


<h4>Two days before page render</h4>
<label data-utc-time="1/30/2023 6:52:19 AM">



A jquery plugin which converts UTC time to local time easily.


How to install

Download from NPM

$ npm install jquery-utc-time

And add your reference:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-utc-time/dist/jquery-utc-time.min.js"></script>

Or using es6:

import UtcTime from 'jquery-utc-time';

Use via CDN

Add your reference:

<script src="https://ui.cdn.aiursoft.com/node_modules/jquery-utc-time/dist/jquery-utc-time.min.js"></script>

How to use

Create an element.



And change it like this.

<p data-utc-time="9/12/2018 10:12:24 AM"><!-- In your tag the time shall be an UTC time -->

Add init jquery-utc-time

    new UtcTime({ });

And open it now! The time will be converted to local time.


    // Init with loop
    new UtcTime({
        // We will try to select elements using the attr value. Default value is 'data-utc-time'.
        attr: 'data-utc-time',

        // We the given time is later than now, we will replace the value to its local time using the format. If format is not specified, we will just convert it to local string.
        format: 'yyyy年 MM月 dd日 hh:mm:ss',

        // Localization options. Default is ' days ago'
        daysAgo: '天前',

        // Localization options. Default is ' hours ago'
        hoursAgo: '小时前',

        // Localization options. Default is ' mintes ago'
        minutesAgo: '分钟前',

        // Localization options. Default is ' seconds ago'
        secondsAgo: '秒前',

        // Always display time and date not `some time` ago.
        disableAgo: false,

        // After the content is replaced.
        onSet: function(element) { },

        // Disable auto update the value by seconds.
        disableAutoUpdate: false

For example, to init bootstrap tooltip:

new UtcTime({
    onSet: function(element) {
View it on github