当前位置：首页 > news >正文

简单一周日期展示及选择切换

news 来源：原创 2025/5/25 1:29:04

医院挂号，可能需要切换日期，选择一周内的某一天。

提供一周内的日期段，通过点击，切换到不同天。

简单的js，html实例。切换玩调用后台接口，实现后续逻辑。

使用Vue,插值语法，更简单。

一周日历切换

代码:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8"/>
       <title>显示一周日期</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

        <style>
            .container {
                display: flex;
            }
            
            .box {
                /* 这里可以添加具体的样式 */
                flex:1;
                background-color: white;
                margin:0 auto;
                text-align:center;
                padding: 7px; /* 内边距 */
            }

            .box_active{
                background: #0093E9;
                color: #fff;
                border-radius: 5px;
                border: 1px solid #D9D9D9; /* 边框颜色 */
                box-shadow: 0 0 10px 0 rgba(0, 148, 233, 0.63)
            }

        </style>
    </head>
    <body>


        <div class="container">
            <div class="box "   id="week_div_0">
                <text style="display: block; font-size: 18px; " id="week_shu_0"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_0"></text>
            </div>

            <div class="box"  id="week_div_1">
                <text style="display: block; font-size: 18px;" id="week_shu_1"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_1"></text>
            </div>

            <div class="box"  id="week_div_2">
                <text style="display: block; font-size: 18px;" id="week_shu_2"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_2"></text>
            </div>

            <div class="box"  id="week_div_3">
                <text style="display: block; font-size: 18px;" id="week_shu_3"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_3"></text>
            </div>

            <div class="box"  id="week_div_4">
                <text style="display: block; font-size: 18px;" id="week_shu_4"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_4"></text>
            </div>

            <div class="box"  id="week_div_5">
                <text style="display: block; font-size: 18px;" id="week_shu_5"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_5"></text>
            </div>

            <div class="box"  id="week_div_6">
                <text style="display: block; font-size: 18px;" id="week_shu_6"></text>
                <text style="display: block; font-size: 12px;" id="week_wen_6"></text>
            </div>

        </div>


        <script>
            let myDate = new Date();
            myDate.setDate(myDate.getDate() + 0);
            let dateArray = [];
            let weekArray = [];
            let dateTemp = '';
            let week = ['日', '一', '二', '三', '四', '五', '六'];

            for (var i = 0; i < 7; i++) {
                dateTemp = myDate.getFullYear() + "-" + FormatDate((myDate.getMonth() + 1)) + "-" + FormatDate(myDate.getDate()) + "";
                dateArray.push(dateTemp);
                weekArray.push(week[myDate.getDay()]);
                myDate.setDate(myDate.getDate() + 1);
            }

            console.log("dateArray",dateArray)  //日期 2025-03-26
            console.log("weekArray",weekArray)   //星期数据  周三
            console.log("dateArray[0]",dateArray[0])  //当前日期

            //日，或月，小于10的，在前面加0，如 2025-3-1格式化后为 2025-03-01
            function FormatDate(n) {
                if (n < 10) {
                    return '0' + n;
                } else {
                    return n;
                }
            }
        </script>
        <script language="javascript" type="text/javascript" >
            //初始化,日期数据抬头展示
            for(let i= 0 ; i<7; i ++){
                //console.log("点击i",i)
                $('#week_shu_' + i).text(dateArray[i].substring(8,10)) //2025-03-26
                $('#week_wen_' + i).text(weekArray[i])
            }


            let choose_id  = "0"
            let choose_date = dateArray[choose_id]
            //执行一次，默认开始日期的，后台请求
            $("#week_div_" + choose_id ).addClass("box_active");
            queryInfo(choose_date)

            //绑定点击事件
            for (let j = 0; j < 7; j++) {

                $('#week_div_' + j).on('click', (function(index) {
                    return function() {

                        $("#week_div_" + choose_id ).removeClass("box_active");
                        $("#week_div_" + index ).addClass("box_active");
                        choose_id = index
                        //选择日期，调用之后的逻辑处理
                        queryInfo(dateArray[choose_id])
                    };
                })(j) );

            }
                    
           function queryInfo(param){
            //ajax 或其他后台请求
            console.log("调用后台接口，入参日期:",param )
           }      

        </script>
    </body>
<html>