CODEWITHSUNDEEP
vue.jsmomentjs
Reese Westerhoff
Reese Westerhoff

Reputation: 109

Add space between date and time with moment.js

I have a datetimes coming back from my database in ISO format. They look like this: 2015-11-03T10:06:50.000Z. I am using moment.js to parse it out so that it's more readable and the result looks like this: 11-03-2015 10:06:50 AM. I simply want to add another space between the date and time so it's easier to read. Any thoughts?

I've tried adding another space between the date and time in moment and it appears that it strips out all spaces except one. I've also tried hyphens and pipes but those don't really look the way I want.

rows.forEach(row => {
    // TODO find a way to put more blank space between date and time
    let formattedDateTime = moment.utc(row.DateTime).format(`MM-DD-YYYY hh:mm:ss A`)
    row.DateTime = formattedDateTime
    // console.log('formatted datetime', formattedDateTime)
  })

Expected: adding spaces between the date and time in moment.format would reflect that way on the client.

Actual: only allowed one space between date and time. All other spaces are removed.

Upvotes: 5

Views: 5474

Answers (3)

even
even

Reputation: 315

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

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

Upvotes: 7

Matt
Matt

Reputation: 3662

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.

Upvotes: 4

Brian Lee
Brian Lee

Reputation: 18187

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')}`

Upvotes: 1

Related Questions