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

wmtdaxz3  于 2023-01-31  发布在  React
关注(0)|答案(9)|浏览(152)

我正在尝试在React Native中设置日期字符串的格式。
示例:2016年1月4日10:34:23
下面是我使用的代码。

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

我的问题是,当我在iPhone6S上模拟时,它会毫无问题地打印出Mon Jan 04 2016 10:34:23 GMT+0530 (IST)。但如果我在iPhone5S上尝试,它什么也不打印。如果你尝试使用date.getMonth()这样的方法来获取月份,它会打印"NaN"
为什么会这样?解决方案是什么?

edqdpe6u

edqdpe6u1#

ReactNative的美妙之处在于它支持大量的JS库,如Moment.js。使用Moment.js处理日期/时间是一种更好/更简单的方法,而不是从头开始编码
只需在终端中运行此命令(如果使用React的内置包管理器,yarn add moment也可以工作):

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/

w51jfk4q

w51jfk4q2#

使用软件包即可轻松完成。

其他人也提到了Moment。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使用yd。上述格式字符串已针对v2进行了更新;v1的等效值为"MMMM Do, YYYY H:mma"(来源:https://blog.date-fns.org/post/unicode-tokens-in-date-fns-v2-sreatyki91jg/)。谢谢@Red

nxagd54h

nxagd54h3#

不需要包含庞大的库(如Moment.js)来解决这样一个简单的问题。
您所面临的问题不是格式化,而是解析。
正如John Shammas在另一个答案中提到的,Date构造函数(和Date.parse)对输入很挑剔,您的2016-01-04 10:34:23可能在一个JavaScript实现中工作,但不一定在另一个中工作。
根据ECMAScript 5.1的规范,Date.parse支持(简化的)ISO 8601。这是个好消息,因为您的日期已经非常像ISO 8601了。
你所要做的就是稍微改变一下输入格式,把空格换成T2016-01-04T10:34:23;并可选择添加时区(2016-01-04T10:34:23+01:00),否则假定为UTC。

ccgok5k5

ccgok5k54#

编写下面的函数来获取字符串格式的日期,转换并返回字符串格式.

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();
}

**在您需要的地方打印:**日期:{此.getParsedDate(字符串日期)}

rfbsl7qr

rfbsl7qr5#

momentjs的轻量级替代方案是dayjs
您可以使用yarnnpm进行安装

yarn add dayjs
# or
npm install --save dayjs
import dayjs from "dayjs";

dayjs("2016-01-04 10:34:23").format("d MMM");
// 4 Jan
qv7cva1a

qv7cva1a6#

Date构造函数对它所允许的内容非常挑剔。传入的字符串必须得到Date.parse()的支持,如果不支持,它将返回NaN。不同版本的JavaScript支持不同的格式,如果这些格式与ISO官方文档不同的话。
请参阅此处的示例了解支持的内容:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

8ftvxx2r

8ftvxx2r7#

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实现之间,其中“2015-10-12 12:00:00”等字符串可能被解析为NaN、UTC或本地时区。
...如资源中所述:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

7fyelxc5

7fyelxc58#

这是我的解决办法。

/**
 * 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,
  )
}
qzlgjiam

qzlgjiam9#

我也有同样的问题。我处理了以下几个问题:

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

我的超级填充文本输入

相关问题