React antd MonthPicker 月份转月初至月末

React antd MonthPicker 月份转化为YYYY-MM-DD的第一天到最后一天

憨憨的我也不知道为什么不用RangePick组件

1、引入antd 不说了

2、使用MonthPicker

<MonthPicker
    placeholder='请选择时间'
    format={'YYYY/MM'}
    onChange={e => this.handleMonth(e)}
/>

3、数据转化

重点！

handleMonth = (e) => {
     /**
     * 利用format直接转为指定格式 比如YYYY-MM-DD、YYYY/MM/DD,
     * 最后两位我直接写成01，就转化为当月1号
     */
    let startDate = e.format('YYYY-MM-01')
    
    /**
     * 最后一天，有四种情况，有点难办，
     * 利用获取到月份转化成新的时间，MonthPicker和new Date 获取到时间格式略有不同
     */
    let endDate = new Date(e);
    /**
     * getMonth()获取当前月份，返回值是0-11，
     */
    let month = endDate.getMonth();
    /**
     * getFullYear()获取当前年份，++month就是下个月，1代表1号，nextMonthFirstDay就是下个月1号了
     */
    let nextMonthFirstDay = new Date(endDate.getFullYear(), ++month, 1);
    /**
     * 下个月1号减去1天（1000毫秒*1分钟60秒*1小时60分钟*1天24小时）
     * 生成这个月最后一天
     */
    endDate = new Date(nextMonthFirstDay - 1000 * 60 * 60 * 24)
    /**
     * 将生成的当月最后一天转化为指定格式(YYYY-MM-DD)
     */
    endDate = `${endDate.getFullYear()}
		-${endDate.getMonth() + 1 < 10 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1}
		-${endDate.getDate()}`
}