React日期时间显示组件的封装方法

本文实例为大家分享了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] == 'W' ? "星期三" : 'Wednesday');
            weekday[4] = (str[2] == 'W' ? "星期四" : 'Thursday');
            weekday[5] = (str[2] == 'W' ? "星期五" : 'Friday');
            weekday[6] = (str[2] == 'W' ? "星期六" : 'Saturday');
            datas.week = weekday[d.getDay()];
        }
        return datas;
    }
    /**获取对应时区时间
     * 
     */
    function getTimzoneTime(time, timzone) {
        const len = time.getTime();
        const offset = time.getTimezoneOffset() * 60000;
        const utcTime = len + offset;
        return new Date(utcTime + 3600000 * timzone);
    }
    /**将2020转化为二零二零*/
    function changeNumToCHN(num) {
        let str = num + "";
        let resultArr = [];
        for (var i = 0; i < str.length; i++) {
            resultArr.push(parseInt(str[i]));
        }
        let tmpnewchar = ""
        for (let i = resultArr.length; i >= 0; i--) {
            switch (str[i]) {
                case "0": tmpnewchar = "零" + tmpnewchar; break;
                case "1": tmpnewchar = "一" + tmpnewchar; break;
                case "2": tmpnewchar = "二" + tmpnewchar; break;
                case "3": tmpnewchar = "三" + tmpnewchar; break;
                case "4": tmpnewchar = "四" + tmpnewchar; break;
                case "5": tmpnewchar = "五" + tmpnewchar; break;
                case "6": tmpnewchar = "六" + tmpnewchar; break;
                case "7": tmpnewchar = "七" + tmpnewchar; break;
                case "8": tmpnewchar = "八" + tmpnewchar; break;
                case "9": tmpnewchar = "九" + tmpnewchar; break;
            }
        }
        return tmpnewchar;
    }
    const { year, month, day, lunarYear, lunarMonth, lunarDay, lunarYearType, lunarZodiacYear, lunarLeapMonth, hour, minute, second, week } = sdatas
    return (
        <div id='datePanel' onClick={(e) => stopBubbling(e)}>
            <ul id='date'>
                <li id='lunarYearType' className={isLunarYearType ? 'font' : 'font is-hidden'}>{lunarYearType}</li>
                <li id='lunarZodiacYear' className={isLunarZodiacYear ? 'font' : 'font is-hidden'}>{lunarZodiacYear}</li>
                <li className='space'></li>
                <li id='year' className={isYear ? 'number' : 'number is-hidden'}>{scalendar == 'solar' ? year : lunarYear}</li>
                <li className={isYear ? 'slash' : 'slash is-hidden'}>/</li>
                <li id='month' className={isMonth ? 'number' : 'number is-hidden'}>{scalendar == 'solar' ? month : lunarMonth}</li>
                <li className={isMonth && isDay ? 'slash' : 'slash is-hidden'}>/</li>
                <li id='day' className={isDay ? 'number' : 'number is-hidden'}>{scalendar == 'solar' ? day : lunarDay}</li>
                <li className={isStimzone ? 'space' : 'space is-hidden'}></li>
                <li id='timezone' className={isStimzone ? 'number' : 'number is-hidden'} >GTM {stimzone}</li>
                <li className='space'></li>
                <li id='hour' className={isHour ? 'number' : 'number is-hidden'}>{hour}</li>
                <li className={isHour ? 'colon' : 'colon is-hidden'}>:</li>
                <li id='minute' className={isMinute ? 'number' : 'number is-hidden'}>{minute}</li>
                <li className={isMinute&&isSecond ? 'colon' : 'colon is-hidden'}>:</li>
                <li id='second' className={isSecond ? 'number' : 'number is-hidden'}>{second}</li>
                <li className='space'></li>
                <li id='week' className={isWeek ? 'font' : 'font is-hidden'}>{week}</li>
                <li className={isWeek ? 'space' : 'space is-hidden'}></li>
                <li className='space'></li>
                <li id='setProperty' onClick={displayPanel} className={issettingsPanel ? '' : 'selected'} style={{display: isAddSetting?'':'none'}}></li>
            </ul>
            <ul id='selectItem' className={issettingsPanel ? 'hidden' : ''}>
                <li id='calendar'>
                    <div id='solar' className={scalendar == 'solar' ? 'is-select' : ''} onClick={() => { setSalendar('solar') }}>国历</div>
                    <div id='lunar' className={scalendar == 'lunar' ? 'is-select' : ''} onClick={() => { setSalendar('lunar') }}>阴历</div>
                </li>
                <li className={isStimzone ? 'is-select' : ''} onClick={() => { setIsStimzone(!isStimzone) }}>时区</li>
                <li className={isLunarYearType ? 'is-select' : ''} onClick={() => { setIsLunarYearType(!isLunarYearType) }}>天干地支年</li>
                <li className={isLunarZodiacYear ? 'is-select' : ''} onClick={() => { setIsLunarZodiacYear(!isLunarZodiacYear) }}>生肖年</li>
                <li className='select-time-year'>
                <div className={isYear ? 'is-select' : ''} onClick={() => { setIsYear(!isYear) }}>年份</div>
                <div className={isMonth ? 'is-select' : ''} onClick={() => { setIsMonth(!isMonth) }}>月份</div>
                <div className={isDay ? 'is-select' : ''} onClick={() => { setIsDay(!isDay) }}>天数</div>
                </li>
                <li className='select-time-year'>
                    <div className={isHour ? 'is-select' : ''} onClick={() => { setIsHour(!isHour) }}>小时</div>
                    <div className={isMinute ? 'is-select' : ''} onClick={() => { setIsMinute(!isMinute) }}>分钟</div>
                    <div className={isSecond ? 'is-select' : ''} onClick={() => { setIsSecond(!isSecond) }}>秒钟</div>
                </li>
                <li className={isWeek ? 'is-select' : ''} onClick={() => { setIsWeek(!isWeek) }}>星期</li>

            </ul>

        </div>
    )

}
/**国历农历转化对象
* 用法
* Lunar.toSolar(2016, 6, 3); 农历转化公历
* Lunar.toLunar(2016, 7, 6); 公历转化农历
*/
var Lunar = {
    MIN_YEAR: 1891,
    MAX_YEAR: 2100,
    lunarInfo: [
        [0, 2, 9, 21936], [6, 1, 30, 9656], [0, 2, 17, 9584], [0, 2, 6, 21168], [5, 1, 26, 43344], [0, 2, 13, 59728],
        [0, 2, 2, 27296], [3, 1, 22, 44368], [0, 2, 10, 43856], [8, 1, 30, 19304], [0, 2, 19, 19168], [0, 2, 8, 42352],
        [5, 1, 29, 21096], [0, 2, 16, 53856], [0, 2, 4, 55632], [4, 1, 25, 27304], [0, 2, 13, 22176], [0, 2, 2, 39632],
        [2, 1, 22, 19176], [0, 2, 10, 19168], [6, 1, 30, 42200], [0, 2, 18, 42192], [0, 2, 6, 53840], [5, 1, 26, 54568],
        [0, 2, 14, 46400], [0, 2, 3, 54944], [2, 1, 23, 38608], [0, 2, 11, 38320], [7, 2, 1, 18872], [0, 2, 20, 18800],
        [0, 2, 8, 42160], [5, 1, 28, 45656], [0, 2, 16, 27216], [0, 2, 5, 27968], [4, 1, 24, 44456], [0, 2, 13, 11104],
        [0, 2, 2, 38256], [2, 1, 23, 18808], [0, 2, 10, 18800], [6, 1, 30, 25776], [0, 2, 17, 54432], [0, 2, 6, 59984],
        [5, 1, 26, 27976], [0, 2, 14, 23248], [0, 2, 4, 11104], [3, 1, 24, 37744], [0, 2, 11, 37600], [7, 1, 31, 51560],
        [0, 2, 19, 51536], [0, 2, 8, 54432], [6, 1, 27, 55888], [0, 2, 15, 46416], [0, 2, 5, 22176], [4, 1, 25, 43736],
        [0, 2, 13, 9680], [0, 2, 2, 37584], [2, 1, 22, 51544], [0, 2, 10, 43344], [7, 1, 29, 46248], [0, 2, 17, 27808],
        [0, 2, 6, 46416], [5, 1, 27, 21928], [0, 2, 14, 19872], [0, 2, 3, 42416], [3, 1, 24, 21176], [0, 2, 12, 21168],
        [8, 1, 31, 43344], [0, 2, 18, 59728], [0, 2, 8, 27296], [6, 1, 28, 44368], [0, 2, 15, 43856], [0, 2, 5, 19296],
        [4, 1, 25, 42352], [0, 2, 13, 42352], [0, 2, 2, 21088], [3, 1, 21, 59696], [0, 2, 9, 55632], [7, 1, 30, 23208],
        [0, 2, 17, 22176], [0, 2, 6, 38608], [5, 1, 27, 19176], [0, 2, 15, 19152], [0, 2, 3, 42192], [4, 1, 23, 53864],
        [0, 2, 11, 53840], [8, 1, 31, 54568], [0, 2, 18, 46400], [0, 2, 7, 46752], [6, 1, 28, 38608], [0, 2, 16, 38320],
        [0, 2, 5, 18864], [4, 1, 25, 42168], [0, 2, 13, 42160], [10, 2, 2, 45656], [0, 2, 20, 27216], [0, 2, 9, 27968],
        [6, 1, 29, 44448], [0, 2, 17, 43872], [0, 2, 6, 38256], [5, 1, 27, 18808], [0, 2, 15, 18800], [0, 2, 4, 25776],
        [3, 1, 23, 27216], [0, 2, 10, 59984], [8, 1, 31, 27432], [0, 2, 19, 23232], [0, 2, 7, 43872], [5, 1, 28, 37736],
        [0, 2, 16, 37600], [0, 2, 5, 51552], [4, 1, 24, 54440], [0, 2, 12, 54432], [0, 2, 1, 55888], [2, 1, 22, 23208],
        [0, 2, 9, 22176], [7, 1, 29, 43736], [0, 2, 18, 9680], [0, 2, 7, 37584], [5, 1, 26, 51544], [0, 2, 14, 43344],
        [0, 2, 3, 46240], [4, 1, 23, 46416], [0, 2, 10, 44368], [9, 1, 31, 21928], [0, 2, 19, 19360], [0, 2, 8, 42416],
        [6, 1, 28, 21176], [0, 2, 16, 21168], [0, 2, 5, 43312], [4, 1, 25, 29864], [0, 2, 12, 27296], [0, 2, 1, 44368],
        [2, 1, 22, 19880], [0, 2, 10, 19296], [6, 1, 29, 42352], [0, 2, 17, 42208], [0, 2, 6, 53856], [5, 1, 26, 59696],
        [0, 2, 13, 54576], [0, 2, 3, 23200], [3, 1, 23, 27472], [0, 2, 11, 38608], [11, 1, 31, 19176], [0, 2, 19, 19152],
        [0, 2, 8, 42192], [6, 1, 28, 53848], [0, 2, 15, 53840], [0, 2, 4, 54560], [5, 1, 24, 55968], [0, 2, 12, 46496],
        [0, 2, 1, 22224], [2, 1, 22, 19160], [0, 2, 10, 18864], [7, 1, 30, 42168], [0, 2, 17, 42160], [0, 2, 6, 43600],
        [5, 1, 26, 46376], [0, 2, 14, 27936], [0, 2, 2, 44448], [3, 1, 23, 21936], [0, 2, 11, 37744], [8, 2, 1, 18808],
        [0, 2, 19, 18800], [0, 2, 8, 25776], [6, 1, 28, 27216], [0, 2, 15, 59984], [0, 2, 4, 27424], [4, 1, 24, 43872],
        [0, 2, 12, 43744], [0, 2, 2, 37600], [3, 1, 21, 51568], [0, 2, 9, 51552], [7, 1, 29, 54440], [0, 2, 17, 54432],
        [0, 2, 5, 55888], [5, 1, 26, 23208], [0, 2, 14, 22176], [0, 2, 3, 42704], [4, 1, 23, 21224], [0, 2, 11, 21200],
        [8, 1, 31, 43352], [0, 2, 19, 43344], [0, 2, 7, 46240], [6, 1, 27, 46416], [0, 2, 15, 44368], [0, 2, 5, 21920],
        [4, 1, 24, 42448], [0, 2, 12, 42416], [0, 2, 2, 21168], [3, 1, 22, 43320], [0, 2, 9, 26928], [7, 1, 29, 29336],
        [0, 2, 17, 27296], [0, 2, 6, 44368], [5, 1, 26, 19880], [0, 2, 14, 19296], [0, 2, 3, 42352], [4, 1, 24, 21104],
        [0, 2, 10, 53856], [8, 1, 30, 59696], [0, 2, 18, 54560], [0, 2, 7, 55968], [6, 1, 27, 27472], [0, 2, 15, 22224],
        [0, 2, 5, 19168], [4, 1, 25, 42216], [0, 2, 12, 42192], [0, 2, 1, 53584], [2, 1, 21, 55592], [0, 2, 9, 54560]
    ],
    //是否闰年
    isLeapYear: function (year) {
        return ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0));
    },
    //天干地支年
    lunarYear: function (year) {
        var gan = ['庚', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己'],
            zhi = ['申', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未'],
            str = year.toString().split("");
        return gan[str[3]] + zhi[year % 12];
    },
    //生肖年
    zodiacYear: function (year) {
        var zodiac = ['猴', '鸡', '狗', '猪', '鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊'];
        return zodiac[year % 12];
    },
    //公历月份天数
    //@param year 阳历-年
    //@param month 阳历-月
    solarMonthDays: function (year, month) {
        var FebDays = this.isLeapYear(year) ? 29 : 28;
        var monthHash = ['', 31, FebDays, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        return monthHash[month];
    },
    //农历月份天数
    lunarMonthDays: function (year, month) {
        var monthData = this.lunarMonths(year);
        return monthData[month - 1];
    },
    //农历月份天数数组
    lunarMonths: function (year) {
        var yearData = this.lunarInfo[year - this.MIN_YEAR];
        var leapMonth = yearData[0];
        var bit = (+yearData[3]).toString(2);
        var months = [];
        for (var i = 0; i < bit.length; i++) {
            months[i] = bit.substr(i, 1);
        }

        for (var k = 0, len = 16 - months.length; k < len; k++) {
            months.unshift('0');
        }

        months = months.slice(0, (leapMonth == 0 ? 12 : 13));
        for (var i = 0; i < months.length; i++) {
            months[i] = +months[i] + 29;
        }
        return months;
    },
    //农历每年的天数
    //@param year 农历年份
    lunarYearDays: function (year) {
        var monthArray = this.lunarYearMonths(year);
        var len = monthArray.length;
        return (monthArray[len - 1] == 0 ? monthArray[len - 2] : monthArray[len - 1]);
    },
    //
    lunarYearMonths: function (year) {
        var monthData = this.lunarMonths(year);
        var res = [];
        var temp = 0;
        var yearData = this.lunarInfo[year - this.MIN_YEAR];
        var len = (yearData[0] == 0 ? 12 : 13);
        for (var i = 0; i < len; i++) {
            temp = 0;
            for (var j = 0; j <= i; j++) {
                temp += monthData[j];
            }
            res.push(temp);
        }
        return res;
    },
    //获取闰月
    //@param year 农历年份
    leapMonth: function (year) {
        var yearData = this.lunarInfo[year - this.MIN_YEAR];
        return yearData[0];
    },
    //计算农历日期与正月初一相隔的天数
    betweenLunarDays: function (year, month, day) {
        var yearMonth = this.lunarMonths(year);
        var res = 0;
        for (var i = 1; i < month; i++) {
            res += yearMonth[i - 1];
        }
        res += day - 1;
        return res;
    },
    //计算2个阳历日期之间的天数
    //@param year 阳历年
    //@param month
    //@param day
    //@param l_month 阴历正月对应的阳历月份
    //@param l_day   阴历初一对应的阳历天
    betweenSolarDays: function (year, month, day, l_month, l_day) {
        var time1 = new Date(year + "-" + month + "-" + day).getTime(),
            time2 = new Date(year + "-" + l_month + "-" + l_day).getTime();
        return Math.ceil((time1 - time2) / 24 / 3600 / 1000);
    },
    //根据距离正月初一的天数计算阴历日期
    //@param year 阳历年
    //@param between 天数
    lunarByBetween: function (year, between) {
        var lunarArray = [], yearMonth = [], t = 0, e = 0, leapMonth = 0, m = '';
        if (between == 0) {
            t = 1;
            e = 1;
            m = '正月';
        } else {
            year = between > 0 ? year : (year - 1);
            yearMonth = this.lunarYearMonths(year);
            leapMonth = this.leapMonth(year);
            between = between > 0 ? between : (this.lunarYearDays(year) + between);
            for (var i = 0; i < 13; i++) {
                if (between == yearMonth[i]) {
                    t = i + 2;
                    e = 1;
                    break;
                } else if (between < yearMonth[i]) {
                    t = i + 1;
                    e = between - ((yearMonth[i - 1]) ? yearMonth[i - 1] : 0) + 1;
                    break;
                }
            }

            m = (leapMonth != 0 && t == leapMonth + 1)
                ? ('闰'.this.chineseMonth(t - 1))
                : this.chineseMonth(((leapMonth != 0 && leapMonth + 1 < t) ? (t - 1) : t));
        }
        lunarArray.push(year, t, e); //年 月 日
        lunarArray.push(this.lunarYear(year),
            this.zodiacYear(year),
            m,
            this.chineseNumber(e)); //天干地支年 生肖年 月份 日
        lunarArray.push(leapMonth); //闰几月
        return lunarArray;
    },
    //中文月份
    chineseMonth: function (month) {
        var monthHash = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
        return monthHash[month];
    },
    //中文日期
    chineseNumber: function (num) {
        var dateHash = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
        var res;
        if (num <= 10) {
            res = '初' + dateHash[num];
        } else if (num > 10 && num < 20) {
            res = '十' + dateHash[num - 10];
        } else if (num == 20) {
            res = "二十";
        } else if (num > 20 && num < 30) {
            res = "廿" + dateHash[num - 20];
        } else if (num == 30) {
            res = "三十";
        }
        return res;
    },
    //转换农历
    toLunar: function (year, month, day) {
        var yearData = this.lunarInfo[year - this.MIN_YEAR];
        if (year == this.MIN_YEAR && month <= 2 && day <= 9) {
            return [1891, 1, 1, '辛卯', '兔', '正月', '初一'];
        }
        return this.lunarByBetween(year, this.betweenSolarDays(year, month, day, yearData[1], yearData[2]));
    },
    //转换公历
    //@param year  阴历-年
    //@param month 阴历-月，闰月处理：例如如果当年闰五月，那么第二个五月就传六月，相当于阴历有13个月
    //@param date  阴历-日
    toSolar: function (year, month, day) {
        var yearData = this.lunarInfo[year - this.MIN_YEAR];
        var between = this.betweenLunarDays(year, month, day);
        var ms = new Date(year + "-" + yearData[1] + "-" + yearData[2]).getTime();
        var s = ms + between * 24 * 60 * 60 * 1000;
        var d = new Date();
        d.setTime(s);
        year = d.getFullYear();
        month = d.getMonth() + 1;
        day = d.getDate();
        return [year, month, day];
    }
};
DateTimePicker.propTypes =
{
    timzone: ProtoType.number,
    calendar: ProtoType.string,
    date: ProtoType.object,
    format: ProtoType.string.isRequired,
    style: ProtoType.string,
    istimzone: ProtoType.bool,
    islunaryeartype: ProtoType.bool,
    islunarzodiacyear: ProtoType.bool,
    isyear: ProtoType.bool,
    ismonth: ProtoType.bool,
    isday: ProtoType.bool,
    isweek: ProtoType.bool,
    ishour: ProtoType.bool,
    isminute: ProtoType.bool,
    issecond: ProtoType.bool,
    isaddsetting:ProtoType.bool,
}
DateTimePicker.defaultProps = {
    timzone: 8,
    calendar: 'lunar',
    date: new Date(),
    format: 'YYYY/MM/DD HH:MM:SS',
    style: 'default',
    istimzone: true,
    islunaryeartype: true,
    islunarzodiacyear: true,
    isyear: true,
    ismonth: true,
    isday: true,
    isweek: true,
    ishour: true,
    isminute: true,
    issecond: true,
    isaddsetting:true,
}
export default DateTimePicker;

样式文件

#datePanel
{
    min-width: 30rem;
    overflow: hidden;
}
#date
{
    position: relative;
    margin: 0px;
    padding: 6px;
    list-style: none;
    height: 1.3rem;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 1px 1px 10px #fff;
    text-shadow: 0px 1px 10px white;
    user-select: none;
    float: left;
}
#date:hover
{
    transition: all 0.5s;
    background-color: rgba(169, 166, 173, 0.697);
    box-shadow: 0 2px 6px rgba(191, 188, 194, 0.597);

}
#date li
{
    float: left;
    margin: auto 0;
    height: 1.3rem;
    line-height: 1.3rem;
    text-align: center;
}
#date #lunarYearType
{
    width: 2rem;
}
#date #lunarZodiacYear
{
    width: 1rem;
}
#date .space
{
    width: 0.6rem;
    font-size: 0.2rem;
}
#date #year
{
    width: 2.5rem;
}
#date .slash
{
    width: 0.3rem;
    font-size: 0.2rem;
}
#date #month
{
    width: 1.5rem;
}
#date #day
{
    width: 1.5rem;
}
#date #timezone
{
    width: 2.2rem;
}
#date #hour
{
    width: 0.8rem;
}
#date .colon
{
    width: 0.3rem;
    font-size: 0.2rem;
}

#date #minute
{
    width: 0.8rem;
}
#date #second
{
    width: 0.8rem;
}
#date #week
{
    width: 2rem;
}

#date .hidden
{
    display: none;
}
#date .number
{
    text-align: 'center';
    font-size: 0.5rem;
}
#date .font
{
    text-align: 'center';
    font-size: 0.1rem;
}
#date #setProperty
{
    position: absolute;
    display: block;
    right: 0px;
    top:0.45rem;
    height: 1rem;
    width: 1rem;
    background-image: url('./imgs/paragraph-right.png');
    background-size: 1rem 1rem;

}
#date #setProperty:hover
{
    transition: all 0.2s;
    background-image: url('./imgs/paragraph-right-hover.png');
    
}
#date .selected
{
    background-image: url('./imgs/paragraph-right-hover.png') !important;
    background-size: 1rem 1rem;

}
#selectItem
{
    border: 1px solid rgba(202, 196, 196, 0.61);
    float: left;
    z-index: 999;
    width: 5rem;
    margin-top: 0.45rem;
    padding: 0.2rem;
    list-style: none;
    user-select: none;
}
#selectItem li
{
width: 100%;
height: 1.2rem;
font-size: 0.2rem;
line-height: 1.2rem;
text-align: center;
border-bottom: 1px solid rgba(65, 64, 64, 0.61);
}
#selectItem li:last-child
{
border:none;
}
/* 隐藏 */
.hidden
{
   display: none;
}
#selectItem #calendar
{
    position: relative;
    padding: 0px;
    margin: 0px;
}
#selectItem #calendar #solar{
    position:absolute;
    left: 0px;
    height: 100%;
    width: 50%;
    font-size: 0.2rem;
    line-height: 1.2rem;
}
#selectItem #calendar #lunar{
    position:absolute;
    height: 100%;
    width: 50%;
    right: 0px;
    font-size: 0.2rem;
    line-height: 1.2rem;
}
#selectItem .is-select
{
    background-color:  rgba(113, 209, 65, 0.61);
}
#selectItem .select-time-year
{
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#selectItem .select-time-year div{
    flex: 1;
}

/* 设置是否显示 */
#date .is-hidden
{
    display: none;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。