element-ui el-date-picker 时间日期组件设置时间日期范围.2

要求 选择时间,不能跨月
下面时封装的js
插件 "moment": "2.24.0"
HTML调用
js
import moment from 'moment'; // 引入插件

let currentDate = ''; // 当前选中的日期

let disabledDate = time => { // 
    //禁用日期
    let d = new Date(currentDate); // 获取当前选择时间
    let year = d.getFullYear(); // 获取当前 - 年
    let month = d.getMonth() + 1; // 获取当前 - 月
    let day = new Date(year, month, 0).getDate(); // 获取本月天数(获取下一个月的0日即前一月的最后一日)
    month = month > 9 ? month : '0' + month; // 优化月格式
    day = day > 9 ? day : '0' + day; // 优化日格式
    let startDay = `${year}-${month}-01 00:00:00`; // 当月第一天
    let endDay = `${year}-${month}-${day} 23:59:59`; // 当月最后一天
    let startTime = new Date(startDay).getTime(); // 第一天时间戳
    let endTime = new Date(endDay).getTime(); // 最后一天时间戳
    let cutTime = new Date(moment().format('YYYY-MM-DD 23:59:59')).getTime(); // 当前时间戳 
    if (currentDate !== '') { // 是否选择日期,选择日期,禁用掉不符合要求的时间
        return (
            time.getTime() < startTime ||
            time.getTime() > endTime ||
            time.getTime() > cutTime
        );
    }
    return time.getTime() > cutTime; // 否则禁用大于当前时间的时间
};

let onPick = ({ minDate, maxDate }) => { // 选择时间事件
    currentDate = minDate.getTime();
    if (maxDate) {
        currentDate = '';
    }
};

let pickerOption = {
    disabledDate,
    onPick,
};

export default pickerOption;

你可能感兴趣的:(element-ui el-date-picker 时间日期组件设置时间日期范围.2)