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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)