MomentJS vs DayJS

by Tony Tubbs

HTML

<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script src="http://jakubroztocil.github.io/rrule/lib/rrule.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/utc.min.js"></script>
<div class="container">
<table class="table table-striped">
    <thead>
        <tr>
            <td>London</td>
            <td>Sydney</td>
            <td>Beijing</td>
            <td>Tokyo</td>
            <td>San Francisco</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="clock" id="london"></div>
                <br/>
            </td>
            <td>
                <div class="clock" id="sydney"></div>
                <br/>
            </td>
            <td>
                <div class="clock" id="beijing"></div>
                <br/>
            </td>
            <td>
                <div class="clock" id="tokyo"></div>
                <br/>
            </td>
            <td>
                <div class="clock" id="la"></div>
                <br/>
            </td>
        </tr>
    </tbody>
</table>
</div>

CSS

body {
    font-family:'liquid_crystalregular', sans-serif;
    user-select: none;
    user-drag: none;
}
.clock {
    color: #000;
    text-shadow: 0 0 3px #222;
}

JavaScript

/* var london = moment.tz("Europe/London").format('MMMM Do YYYY, h:mm:ss a');
var sydney = moment.tz("Australia/Sydney").format('MMMM Do YYYY, h:mm:ss a');
var beijing = moment.tz("China/Beijing").format('MMMM Do YYYY, h:mm:ss a');
var tokyo = moment.tz("Asia/Tokyo").format('MMMM Do YYYY, h:mm:ss a');
var la = moment.tz("America/Los_Angeles").format('MMMM Do YYYY, h:mm:ss a');

$("#london").text(london);
$("#sydney").text(sydney);
$("#beijing").text(beijing);
$("#tokyo").text(tokyo);
$("#la").text(la);

function update() {
    $('#la').html(moment().format('MMMM Do YYYY, h:mm:ss a'));
}
setInterval(update, 1000); */

dayjs.extend(dayjs_plugin_utc);
dayjs.extend(dayjs_plugin_timezone);

     
console.log("a / MomentJS")
var a = moment.tz("2021-11-07 02:00", "America/Chicago");
console.log('a', a.format() );
console.log('a:utc', a.utc().format() );
console.log('a:unix', a.unix() );

console.log("b / DayJS")
var b = dayjs.tz("2021-11-07 02:00", "America/Chicago")
console.log('b', b.format())
console.log('b:utc', b.utc().format())
console.log('b:valueOf', b.valueOf() );

// Bad code in UI
console.log(dayjs.tz("2021-11-07 02:00", "America/Chicago").tz('UTC').valueOf())

// The fix!
console.log(dayjs.tz("2021-11-07 02:00", "America/Chicago").utc().valueOf())