Add space between date and time with moment.js Add space between date and time with moment.js vue.js vue.js

Add space between date and time with moment.js


have the same requirement, the solution is to use \xa0

moment(date).format('YYYY-MMM-DD\xa0\xa0\xa0HH:mm');


It's not a problem of moment or vue, momentjs will add your white spaces as you add them (you can easily check by debugging your var or with console log) but your browser by default will collapse multiple spaces into only single space. Have a look at white-space CSS property to learn more.

Also, you should not handle how the date will be displayed in your JS, it should be handled in your CSS. So my advice in your case is to separate date and time into 2 variables in your JS code and adapt your HTML template and CSS to display them properly.

Usually adding multiple spaces in your HTML code (and even more in your JS code) is not a good approach, you should instead achieve that with CSS.


Try using a template literal when assigning:

let d = moment.utc(row.DateTime)row.DateTime = `${d.format('MM-DD-YYYY')}  ${d.format('hh:mm:ss A')}`