在React Native中格式化日期字符串

Question

我正在尝试在React Native中格式化日期字符串.

例:2016-01-04 10:34:23

以下是我正在使用的代码.

var date = new Date("2016-01-04 10:34:23");
console.log(date);

我的问题是,当我在iPhone 6S上模拟它时,它会打印出Mon Jan 04 2016 10:34:23 GMT+0530 (IST)而没有任何问题.但是,如果我尝试iPhone 5S,它什么都不打印.如果你试图通过使用像date.getMonth()它打印的方法获得月份"NaN".

为什么是这样？解决方法是什么？

Answer 1

React Native的美妙之处在于它支持许多JS Librarieis,如Moment.js.使用moment.js将是一种更好/更简单的方法来处理日期/时间而不是从头开始编码

只需在终端中运行:

npm install moment --save

在你的React Native js页面中:

import Moment from 'moment';

render(){
    Moment.locale('en');
    var dt = '2016-05-02T00:00:00';
    return(<View> {Moment(dt).format('d MMM')} </View>) //basically you can do all sorts of the formatting and others
}

您可以在这里查看moment.js官方文档 https://momentjs.com/docs/

Answer 2

使用包轻松完成。

其他人提到了时刻。Moment 很棒，但对于像这样的简单使用来说非常大，不幸的是它不是模块化的，因此您必须导入整个包才能使用其中的任何一个。

我建议使用 date-fns ( https://date-fns.org/ ) ( https://github.com/date-fns/date-fns )。它是轻量级和模块化的，因此您可以只导入您需要的功能。

在你的情况下：

安装它：npm install date-fns --save

在您的组件中：

import { format } from "date-fns";

var date = new Date("2016-01-04 10:34:23");

var formattedDate = format(date, "MMMM do, yyyy H:mma");

console.log(formattedDate);

"MMMM do, yyyy H:mma"用您需要的任何格式替换上面的格式字符串。

更新：v1 与 v2 格式差异

v1 用于Y年和D日，而 v2 使用y和d。上面的格式字符串已针对 v2 更新；v1 的等效项是"MMMM Do, YYYY H:mma"（来源：https : //blog.date-fns.org/post/unicode-tokens-in-date-fns-v2-sreatyki91jg/）。谢谢@红

Answer 3

没有必要包含一个庞大的库,如Moment.js来解决这个简单的问题.

您面临的问题不是格式化,而是解析.

正如John Shammas在另一个答案中提到的那样,Date构造函数(和Date.parse)对输入很挑剔.您2016-01-04 10:34:23可以在一个JavaScript实现中工作,但不一定在另一个中实现.

根据ECMAScript 5.1的规范,Date.parse支持(简化)ISO 8601.这是个好消息,因为你的日期已经非常像ISO 8601了.

您所要做的就是稍微更改输入格式.SWAP的空间T:2016-01-04T10:34:23; 并且可选地添加时区(2016-01-04T10:34:23+01:00),否则假设为UTC.

Answer 4

编写以下函数以获取字符串中的日期，转换并以字符串格式返回。

getParsedDate(strDate){
    var strSplitDate = String(strDate).split(' ');
    var date = new Date(strSplitDate[0]);
    // alert(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!

    var yyyy = date.getFullYear();
    if (dd < 10) {
        dd = '0' + dd;
    }
    if (mm < 10) {
        mm = '0' + mm;
    }
    date =  dd + "-" + mm + "-" + yyyy;
    return date.toString();
}

在您需要的地方打印它： 日期：{this.getParsedDate(stringDate)}