h5+jquery:使用PickerExtend移动端级联选择器写一个从当前时间到指定时间范围的年月日选择器

picker-extend 移动端级联选择插件文档地址:picker-extend 移动端级联选择插件 - 掘金

设置选择器id为day-selector

需求:打开默认显示当前日期，不超过能选择超过当前日期

// reverse:false=>向下取范围内所有整数 true=>向上取
//例:selectNum(2,5)=[2,3,4,5];selectNum(2,5,false)=[5,4,3,2]

function selectNum(lowNum, upNum, reverse = true) {
    const NumList = [];
    for (let i = upNum; i >= lowNum; i -= 1) {
        NumList.push(i);
    }
    if (reverse) {
        return NumList.reverse();
    }

    return NumList;
}


//根据选择的年月更新日期轮子

function getDay(years, month, picker, indexArr = []) {

    //获取该月份的天数
    let dayList = selectNum(1, new Date(years, month, 0).getDate());

    //如果是当年当月则获取目前天数
    if (years === Y && month === M) {
        dayList = selectNum(1, D);
    }

    const dayItem = dayList.map((day) => ({
        id: day, value: `${day}日`
    }));
    picker.updateWheel(2, dayItem);

    // 处理切换月份时显示空白的bug
    if (indexArr && indexArr[2] > dayItem.length - 1) {
        picker.locatePosition(2, 0);
    }
}





const yearList = selectNum(1985, Y, false);//1985-到现在的所有年份

//这部分是我自己用于初始化位置的代码 dayData获取出来是20220101这种格式
const dayData = $('#day-selector').data('day').toString();

const [initYear, initMonth, initDay] = [parseInt(dayData.substring(0, 4)),
                                        parseInt(dayData.substring(4, 6)),
                                        parseInt(dayData.substring(dayData.length - 2)];

// this=>今年的最大月份 all=>往年的所有月份
const monthList = {this: selectNum(1, M), all: selectNum(1, 12)};

//生成选择器实例
const dayPicker = new PickerExtend({
            trigger:
                '#day-selector',
            title: '选择日期',
            wheels: [
                {
                    data: yearList.map((year) => ({
                        id: year,
                        value: `${year}年`
                    }))
                },
                {
                    data: monthList[initYear === Y ? 'this' : 'all'].map((month) => ({
                        id: month,
                        value: `${month}月`
                    }))
                },
                {
                    data: selectNum(1, 31).map((day) => ({
                        id: day, value: `${day}日`
                    }))
                }

            ],
            // 初始化定位
            position: [yearList.indexOf(initYear), initMonth - 1, initDay - 1], 

            //转动轮子时的回调
            transitionEnd(indexArr, data) {
                let monthData = data[1].id;
                // 更新月份(当前年的月份不一样)
                dayPicker.updateWheel(1, monthList[data[0].id === Y 
                ? 'this' : 'all'].map((month) => ({
                    id: month,
                    value: `${month}月`
                })));

                // 切换到今年且月份大于当前月时将轮子转到一月份
                if (data[0].id === Y && monthList.this.indexOf(monthData === -1)) {
                    monthData = 1;
                    dayPicker.locatePosition(1, 0);
                }

                //更新日期
                getDay(data[0].id, monthData, dayPicker, indexArr);
            },

            //打开选择器时的回调
            onShow() {
                getDay(initYear, initMonth, dayPicker);
            },

            //点击确认时的回调 根据自己的需求去做 内容仅供参考
            callback(indexArr, data) {
                const [year, month, day] = [data[0].id, data[1].id < 10 ? 
                `0${data[1].id}` : data[1].id, data[2].id < 10 ? `0${data[2].id}` : 
                data[2].id];
                const date = `${year}${month}${day}`;
                const isToday = {
                    year: Y === data[0].id,
                    today: M === data[1].id && D === data[2].id,
                    yesterday: M === data[1].id && D - 1 === data[2].id
                };
                // 内容处理
                if (isToday.year) {
                    $body.find('#day-selector').text(`${month}-${day}${isToday.today ? ' 
             今天' : ''}${isToday.yesterday ? ' 昨天' : ''}`);
                } else {
                    $body.find('#day-selector').text(`${year}-${month}-${day}`);
                }
                getMonthGameCount(year, month, league)
                    .then((res) => {
                        const {data: DATA} = res;
                        if (parseInt(DATA[data[2].id], 10) === 0) {
                            $body.find(`#${list}`).text(innitText);
                            $.showToast({
                                title: '该日期没有比赛数据哦'
                            });
                        } else {
                            const {sort} = $(`#${list}`).data();
                            // cba或nba
                            const aliasUrl = url.indexOf('cba') === -1 ? '' : '/cba';

                            window.location.href = 
                            `${home}/standings${aliasUrl}/day/${sort}/${date}`;
                        }
                    });
            }
        });

 最终效果