js原生完成日历选择器

html:

<div class="ivu-date-picker">
                                                <div class="ivu-date-picker-rel">
                                                    <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-date-picker-editor">
                                                        <span class="ivu-input-suffix">
                                                            <i id="input_icon" class="ivu-icon ivu-icon-ios-close-circle"></i>
                                                            <!-- <i class="ivu-icon ivu-icon-ios-close-circle"></i> -->
                                                        </span>
                                                        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请选择日期" class="ivu-input ivu-input-default ivu-input-with-suffix">

                                                    </div>
                                                </div>
                                                <div class="ivu-select-dropdown" style="">
                                                    <div>
                                                        <div class="ivu-picker-panel-body-wrapper" steps="">
                                                            <div class="ivu-picker-panel-body">
                                                                <div class="ivu-date-picker-header">
                                                                    <span id="year_prev" class="ivu-picker-panel-icon-btn ivu-date-picker-prev-btn ivu-date-picker-prev-btn-arrow-double"><i class="ivu-icon ivu-icon-ios-arrow-back"></i>
                                                                    </span>
                                                                    <span id="month_prev" class="ivu-picker-panel-icon-btn  ivu-date-picker-prev-btn ivu-date-picker-prev-btn-arrow"><i class="ivu-icon ivu-icon-ios-arrow-back"></i></span>
                                                                    <span>
                                                                        <span class="ivu-date-picker-header-label" id="date_year">2024年</span>
                                                                        <span class="ivu-date-picker-header-label" id="date_month">01月</span></span>
                                                                    <span id="year_next" class="ivu-picker-panel-icon-btn  ivu-date-picker-next-btn ivu-date-picker-next-btn-arrow-double"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                                                                    </span>
                                                                    <span id="month_next" class="ivu-picker-panel-icon-btn ivu-date-picker-next-btn ivu-date-picker-next-btn-arrow"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                                                                    </span>
                                                                </div>
                                                                <div class="ivu-picker-panel-content">
                                                                    <div class="ivu-date-picker-cells">
                                                                        <div class="ivu-date-picker-cells-header">
                                                                            <span>
                                                                                日
                                                                            </span><span>
                                                                                一
                                                                            </span><span>
                                                                                二
                                                                            </span><span>
                                                                                三
                                                                            </span><span>
                                                                                四
                                                                            </span><span>
                                                                                五
                                                                            </span><span>
                                                                                六
                                                                            </span>
                                                                        </div>
                                                                        <div id="Calendar_body" class="date_picket_body"><span class="ivu-date-picker-cells-cell"><em> 01 </em></span> <span class="ivu-date-picker-cells-cell"><em> 02 </em></span> <span class="ivu-date-picker-cells-cell"><em> 03 </em></span> <span class="ivu-date-picker-cells-cell"><em> 04 </em></span> <span class="ivu-date-picker-cells-cell"><em> 05 </em></span> <span class="ivu-date-picker-cells-cell"><em> 06 </em></span> <span class="ivu-date-picker-cells-cell"><em> 07 </em></span> <span class="ivu-date-picker-cells-cell"><em> 08 </em></span> <span class="ivu-date-picker-cells-cell"><em> 09 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-today ivu-date-picker-cells-focused"><em> 10 </em></span> <span class="ivu-date-picker-cells-cell"><em> 11 </em></span> <span class="ivu-date-picker-cells-cell"><em> 12 </em></span> <span class="ivu-date-picker-cells-cell"><em> 13 </em></span> <span class="ivu-date-picker-cells-cell"><em> 14 </em></span> <span class="ivu-date-picker-cells-cell"><em> 15 </em></span> <span class="ivu-date-picker-cells-cell"><em> 16 </em></span> <span class="ivu-date-picker-cells-cell"><em> 17 </em></span> <span class="ivu-date-picker-cells-cell"><em> 18 </em></span> <span class="ivu-date-picker-cells-cell"><em> 19 </em></span> <span class="ivu-date-picker-cells-cell"><em> 20 </em></span> <span class="ivu-date-picker-cells-cell"><em> 21 </em></span> <span class="ivu-date-picker-cells-cell"><em> 22 </em></span> <span class="ivu-date-picker-cells-cell"><em> 23 </em></span> <span class="ivu-date-picker-cells-cell"><em> 24 </em></span> <span class="ivu-date-picker-cells-cell"><em> 25 </em></span> <span class="ivu-date-picker-cells-cell"><em> 26 </em></span> <span class="ivu-date-picker-cells-cell"><em> 27 </em></span> <span class="ivu-date-picker-cells-cell"><em> 28 </em></span> <span class="ivu-date-picker-cells-cell"><em> 29 </em></span> <span class="ivu-date-picker-cells-cell"><em> 30 </em></span> <span class="ivu-date-picker-cells-cell"><em> 31 </em></span> <span class="ivu-date-picker-cells-cell"><em> 01 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 02 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 03 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 04 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 05 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 06 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 07 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 08 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 09 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 10 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 11 </em></span> </div>
                                                                    </div>

                                                                </div>
                                                                <div class="ivu-picker-panel-content" style="display: none;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

