日期选择组件样式渲染

场景描述

日期选择框中根据不同的日期标记不同样式

实现思路

通过日期选择组件的日期渲染进行设置

实现步骤

在组件的日期渲染上点击跳转生成对应的渲染函数

在渲染函数中判断根据不同的date值返回不同的样式展现

日期渲染函数是在js文件的，默认就是vue技术体系可以直接返回dom元素，因此具体的渲染函数的实现如下：

let datePicker0DateRenderFn = ({current,today,info}) => {
    let containerStyle = { 
        height: "35px", 
        width: "35px",
        margin: "0 auto",
        borderRadius: "50%",
        fontSize: "12px",
        border:  "1px blue solid", // 边框   
        backgroundColor:  "lightgray" // 背景色
    };
    let day1Style = { 
        height: "35px", 
        width: "35px",
        margin: "0 auto",
        borderRadius: "50%",
        fontSize: "12px",
        border:  "1px red solid", // 边框   
        backgroundColor:  "white" // 背景色
    };
    let todayStyle = { 
        height: "35px", 
        width: "35px",
        margin: "0 auto",
        borderRadius: "50%",
        fontSize: "12px",
        border:  "1px yellow solid", // 边框   
        backgroundColor:  "white" // 背景色
    };
    //设置文字居中
    let dateMiddle = {
        position: "relative",
        top: "8px"
    };

    //根当前date一样用todayStyle样式，date是1是用day1Style样式，其他用containerStyle
    if(current.date() === today.date()){
        return (
          <div style={todayStyle}>
            <div style={dateMiddle}>{current.date()}</div>
          </div>
        );
    }else if(current.date() === 1){
        return <div style={day1Style}>
            <div style={dateMiddle}>{current.date()}</div>
          </div>
    }else{
        return (
          <div style={containerStyle}>
            <div style={dateMiddle}>{current.date()}</div>
          </div>
        );
    }    
}

运行效果如下;