本文实例为大家分享了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'>js[!--empirenews.page--]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 = http://www.cppcns.com/wangluo/javascript/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 [!--empirenews.page--]< 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, (leajavascriptpMonth == 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 = http://www.cppcns.com/wangluo/javascript/this.lunarMonths(year);
    var res = [];
    var temp = 0;
    var yearData = this.lunarInfo[year - this.MIN_YEAR];
    var len = (yeahttp://rData[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 = http://www.cppcns.com/wangluo/javascript/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 = http://www.cppcns.com/wangluo/javascript/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 = http://www.cppcns.com/wangluo/javascript/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;[!--empirenews.page--]

样式文件

#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;
}
#selejsctItem #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:js 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;
}

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