原生html+jq 日历选择

*html  css  js   需自己按html结构引用   本版本需要在引用下面的js之前  先引用jq.min.js,  jq所需js文件可自行前往jq官网下载引用到本地

1.html

<div class="calendar-container">
  <div class="calendar-header">
    <img
      class="pre-btn"
      id="prevMonth"
      src="/statics/snzsb_m/img/Slice 373@2x.png"
      alt=""
    />
    <h2 id="monthYearTitle">2023年1月</h2>
    <img
      class="next-btn"
      id="nextMonth"
      src="/statics/snzsb_m/img/Slice 373@2x(1).png"
      alt=""
    />
  </div>
  <div class="calendar-weekdays">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
  </div>
  <div class="calendar-days" id="calendarDays">
    <!-- 日历天数将通过jQuery动态生成 -->
  </div>
  <div class="appointment-info">您的预约： 3月23日 星期三</div>
</div>

2.js（jq）

$(document).ready(function () {
    // 当前显示的日期
    let currentDate = new Date();
    let currentYear = currentDate.getFullYear();
    let currentMonth = currentDate.getMonth();
    let today = currentDate.getDate();

    // 月份名称数组
    const monthNames = ["1月", "2月", "3月", "4月", "5月", "6月",
        "7月", "8月", "9月", "10月", "11月", "12月"];
    // 星期名称数组
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

    // 初始化日历
    function initCalendar(year, month) {
        // 获取当月第一天是星期几 (0-6, 0是星期日)
        const firstDay = new Date(year, month, 1).getDay();
        // 获取当月天数
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        // 获取上个月天数
        const daysInLastMonth = new Date(year, month, 0).getDate();

        // 更新日历标题
        $('#monthYearTitle').text(`${year}年${monthNames[month]}`);

        // 生成日历HTML
        let calendarHTML = '';

        // 添加上个月的日期
        for (let i = firstDay - 1; i >= 0; i--) {
            calendarHTML += `<div class="day other-month">${daysInLastMonth - i}</div>`;
        }

        // 添加当月的日期
        for (let i = 1; i <= daysInMonth; i++) {
            let dayClass = 'day-text';
            const date = new Date(year, month, i);

            // 检查是否是今天
            if (year === currentDate.getFullYear() &&
                month === currentDate.getMonth() &&
                i === currentDate.getDate()) {
                dayClass += ' today';
            }

            calendarHTML += `<div class="day current-month" data-date="${date.toISOString()}"><span class="${dayClass}">${i}</span></div>`;
        }

        // 添加下个月的日期 (补齐6行42个格子)
        const totalCells = 42; // 6行7列
        const remainingCells = totalCells - firstDay - daysInMonth;
        for (let i = 1; i <= remainingCells; i++) {
            calendarHTML += `<div class="day other-month">${i}</div>`;
        }

        // 插入到DOM
        $('#calendarDays').html(calendarHTML);

        // 如果没有预约日期，默认选择今天
        if ($('.appointment-day').length === 0 &&
            year === currentDate.getFullYear() &&
            month === currentDate.getMonth()) {
            setAppointment(today);
        }
    }

    // 设置预约日期
    function setAppointment(day) {
        const date = new Date(currentYear, currentMonth, day);
        console.log(2222222, currentYear, currentMonth, day)
        const weekday = weekdays[date.getDay()];

        // $('.appointment-info').text(`您的预约：${currentMonth + 1}月${day}日 ${weekday}`);
        $('.appointment-info').text(  currentYear + '-' + (currentMonth + 1) + '-' + day);
        $('.day').removeClass('appointment-day');
        $(`.day[data-date="${date.toISOString()}"]`).addClass('appointment-day');
    }

    // 初始化日历
    initCalendar(currentYear, currentMonth);

    // 点击日期事件
    $(document).on('click', '.day.current-month', function () {
        const day = parseInt($(this).text());
        setAppointment(day);
    });

    // 上一个月按钮点击事件
    $('#prevMonth').click(function () {
        currentMonth--;
        if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
        }
        initCalendar(currentYear, currentMonth);
    });

    // 下一个月按钮点击事件
    $('#nextMonth').click(function () {
        currentMonth++;
        if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
        }
        initCalendar(currentYear, currentMonth);
    });
});

3.css

@primary-color: #1890ff;
@gray-color: #f0f0f0;
@text-color: #333;
@light-text: #999;

.calendar-container {
    width: 100%;
    // margin: 20px auto;


    .calendar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .2133rem 0 .3467rem;

        #monthYearTitle {
            font-weight: 500;
            font-size: .3733rem;
            color: #333333;
            margin: 0 .1867rem;
        }

        .pre-btn,
        .next-btn {
            width: .4533rem;
            height: .4533rem;
        }

        .month-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;

            button {
                img {
                    width: .4533rem;
                    height: .4533rem;
                }

                &:hover {
                    opacity: 0.8;
                }
            }

            h2 {
                margin: 0;
                font-size: 18px;
                font-weight: normal;
                flex-grow: 1;
            }
        }
    }

    .calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-weight: 500;
        font-size: .3467rem;
        color: #999999;

    }

    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: .0267rem;

        .day {
            height: 1.0667rem;

            cursor: pointer;
            transition: all 0.3s;

            .day-text {
                width: .6667rem;
                height: .6667rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &:hover {
                background-color: @gray-color;
            }

            &.current-month {
                font-weight: 500;
                font-size: .3467rem;
                color: #333333;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &.other-month {
                color: @light-text;
                opacity: 0;
            }

            &.appointment-day {
                // background-color: fadeout(@primary-color, 90%);
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: .0533rem;
                    width: .16rem;
                    height: .16rem;
                    background-color: @primary-color;
                    border-radius: 50%;
                }
            }


        }

        .today {
            background: #00BC8D !important;
            border-radius: 50%;
            color: #fff;
            border-radius: 50%;
        }
    }

    .appointment-info {
        text-align: center;
        padding: .24rem 0;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0 .1067rem .32rem rgba(0, 0, 0, 0.15) !important;
        border-radius: .24rem;
        font-weight: 500;
        font-size: .3467rem;
        color: #333333;
    }
}