js:

var $timestampToTime = (timestamp, mm) => {
    var weeks = ["日", "一", "二", "三", "四", "五", "六"],
        time = timestamp.toString().length == 10 ? timestamp * 1000 : timestamp, //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        date = new Date(time),
        Y = date.getFullYear(),
        M =
        date.getMonth() + 1 < 10 ?
        "0" + (date.getMonth() + 1) :
        date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
        W = date.getDay(),
        H = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
        I = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
        S = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

    return {
        Y,
        M,
        D,
        H,
        I,
        W: weeks[W],
        H_I: H + ":" + I,
        Y_M_D: Y + "-" + M + "-" + D,
        Y_M_D_H_I: Y + "-" + M + "-" + D + " " + H + ":" + I,
        Y_M_D_H_I_S: Y + "-" + M + "-" + D + " " + H + ":" + I + ":" + S,
        sort: mm
    };
}
class DatePicker {

    constructor({
        datePicker,
        input,
        panel
    }) {
        this.currentDate = $timestampToTime(Date.now());
        this.m_arr = this.getMArr(this.currentDate.Y_M_D)
        this.init(this.currentDate.Y_M_D)

        this.bindingThing({
            datePicker,
            panel,
            input
        }) //绑定事件
    }
    //点击当前某天
    changeDay(d) {
        if (d.Y_M_D == this.selectDate.Y_M_D) {
            this.selectDate = {};
            this.parentChangeDay(null)
        } else {
            this.selectDate = this.selectDate;
            this.parentChangeDay(JSON.parse(JSON.stringify(d)))

        }
        this.isCurrentW()
    }

