如何以正确的顺序显示日期？ （反应本机）

Question

在我的移动应用中，我分享我的YouTube频道列表。在我的YouTube视频下，日期未以正确的格式显示 （显示的格式如下：月/日/年）。

如何以法语格式（日/月/年）显示它？

const VideoListItem = ({ data, onVideoPress }) => {
  return (
    <TouchableOpacity onPress={() => onVideoPress(data)}>
      <View style={styles.container}>
        <CachedImage
          uri={data.artworkUrlHigh.url}
          style={styles.flexMax}
          imageStyle={styles.cover}
        />
        <View style={styles.textContainer}>
          <View style={styles.flexMax}>
            <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">
              {decode(data.title)}
            </Text>
           
          </View>
          <Text style={styles.textAlt}>
            Publié le{' '}
            {new Date(parseInt(data.publishedAt, 10)).toLocaleDateString('fr-FR', { timezone: 'UTC' })}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

先谢谢了。

Answer 1

哪个浏览器？

Chrome今日以法语显示11/07/2019

@Service

手机上的选项和语言环境不受广泛支持

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Browser_compatibility

---

Intl.DateTimeFormat 可能会更好

var data = {}
data.publishedAt = "1562848984568";
console.log(
  new Date(+data.publishedAt).toLocaleDateString('fr-FR', { timezone: 'UTC' })
)
// US for comparison
console.log(
  new Date(+data.publishedAt).toLocaleDateString('en-US', { timezone: 'UTC' })
)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Browser_compatibility

确定版本：

var data = {}
data.publishedAt = "1562848984568";
var date = new Intl.DateTimeFormat('fr-FR').format(+data.publishedAt)
console.log(date)

Answer 2

您尝试过moment.js吗？实现很简单

moment(data.publishedAt).format('DD/MM/YYYY')

所以在您的代码中

import moment from 'moment'

const VideoListItem = ({ data, onVideoPress }) => {
  return (
    <TouchableOpacity onPress={() => onVideoPress(data)}>
      <View style={styles.container}>
        <CachedImage
          uri={data.artworkUrlHigh.url}
          style={styles.flexMax}
          imageStyle={styles.cover}
        />
        <View style={styles.textContainer}>
          <View style={styles.flexMax}>
            <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">
              {decode(data.title)}
            </Text>

          </View>
          <Text style={styles.textAlt}>
            Publié le{' '}
            {moment(data.publishedAt).format('DD/MM/YYYY')} <-- this line
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};