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;
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。