react table column日期转换

最新推荐文章于 2024-03-06 17:23:20 发布

原创最新推荐文章于 2024-03-06 17:23:20 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #table

ReactJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个实用的日期转换组件，包括毫秒数到指定格式字符串的转换、获取相对时间描述和获取指定天数前后的日期。通过具体示例展示了如何在项目中引入并使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先定义一个日期转换组件,我这就随便找了一个，大体如下：

这里我引用一位大佬造好的轮子，出处：https://blog.youkuaiyun.com/weixin_39466493/article/details/79565773

class DateAPI {

/**

* 将输入的毫秒字符串or毫秒数转换成指定的字符串格式

* @param {string} msStr 毫秒字符串 or 毫秒数

* @param {string} format yyyy-MM-dd or yyyy-MM-dd hh:mm:ss

* @return {string} 转换后的字符串

*/

static format(msStr, format) {

const date = new Date(msStr / 1);

let fmt = format;

const obj = {

'M+': date.getMonth() + 1, // 月份

'd+': date.getDate(), // 日

'h+': date.getHours(), // 小时

'm+': date.getMinutes(), // 分

's+': date.getSeconds(), // 秒

'q+': Math.floor((date.getMonth() + 3) / 3), // 季度

S: date.getMilliseconds(), // 毫秒

};

if (/(y+)/.test(fmt)) {

fmt = fmt.replace(RegExp.$1, (String(date.getFullYear())).substr(4 - RegExp.$1.length));

}

const keys = Object.keys(obj);

for (let i = 0; i <= keys.length; i += 1) {

const k = keys[i];

if (new RegExp(`(${k})`).test(fmt)) {

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (obj[k]) : ((`00${obj[k]}`).substr((String(obj[k])).length)));

}

}

return fmt;

}

/**

* 获得传入的秒字符串msStr距离现在时间的字符串，格式为昨天今天明天当前年3月4日其余2000-01-01

* @param {string} msStr 毫秒字符串

* @return {string} 可以显示用的字符串

*/

static format2(msStr, showYear) {

let ms = new Date(DateAPI.format(msStr, 'yyyy/MM/dd')).getTime() / 1000;

const now = new Date(DateAPI.format(new Date().getTime(), 'yyyy/MM/dd')).getTime() / 1000;

ms = now - ms;

const min = 60;

const hour = 60 * min;

const day = 24 * hour;

if (ms === 0) {

return '今天';

}

if (ms === day) {

return '昨天';

}

if (ms === -day) {

return '明天';

}

const date = new Date((msStr / 1));

const nowYear = new Date().getFullYear();

const year = date.getFullYear();

const month = date.getMonth() + 1;

if (showYear === false && year === nowYear) {

return `${month}月${date.getDate()}日`;

}

return `${date.getFullYear()}年${month}月${date.getDate()}日`;

}

/**

*获取当前天数之前或者之后的日期

*@num 之前或者之后多少天数 - 表示之前

*/

static getDate(num, format) {

const today = new Date();

const targetday = today.getTime() + (1000 * 60 * 60 * 24 * num);

const target = new Date();

target.setTime(targetday);

if (format) {

return this.format(target.getTime(), format);

}

return target;

}

}

export default DateAPI;

接下来重点来了，如何使用,如下：

1.在我们的模块里面引入组件

import DateAPI from './DateAPI'

class User extends Component {

2.在我们这个组件里面需要转换的列的位置，使用我们的组件：

{ title: '部门', width:160 ,dataIndex: 'address', key: '4' },

{ title: 'create-time',width:160, dataIndex: 'createTime', key: '5' , render:(value,Object)=>{

return DateAPI.format(value,'yyyy-MM-dd hh:mm:ss');

} },

我解释一下，这里的 value 即当前行当前列的值，Object 即为当前行对象，知道这点之后，我想大家就可以举一反三，进行其他想干的坏事了吧！手动滑稽