    //上月下月
    changeMonth(Y_M_D, n) {

        this.m_arr = this.getMArr(Y_M_D, n)
        this.init(Y_M_D)
    }
    //获取月份 7*6表格
    getMArr(YYYYMMDD, n = 0) {

        let date = this.countLastMonth(YYYYMMDD.slice(0, 7), n);
        this.days_num = this.getCountDays(date)

        var firstDay_date = new Date(date)
        var firstDayWeekDay = firstDay_date.getDay()
        if (firstDayWeekDay === 0) { //周日
            firstDayWeekDay = 7;
        }
        var prevDays = firstDayWeekDay - 1
        firstDay_date.setDate(firstDay_date.getDate() + 1 - firstDayWeekDay);
        firstDay_date = firstDay_date.toISOString().split('T')[0];
        let start_month_time = Date.parse(firstDay_date);
        var sum_num = 6 * 7;

        // var nums = this.getCountDays(date);

        // let start_month_time = Date.parse(date);
        let arr = [];
        let date_time = 24 * 60 * 60 * 1000;

        //根据当前月的1号的周往前推周一
        for (let i = 0; i < sum_num; i++) {
            var sort = i - prevDays;
            arr.push($timestampToTime(start_month_time + date_time * i, sort));
        }
        return arr;
    }
    // 计算每个月 有几天
    getCountDays(date) {
        let curDate = new Date(date);
        curDate.setDate(32);
        return 32 - curDate.getDate(); // 返回当前月份的天数
    }
    checkMonth(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    //计算上个月的日期
    // month表示当前月份， n表示要向前推移的月份数。
    countLastMonth(month, n) {
        if (n == 0) {
            var changeM = month.slice(5, 7)
            $("#date_month").html(changeM + '月')
            return month + "-" + "01";
        } else {
            let ns = (n = -n);
            let beforeMonth = new Date(month);
            let lastDate = beforeMonth.setMonth(beforeMonth.getMonth() - ns); // 输出日期格式为毫秒形式1551398400000
            lastDate = new Date(lastDate);
            let lastYear = lastDate.getFullYear();
            let lastMonth = this.checkMonth(lastDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
            $("#date_month").html(lastMonth + '月')
            lastDate = lastYear + "-" + lastMonth + "-" + "01";
            return lastDate;
        }
    }
    //初始化日期
    init(Y_M_D) {
        var arr = this.m_arr
        var year = Y_M_D.slice(0, 4)

        $("#date_year").html(year + '年')

        var {
            currentDate
        } = this
        var html = ''
        arr.map(item => {
            var lableClass = ''
            if (item.sort < 0) {
                lableClass = ' ivu-date-picker-cells-cell-prev-month'

            } else if (item.sort > this.days_num) {
                lableClass = ' ivu-date-picker-cells-cell-next-month'
            } else if (item.Y_M_D == currentDate.Y_M_D) {
                lableClass = ' ivu-date-picker-cells-cell-today ivu-date-picker-cells-focused'
            }

            html += '<span class= "ivu-date-picker-cells-cell' + lableClass + '"><em> ' + item.D + ' </em></span > '
        })

        $("#Calendar_body").html(html)
    }



    bindingThing({
        datePicker,
        panel,
        input
    }) {
        function padZero(number) {
            return number.toString().padStart(2, '0');
        }
        // 隐藏日期选择面板
        panel.hide();

        // 点击日期输入框时显示日期选择面板
        input.on('click', function () {
            panel.show();
        });
        //聚焦
        input.focus(function () {
            $("#input_icon").addClass("ivu-icon-ios-calendar-outline").removeClass("ivu-icon-ios-close-circle")

        });
        input.blur(function () {
            $("#input_icon").removeClass("ivu-icon-ios-calendar-outline").addClass("ivu-icon-ios-close-circle")

        });


        // 点击日期选择面板之外的区域时隐藏日期选择面板
        $(document).on('click', function (event) {

            if (!$(event.target).closest(datePicker).length) {
                panel.hide();
            }
        });

        panel.on('click', '.ivu-date-picker-cells-cell', function () {
            var year = panel.find('#date_year').text().split("年")[0];
            var month = panel.find('#date_month').text().split("月")[0];
            var day = $(this).text().replace(/\s/g, "");
            var selclass = "ivu-date-picker-cells-cell-selected ivu-date-picker-cells-focused"
            $(this).addClass(selclass).siblings().removeClass(selclass)
            // 格式化日期
            var date = year + '-' + month + '-' + day;
            input.val(date);
            panel.hide();
        });

        // 点击上一个月按钮
        panel.on('click', '#month_prev', () => {
            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            this.changeMonth(Y_M_D, -1)
        });

        // 点击下一个月按钮
        panel.on('click', '#month_next', () => {
            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            this.changeMonth(Y_M_D, 1)

        });

        //上一年 
        panel.on('click', '#year_prev', () => {

            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            year = year - 1;
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            this.changeMonth(Y_M_D, 0)


        });
        //下一年 
        panel.on('click', '#year_next', () => {
            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            year = year + 1;
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            console.log(Y_M_D, "下一年");
            this.changeMonth(Y_M_D, 0)




        });

        datePicker.on('click', '.ivu-icon.ivu-icon-ios-close-circle', () => {

            input.val("")
            // 隐藏日期选择面板
            panel.hide();
            this.m_arr = this.getMArr(this.currentDate.Y_M_D)
            this.init(this.currentDate.Y_M_D)
        })
    }
}
$(document).ready(function () {
    //日期选择器处理
    // 获取日期选择器元素
    var datePicker = $('.ivu-date-picker');

    // 获取日期输入框元素
    var input = datePicker.find('input');

    // 获取日期选择面板元素
    var panel = datePicker.find('.ivu-select-dropdown');



    var datePickerObj = new DatePicker({
        datePicker,
        panel,
        input
    })
}

结果：