将创建日期拆分为两个字符串。

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?

- Khairul Habib

Answer 1

你可以用空格字符将日期分隔，这将使你在索引0中得到日期，在索引1中得到时间：

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

- Mamun

Answer 2

使用moment进行日期格式化

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>

- Mohammad Ali Rony

Answer 3

你可以使用Javascript的split函数。以空格为分隔符。

语法： string.split(separator, limit) 阅读更多：https://www.w3schools.com/jsref/jsref_split.asp

let creationDate="30/10/2018 16:10";
creationDate=creationDate.split(' ');
const docum=document.getElementById("date");
docum.innerHTML='<p>'+creationDate[0]+'</p>'+'<p>'+creationDate[1]+'</p>';

<div id="date"></div>

- Ameer Muhammed