react 日期怎么格式化_react日期格式化组件

最近在项目中经常碰到日期格式化的转化，如默认时间格式转换为“2020-02-02”或“2020-02-02”转换成“2020/02/02”等等，根据需要我总结了以下几种格式：

YYYY-MM-DD、YYYY/MM/DD、MM-DD-YYYY、MM/DD/YYYY、YYYY年MM月DD日

下面是js逻辑：

import React from 'react';

import PropTypes from "prop-types";

// 导出方法一

export function dateFormat(format, date) {

// format=>日期格式 date=>要格式化的时间

let time = new Date();

if (date) {

if (typeof date === 'string') {

const dateTemp = date.substr(0,4) + ',' + date.substr(4,2) + ',' + date.substr(6);

time = new Date(dateTemp);

} else {

time = new Date(date);

}

}

let year = time.getFullYear();

let month = time.getMonth() + 1;

let day = time.getDate();

/* istanbul ignore else */

if (month < 10) {

month = '0' + month;

}

/* istanbul ignore else */

if (day < 10) {

day = '0' + day;

}

let result = '';

switch(format) {

case 'YYYY-MM-DD' : {

return year + '-' + month + '-' + day;

}

case 'YYYY/MM/DD' : {

return year + '/' + month + '/' + day;

}

case 'MM-DD-YYYY' : {

return month + '-' + day + '-' + year;

}

case 'MM/DD/YYYY' : {

return month + '/' + day + '/' + year;

}

case 'YYYY年MM月DD日' : {

return year + '年' + month + '月' + day + '日';

}

default: {

return result;

}

}

}

// 导出方法二(依赖方法一)

export function DateFormat(props) {

return(

{dateFormat(props.format, props.date)}

);

}

DateFormat.propTypes = {

format: PropTypes.oneOf(['YYYY-MM-DD', 'YYYY/MM/DD', 'MM-DD-YYYY', 'MM/DD/YYYY', 'YYYY年MM月DD日']),

date: PropTypes.oneOfType([

PropTypes.number,

PropTypes.string,

]),

};

DateFormat.defaultProps = {

format: 'YYYY-MM-DD',

};

export default DateFormat;

项目中调用方法：

import { DateFormat, dateFormat } from 'xxxx/xxxx';

{dateFormat("YYYY-MM-DD", new Date())}

根据自己的需要应用到项目中吧！