React日期時間顯示組件的封裝方法
更新時間：2022年08月26日 14:45:18 作者：引體向尚
這篇文章主要為大家詳細(xì)介紹了React日期時間顯示組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了React日期時間顯示組件的封裝具體代碼，供大家參考，具體內(nèi)容如下
時間日期展示器
import ProtoType from 'prop-types';
import { useState, useEffect } from 'react';
import './index.css'
/**時間選擇器
?* @luoronghao
?* 參數(shù)說明
?* timzone:時區(qū)（1-24）
?* calendar:日期類型{solar(陽歷)，lunar(陰歷)}
?* date：時間
?* format:格式（YYYY/MM/DD HH:MM:SS W）
? ?YYYY（Y的個數(shù)表示顯示年的位數(shù)）
? ?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代替對應(yīng)的字母
?* style:顯示樣式。
*/
function DateTimePicker({ timzone, calendar, date, format, style, istimzone, islunaryeartype, islunarzodiacyear, isyear, ismonth, isday, isweek, ishour, isminute, issecond ,isaddsetting}) {
? ? // 時區(qū)
? ? 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);
? ? //時間日期數(shù)據(jù)
? ? const [sdatas, setSdatas] = useState({});
? ? //控制設(shè)置面板是否顯示
? ? const [issettingsPanel, setIssettingsPanel] = useState(true);
? ? //是否添加設(shè)置按鈕
? ? const [isAddSetting,setIsAddSetting]=useState(isaddsetting);
? ? //是否顯示時區(qū)
? ? 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(() => {
? ? ? ? //參數(shù)校驗
? ? ? ? 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參數(shù)進行深度校驗
*/
? ? 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}}";
? ? }
? ? // 解析時間日期格式函數(shù)
? ? function getFormatTime(timzone, date, format) {
? ? ? ? //日期時間數(shù)據(jù)
? ? ? ? let datas = {
? ? ? ? ? ? year: '',
? ? ? ? ? ? month: '',
? ? ? ? ? ? day: '',
? ? ? ? ? ? lunarYear: '',
? ? ? ? ? ? lunarMonth: '',
? ? ? ? ? ? lunarDay: '',
? ? ? ? ? ? lunarYearType: '',
? ? ? ? ? ? lunarZodiacYear: '',
? ? ? ? ? ? lunarLeapMonth: '',
? ? ? ? ? ? hour: '',
? ? ? ? ? ? minute: '',
? ? ? ? ? ? second: '',
? ? ? ? ? ? week: '',
? ? ? ? }
? ? ? ? let d = new Date(date);
? ? ? ? //變換為對應(yīng)時區(qū)的時間
? ? ? ? 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());
? ? ? ? // 農(nóng)歷年
? ? ? ? datas.lunarYear = (strDate[0] === 'N' ? ' ' : dateArray[0].toString().substring(4 - strDate[0].length, 4));
? ? ? ? datas.lunarYear = changeNumToCHN(datas.lunarYear);
? ? ? ? // 農(nóng)歷月
? ? ? ? datas.lunarMonth = (strDate[1] === 'N' ? ' ' : dateArray[5]);
? ? ? ? // 農(nóng)歷日 ??
? ? ? ? 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;
? ? }
? ? /**獲取對應(yīng)時區(qū)時間
? ? ?*?
? ? ?*/
? ? function getTimzoneTime(time, timzone) {
? ? ? ? const len = time.getTime();
? ? ? ? const offset = time.getTimezoneOffset() * 60000;
? ? ? ? const utcTime = len + offset;
? ? ? ? return new Date(utcTime + 3600000 * timzone);
? ? }
? ? /**將2020轉(zhuǎn)化為二零二零*/
? ? 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) }}>時區(qū)</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) }}>天數(shù)</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>
? ? )
}
/**國歷農(nóng)歷轉(zhuǎn)化對象
* 用法
* Lunar.toSolar(2016, 6, 3); 農(nóng)歷轉(zhuǎn)化公歷
* Lunar.toLunar(2016, 7, 6); 公歷轉(zhuǎn)化農(nóng)歷
*/
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];
? ? },
? ? //公歷月份天數(shù)
? ? //@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];
? ? },
? ? //農(nóng)歷月份天數(shù)
? ? lunarMonthDays: function (year, month) {
? ? ? ? var monthData = this.lunarMonths(year);
? ? ? ? return monthData[month - 1];
? ? },
? ? //農(nóng)歷月份天數(shù)數(shù)組
? ? 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;
? ? },
? ? //農(nóng)歷每年的天數(shù)
? ? //@param year 農(nóng)歷年份
? ? 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 農(nóng)歷年份
? ? leapMonth: function (year) {
? ? ? ? var yearData = this.lunarInfo[year - this.MIN_YEAR];
? ? ? ? return yearData[0];
? ? },
? ? //計算農(nóng)歷日期與正月初一相隔的天數(shù)
? ? 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個陽歷日期之間的天數(shù)
? ? //@param year 陽歷年
? ? //@param month
? ? //@param day
? ? //@param l_month 陰歷正月對應(yīng)的陽歷月份
? ? //@param l_day ? 陰歷初一對應(yīng)的陽歷天
? ? 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);
? ? },
? ? //根據(jù)距離正月初一的天數(shù)計算陰歷日期
? ? //@param year 陽歷年
? ? //@param between 天數(shù)
? ? 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;
? ? },
? ? //轉(zhuǎn)換農(nóng)歷
? ? 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]));
? ? },
? ? //轉(zhuǎn)換公歷
? ? //@param year ?陰歷-年
? ? //@param month 陰歷-月，閏月處理：例如如果當(dāng)年閏五月，那么第二個五月就傳六月，相當(dāng)于陰歷有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;
}
/* 設(shè)置是否顯示 */
#date .is-hidden
{
? ? display: none;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解讀react的onClick自動觸發(fā)等相關(guān)問題
這篇文章主要介紹了解讀react的onClick自動觸發(fā)等相關(guān)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了ReactJS中的自定義組件的代碼講解,需要的朋友可以參考下2019-11-11
React實現(xiàn)一個高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實現(xiàn)一個高度自適應(yīng)的虛擬列表，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
本文主要介紹了React配置子路由的實現(xiàn)，我們來通過一個簡單的例子解釋一下如何配置子路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
分頁在很多地方都可以用到，本文主要實現(xiàn)了react分頁顯示，主要使用三個組件，父組件listBox、列表組件List、按鈕組件PageButton，感興趣的可以了解一下2021-08-08
本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
最近筆者在開發(fā)個人博客的后臺管理系統(tǒng),里面用到了圖片上傳相關(guān)的功能,在這里記錄并分享一下,希望可以幫到大家,話不多說直接開始吧,感興趣的朋友可以參考下2024-01-01
React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Immutable 可以給 React 應(yīng)用帶來數(shù)十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發(fā)明，因為同期 React 太火，它的光芒被掩蓋了。這篇文章主要介紹了Immutable及 React 中的實踐,需要的朋友可以參考下2018-03-03