Display date time with any format on HTML input – Use MOMENTJS Library

March 3, 2022

Hello everyone, welcome to Learn Tech Tips blog

While development website. Many people ask me how to format type=date on HTML input with any format on date time. Actually we have many way to format it. One of that. I will share with you all my way. Because of I am familar and loke using MOMENTJS so i will decide use MOMEMNTJS demo for format date time type

Of Course you should include MOMENTJS library first before use it on your project, don’t worry it free to use

On this topic i will share with you how to display date time with any format on MomentJS library. If you haven’t use above library you can check back my previous blog for MomentJS here

Here is the HTML Code

I descripte it for you: input date, we have date in input elment, this is default date from HTML element.

<div class=“form-group”>
     <label class=“w-20” for=“”><?=__(‘entry-date’)?></label>
     <input type=“date” class=“form-control w-35” name=“entry_date_from”  />
     <span style=“margin: 0 7px“>至</span>
     <input type=“date” class=“form-control w-35” name=“entry_date_to“>
 </div>

And below code is use MOMENTJS combine with javascript set current date time format

You can Format date time with any way using MomemtJS library

 $(“input[type=date]”).on(“change”, function() {
        if (this.value.length !== 0) {
            this.setAttribute(“data-date”, moment(this.value).format(“YYYY/MM/DD”));
        }
 }).trigger(“change”); // onload call immediately