Search code examples
javascriptweb-frontenddayjs

How can I render date in the browser using Day.js?


I want to render a date into the <span class="mr-3 text-danger date"> element using Dayjs. How do I go about doing this? I have dayjs imported from a CDN in a script tag at the bottom of the html document.

<!--This is my html code-->
<div class="d-flex event">
    <span class="mr-3 text-danger date"></span>
    <span class="text-danger">24°C, Fort Portal</span>
</div>

Solution

  • <!DOCTYPE html>
    <html>
        <body>
            <!--This is my html code-->
            <div class="d-flex event">
                <span class="mr-3 text-danger date"></span><br>
                <span class="text-danger">24°C, Fort Portal</span>
            </div>
        </body>
        <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
        <script>
    
            let datesClasses = document.getElementsByClassName("date")
    
            Array.prototype.forEach.call(datesClasses, element => {
        
                element.innerHTML = dayjs().format('YYYY/MM/DD HH:mm:ss A')
    
            })
        </script>
    </html>