CODEWITHSUNDEEP
javascriptmomentjs
Joee
Joee

Reputation: 73

Momentjs how can I format output for timezone and date

I would like to display: time + date + weekday using Momentjs. Every value should be in new div in different format (I would set different height for every value) How can I format it to get something like this:

(time) in div1

(date) in div2

(weekday) in div3

function showLocalTime(container, zoneString, formatString) {
    var thisobj = this
    this.container = document.getElementById(container)
    this.localtime = moment.tz(new Date(), zoneString)
    this.formatString = formatString
    this.container.innerHTML = this.localtime.format(this.formatString)
    setInterval(function() {
        thisobj.updateContainer()
    }, 1000)
    showLocalTime.prototype.updateContainer = function() {
        this.localtime.second(this.localtime.seconds() + 1)
        this.container.innerHTML = this.localtime.format(this.formatString)
    }
}

­

<div class="time"><b>Toronto:</b> <span id="toronto"></span></div>
<script type="text/javascript">
    new showLocalTime("toronto", "America/Toronto", "hh:mm:ss A , MMMM Do YYYY, dddd")
</script>

This code works, but I get all results in one line. I can add <br> but this does not solve my problem with formatting.

Upvotes: 1

Views: 77

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26370

Simply by formatting the localTime three times :

let now = moment()

div1.innerHTML = now.format( "hh:mm:ss A")
div2.innerHTML = now.format( "MMMM Do YYYY")
div3.innerHTML = now.format( "dddd")
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>


<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Upvotes: 1

Related Questions