React封装日期时间显示组件

时间日期展示器

import ProtoType from 'prop-types';
import {
    useState, useEffect } from 'react';
import './index.css'
/**时间选择器
 * @luoronghao
 * 参数说明
 * timzone:时区（1-24）
 * calendar:日期类型{solar(阳历)，lunar(阴历)}
 * date：时间
 * format:格式（YYYY/MM/DD HH:MM:SS W）
   YYYY（Y的个数表示显示年的位数）
   MM(M/MM一个表示月份前面不加零，两个表示月份前面加零E表示英文的月)
   DD(D/DD一个表示日期前面不加零，两个表示日期前面加零)
   HH(H/HH/h/hh一个H表示二十四小时记时前面不加零HH表示二十四小时记时前面加零h表示十二小时记时前面不加零hh表示十二小时记时前面加零)
   MM(M/MM一个表示分钟前面不加零两个表示分钟前面加零)
   SS(S/SS一个表示秒钟前面不加零两个表示秒钟前面加零)
   W:表示星期（E表示英文的星期）
   不想显示则用字母N代替对应的字母
 * style:显示样式。
*/


function DateTimePicker({
     timzone, calendar, date, format, style, istimzone, islunaryeartype, islunarzodiacyear, isyear, ismonth, isday, isweek, ishour, isminute, issecond ,isaddsetting}) {
   

    // 时区
    const [stimzone, setStimzone] = useState(timzone);
    //阴历阳历类型
    const [scalendar, setSalendar] = useState(calendar);
    //时间日期
    const [sdate, setSdate] = useState(date);
    //时间日期格式
    const [sformat, setSformat] = useState(format);
    //显示样式
    const [sstyle, setSstyle] = useState(style);
    //时间日期数据
    const [sdatas, setSdatas] = useState({
   });

    //控制设置面板是否显示
    const [issettingsPanel, setIssettingsPanel] = useState(true);
    //是否添加设置按钮
    const [isAddSetting,setIsAddSetting]=useState(isaddsetting);

    //是否显示时区
    const [isStimzone, setIsStimzone] = useState(istimzone)
    // 是否显示年类型
    const [isLunarYearType, setIsLunarYearType] = useState(islunaryeartype);
    //是否显示生肖年
    const [isLunarZodiacYear, setIsLunarZodiacYear] = useState(islunarzodiacyear);
    //是否显示年份
    const [isYear, setIsYear] = useState(isyear);
    //是否显示月
    const [isMonth, setIsMonth] = useState(ismonth);
    //是否显示日期
    const [isDay, setIsDay] = useState(isday);
    //是否显示星期
    const [isWeek, setIsWeek] = useState(isweek);
    //是否显示小时
    const [isHour, setIsHour] = useState(ishour);
    //是否显示分钟
    const [isMinute, setIsMinute] = useState(isminute);
    //是否显示秒钟
    const [isSecond, setIsSecond] = useState(issecond);
    useEffect(() => {
   
        //参数校验
        judgeParameters(stimzone, scalendar, sdate, sformat, sstyle);
        //解析时间格式
        setSdatas(getFormatTime(stimzone, sdate, sformat));

        document.addEventListener('click', function () {
   
            if (!issettingsPanel) {
   
                setIssettingsPanel(!issettingsPanel);
            }
        })
        //启动定时器
        const timer = setInterval(
            () => {
   
                setSdate(new Date(sdate.getTime() + 1000))
            },
            1000
        )
        return () => {
   
            clearInterval(timer);
        }
    }, [sdate])
    function displayPanel() {
   
        setIssettingsPanel(!issettingsPanel);
    }
    function stopBubbling(e) {
   
        e.stopPropagation();
    }
    /**对传入的props参数进行深度校验
*/
    function judgeParameters(timzone, calendar, date, format, style) {
   
        let isRules = true;
        let regFormat = /^([N]|[Y]{1,4})[/]([N|E]|[M]{1,2})[/]([N]|[D]{1,2})[\s]([N]|[H|h]{1,2})[:]([N]|[M]{1,2})[:]([N]|[S]{1,2})[\s][N|W|E]$/;
        if (timzone < -12 || timzone > 12)
            isRules = false;
        if (calendar != 'solar' && calendar != 'lunar')
            isRules = false;
        if (!(date instanceof Date))
            isRules = false;
        if (!regFormat.test(format))
            isRules = false;
        if (style !== 'default')
            isRules = false;
        if (!isRules)
            throw "The parameter of DateTimePicker component is wrong,it should be{timzone(1<=number<=24),calendar{solar,Lunar},date(object must be Date),format,style{default}}";
    }
    // 解析时间日期格式函数
    function getFormatTime(timzone, date, format) {
   
        //日期时间数据
        let datas = {
   
            year: '',
            month: '',
            day: '',
            lunarYear: '',
            lunarMonth: '',
            lunarDay: '',
            lunarYearType: '',
            lunarZodiacYear: '',
            lunarLeapMonth: '',
            hour: '',
            minute: '',
            second: '',
            week: '',
        }
        let d = new Date(date);
        //变换为对应时区的时间
        d = getTimzoneTime(d, timzone);

        const str = format.split(' ');
        const strDate = str[0].split('/');
        //年
        datas.year = (strDate[0] === 'N' ? ' ' : d.getFullYear().toString().substring(4 - strDate[0].length, 4));
        //月
        datas.month = (strDate[1] === 'N' ? ' ' : (d.getMonth() + 1));
        if (strDate[1] === 'E') {
   
            let month = new Array(12);
            month[0] = "January";
            month[1] = "February";
            month[2] = "March";
            month[3] = "April";
            month[4] = "May";
            month[5] = "June";
            month[6] = "July";
            month[7] = "August";
            month[8] = "September";
            month[9] = "October";
            month[10] = "November";
            month[11] = "December";
            datas.month = month[d.getMonth()];
        }
        if (strDate[1] === 'MM') {
   
            datas.month = (datas.month < 10 ? '0' + datas.month : datas.month);
        }
        //日
        datas.day = (strDate[2] === 'N' ? ' ' : d.getDate().toString());
        if (strDate[2] === 'DD') {
   
            datas.day = (datas.day < 10 ? '0' + datas.day : datas.day);
        }
        //获取阴历日期
        const dateArray = Lunar.toLunar(d.getFullYear(), d.getMonth() + 1, d.getDate());
        // 农历年
        datas.lunarYear = (strDate[0] === 'N' ? ' ' : dateArray[0].toString().substring(4 - strDate[0].length, 4));
        datas.lunarYear = changeNumToCHN(datas.lunarYear);
        // 农历月
        datas.lunarMonth = (strDate[1] === 'N' ? ' ' : dateArray[5]);
        // 农历日   
        datas.lunarDay = (strDate[2] === 'N' ? ' ' : dateArray[6]);
        //天干地支年
        datas.lunarYearType = dateArray[3];
        //生肖年
        datas.lunarZodiacYear = dateArray[4];
        //润几月
        datas.lunarLeapMonth = dateArray[7].toString();
        //时间
        const strTime = str[1].split(':');
        //小时
        datas.hour = (strTime[0] == 'N' ? ' ' : d.getHours().toString());
        switch (strTime[0]) {
   
            case 'HH':
                datas.hour = (datas.hour < 10 ? '0' + datas.hour : datas.hour);
                break;
            case "H":
                break;
            case "hh":
                datas.hour = (datas.hour > 12 ? datas.hour - 12 : datas.hour);
                datas.hour = (datas.hour < 10 ? '0' + datas.hour : datas.hour);
                break;
            case 'h':
                datas.hour = (datas.hour > 12 ? datas.hour - 12 : datas.hour);
                break;
        }
        //分钟
        datas.minute = (strTime[1] == 'N' ? ' ' : d.getMinutes().toString())
        if (strTime[1] == 'MM') {
   
            datas.minute = (datas.minute < 10 ? '0' + datas.minute : datas.minute);
        }
        //秒钟
        datas.second = (strTime[2] == 'N' ? ' ' : d.getSeconds().toString())
        if (strTime[2] == 'SS') {
   
            datas.second = (datas.second < 10 ? '0' + datas.second : datas.second);
        }
        //星期
        datas.week = (str[2] === 'N' ? ' ' : d.getDay());
        if (str[2] !== 'N') {
   
            let weekday = new Array(7);
            weekday[0] = (str[2] == 'W' ? "星期日" : 'Sunday');
            weekday[1] = (str[2] == 'W' ? "星期一" : 'Monday');
            weekday[2] = (str[2] == 'W' ? "星期二" : 'Tuesday');
            weekday[3] = (str[2