日期选择组件样式渲染

场景描述

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

实现思路

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

实现步骤

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

在渲染函数中判断根据不同的date值返回不同的样式展现，返回的时候需要用的react，因此需要先应用react

    import React from 'react';

具体的渲染函数的实现如下：

        datePicker0DateRenderFn(currentDate,today){
        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(currentDate.date() === today.date()){
                return  <div style={todayStyle}>
                <div style={dateMiddle}>{currentDate.date()}</div>
              </div>
        }else if(currentDate.date() === 1){
            return <div style={day1Style}>
                <div style={dateMiddle}>{currentDate.date()}</div>
              </div>
        }else{
            return (
              <div style={containerStyle}>
                <div style={dateMiddle}>{currentDate.date()}</div>
              </div>
            );
        }
    }

运行效果如下;