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 (         
 stopBubbling(e)}>             
                 
{lunarYearType}
                 
{lunarZodiacYear}
                 
                 
{scalendar == 'solar' ? year : lunarYear}
                 
/
                 
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：element ui提交表单返回成功后自动清空表单的值的实现代码_vue.js_
                                                                
下一篇：react实现拖拽模态框_React_