Question

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

Ex：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/）。谢谢@Red

Answer 3

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

您面临的问题不是格式化，而是解析。

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

According to the specification of ECMAScript 5.1，Date.parse支持（简化）ISO 8601.这是个好消息，因为您的日期已经非常类似于ISO 8601。

您只需稍微更改输入格式即可。交换T的空格：2016-01-04T10:34:23;并可选择添加时区（2016-01-04T10:34:23+01:00），否则假设为UTC。

Answer 4

function getParsedDate(date){
  date = String(date).split(' ');
  var days = String(date[0]).split('-');
  var hours = String(date[1]).split(':');
  return [parseInt(days[0]), parseInt(days[1])-1, parseInt(days[2]), parseInt(hours[0]), parseInt(hours[1]), parseInt(hours[2])];
}
var date = new Date(...getParsedDate('2016-01-04 10:34:23'));
console.log(date);

由于解析日期字符串的差异，建议使用总是手动解析字符串，因为结果不一致，特别是跨字符串的不同ECMAScript实现喜欢＆＃34; 2015-10-12 12：00：00＆＃34;可以解析为NaN，UTC或本地时区。

...如资源中所述：

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

Answer 5

Date构造函数非常挑剔它允许的内容。您传入的字符串必须由Date.parse（）支持，如果不支持，则返回NaN。不同版本的JavaScript支持不同的格式，如果这些格式偏离官方ISO文档。

请参阅此处的示例，了解支持的内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Answer 6

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

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）}

Answer 7

我遇到了同样的问题。我处理了以下内容：

  const modifiedString = string => {
     const splitString = string.split('...');
     var newStr = '';
     for (var i = 0; i < splitString.length; i++) {
        if (splitString[i] !== '' && splitString[i] !== ' '){
        newStr = (
           <Text style={{ flexDirection: 'row', width: 200 }}>
              <Text>{newStr}</Text>
              <Text>{splitString[i]}</Text>
              <SuperFill data={res[i]} check={checkX} />
           </Text>
           );
        }
     }
   return newStr;
 };

我的 SuperFill 是一个 TextInput

Answer 8

这是我的解决方案。

/**
 * Instantiates a date Date object, used because doing the following doesn't
 * work in React-Native but does work in the browser.
 * ```
 * // Replace this with
 * var date = new Date('2020-08-11 21:23:00')
 * // with
 * var date = safeNewDate('2020-08-11 21:23:00')
 * ```
 * @param {string} localDateTimeStr
 * @returns {Date}
 */
export const safeNewDate = function(localDateTimeStr) {

  var match = localDateTimeStr.match(
    /(\d{4})-(\d{2})-(\d{2})[\sT](\d{2}):(\d{2}):(\d{2})(.(\d+))?/,
  )
  if (!match) throw new Error('Invalid format.')

  var [, year, month, date, hours, minutes, seconds, , millseconds] = match

  return new Date(
    year,
    Number(month) - 1,
    date,
    hours,
    minutes,
    seconds,
    millseconds || 0,
  )
}

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

8 个答案:

使用软件包轻松完成。

在您的情况下：

更新：v1与v2格式的差异