split creation date into two string

Question

Is it possible to split this string into two

using css or another way?

<p>30/10/2018 16:10</p>

into

<p>30/10/2018</p>
<p>16:10</p>

because i have a string data from JSON API that return value like "30/10/2018 16:10" by using this code <p>{{creationDate}}</p>

but I needed it to display like this

30/10/2018

16:10

Did anyone get any idea for how to settle this case?

Answer 1

You can split the date with space character which will give you the the date in 0 index and the time in 1 index:

<p>{{creationDate.split(' ')[0]}}</p>
<p>{{creationDate.split(' ')[1]}}</p>

Answer 2

Use moment for date format

import moment from 'moment'

Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY')
  }
}
Vue.filter('formatTime', function(value) {
  if (value) {
    return moment(String(value)).format('hh:mm')
  }
}
<P>{{yourDateString | formatDate}}</P>
<P>{{yourDateString | formatTime}}</P>