1、仅展示,精确到分,时间格式:
(1)如果下次跟进时间是今天,展示:今天 15:12;
(2)如果是本周且非今天,展示:周三 15:12;
(3)如果是本周之后,展示:2021/03/10 12:12;
(4)如果当前时间已过设定的下次跟进时间,仍然按以上规则展示。
2、本周内需要跟进的数据,跟进时间高亮。
3、有值展示,无值展示–
需要的支持:
npm install fecha --save
1/组件jsx:
import fecha from 'fecha';
import styles from './show-date.less';
function ShowDate(props) {
let { date, compareDate } = props;
if (date && compareDate) {
let todayTime = new Date(date.toDateString()).getTime(); //获取今天0点时间毫秒数
let dayTime = 24 * 60 * 60 * 1000; // 定义一天毫秒数
const today = ['日', '一', '二', '三', '四', '五', '六'];
if (typeof compareDate == 'string') {
compareDate = compareDate.replace(/-/g, '/');
compareDate = new Date(compareDate).getTime();
}
let diffDay = (compareDate - todayTime) / dayTime; // 相差天数
let day = date.getDay(); // 今天星期数
let compareDay = new Date(compareDate).getDay(); // 任务星期数
if (diffDay > 6 || diffDay < -6) {
// 7天之外
return fecha.format(new Date(compareDate), 'YYYY/MM/DD HH:mm');
} else if (diffDay <= 6 || diffDay >= -6) {
switch (day) {
case 0:
if (diffDay <= 1 && diffDay >= 0) {
// 今天
return (
<span className={styles['emergency-time']}>
{fecha.format(new Date(compareDate), '今天' + ' HH:mm')}
</span>
);
} else {
if (day + diffDay < -6 || day + diffDay > 0) {
//下周
return fecha.format(new Date(compareDate), 'YYYY/MM/DD HH:mm');
} else {
return (
<span className={styles['emergency-time']}>
{fecha.format(
new Date(compareDate),
'周' + today[compareDay] + ' HH:mm',
)}
</span>
);
}
}
default:
if (day + diffDay > 8 || day + diffDay <= 1) {
//下周
return (
<span>
{fecha.format(new Date(compareDate), 'YYYY/MM/DD HH:mm')}
</span>
);
} else {
//本周
if (diffDay <= 1 && diffDay >= 0) {
// 今天
return (
<span className={styles['emergency-time']}>
{fecha.format(new Date(compareDate), '今天' + ' HH:mm')}
</span>
);
} else {
return (
<span className={styles['emergency-time']}>
{fecha.format(
new Date(compareDate),
'周' + today[compareDay] + ' HH:mm',
)}
</span>
);
}
}
}
}
} else {
return <span>--</span>;
}
}
export default ShowDate;
2、使用方法
在需要的组件引入
import ShowDate from '@/components/show-components/show-date/show-date';
传入需要的值
date={new Date()}//当前时间
compareDate={_.get(props.customerDetailData, ‘revisit_remind_at’, ‘’)}//要传入的时间,自己接口中获取
<ShowDate
date={new Date()}
compareDate={_.get(props.customerDetailData, 'revisit_remind_at', '')}
styles={{ color: 'red' }}
></ShowDate>