reactH5-日期前后天切换

最新推荐文章于 2024-01-03 14:22:47 发布

陌夏线

最新推荐文章于 2024-01-03 14:22:47 发布

阅读量569

点赞数

分类专栏： # 法海前端笔记文章标签： reactjs

本文链接：https://blog.csdn.net/dyyzht/article/details/123731003

版权

法海前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.引入moment包：

yarn add moment --save

2.页面代码截取

import moment from 'moment';

constructor(props) {
    super(props)
       this.state = {
            day: moment().format('YYYY-MM-DD'),
            showDay: moment().format('MM-DD'),
        }
    }



// 日期切换,前后天
    changeDay = (val) => {
        let d = new Date(this.state.day)//当前展示日期
        let s, showDay//s：年月日 showDay：月日
        let oneDayTime = 24 * 60 * 60 * 1000//一天的time        
        if (val == 1) {
            //后一天
            s = moment(d.getTime() + oneDayTime).format('YYYY-MM-DD');
            showDay = moment(d.getTime() + oneDayTime).format('MM-DD');
        } else {
            // 前一天
            s = moment(d.getTime() - oneDayTime).format('YYYY-MM-DD');
            showDay = moment(d.getTime() - oneDayTime).format('MM-DD');
        }
        this.setState({
            day: s,
            showDay: showDay
        }, () => {
            console.log('当前日期：', this.state.day)
        })
    }

效果图：