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

Hello everyone, welcome to Webzone 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"></label>
     <input class="form-control w-35" name="entry_date_from" type="date" />
     <span style="margin: 0px 7px;">至</span>
     <input class="form-control w-35" name="entry_date_to" type="date" />
 </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 
 
  

For Format YYYY/MM/DD will show below UI like that 2022/03/23

Or if you want to format another type, you can add more format on momeny(this.value).format('') to change it.

After check my post, do you think is it easy to change format date time on HTML by MomentJS

Give me one like, share on Facebook if you love it, Many thanks

Explore My Other Channel for More Cool and Valuable Insights

👉 Youtube Learn Tech Tips

👉 Tiktok

👉 Facebook:

Any feedback or question for how to display date time with any format on HTML input leave your comment we can discuss about it!!!

 

Another date time topic over here:

PHP working with date time: 

https://learn-tech-tips.blogspot.com/2022/02/php-working-with-date-and-time.html

Javascript working with date time: 

https://learn-tech-tips.blogspot.com/2022/02/javascript-working-with-dates-and-times-moment.html

Webzone Tech Tips - Zidane