3c7b4b61be1683ff313c77ad16dcfd5.png

ccfdb055a44eb1bf1a1f3178462a23a.png

實現(xiàn)這個功能我找了好久沒找到合適的方法锡搜，最后我只能操作DOM了
下面是我寫的 可直接粘貼使用蚌父，寫法有點老套拿穴，可以自己把公共的方法或變量進行封裝或統(tǒng)一
包括紅線標記的時間乌妙，都做過處理

1. 事先封裝好一個日期插件,內(nèi)容如下：

<template>
  <div class="dom_calendar">
    <el-date-picker
      class="datePicker"
      v-model="datePicker"
      type="datetime"
      :clearable="false"
      placeholder="選擇日期時間"
      format="YYYY-MM-DD HH:mm"
      @blur="changeTime"
    >
      <template #defulte="scope">
        {{ scope }}
      </template>
    </el-date-picker>
  </div>
</template>

<script lang="ts">
import { ref, getCurrentInstance, watch, onMounted, reactive } from "vue";
import GetLunarDay from "../../views/common/navCal.js";
import { getTimes } from "/@/views/common/index";
export default {
  name: "date-picker",
  props:{yarnTime:{}},
  setup(props) {
    const { proxy } = getCurrentInstance();
    // 時間 值
    const datePicker = ref("");
    datePicker.value = getTimes("", "YYYY-MM-DD hh:mm:ss");
    // 是否開啟農(nóng)歷
    const onOff = ref(false);
    const domBtn = ref('');

    watch(
      ()=> props.yarnTime,
      (val) =>{
        datePicker.value = val
      }
    )
    const changeTime = () => {
      proxy.$emit("blur");
    };

    watch(datePicker, (val) => {
      proxy.$emit("yarnTimeFn", val);
    });

    const times = reactive({
      year: "",
      monthe: "",
      day: "",
    });
    onMounted(() => {
      let footerBtn = document.querySelector(".el-picker-panel__footer");
      domBtn.value = document.createElement("button");
      domBtn.value.innerHTML = onOff.value ? "農(nóng)歷: 開" : "農(nóng)歷: 關";
      domBtn.value.className = "el-button el-button--text el-button--mini el-picker-panel__link-btn";
      footerBtn.insertBefore(domBtn.value,footerBtn.firstChild);
      domBtn.value.onclick = function () {
        onOff.value = !onOff.value;
        domBtn.value.innerHTML = onOff.value ? "農(nóng)歷: 開" : "農(nóng)歷: 關";
        loadDom()
      };

      loadDom()
      // 上一年 上一月 下一年  下一月
      let headerBtn = document.querySelectorAll(".el-date-picker__header button");
      let headerSpan = document.querySelectorAll(".el-date-picker__header span");
      headerBtn[0].onclick = function () {
        loadDom();
      };
      headerBtn[1].onclick = function () {
        loadDom();
      };
      headerBtn[2].onclick = function () {
        loadDom();
      };
      headerBtn[3].onclick = function () {
        loadDom();
      };
      headerSpan[0].onclick = function () {
        onOff.value = false
        loadDom();
      };
      headerSpan[1].onclick = function () {
        onOff.value = false
        loadDom();
      };
    });

    // 加載Dom
    function loadDom(){
      if(onOff.value){
        Dom()
      }else{
        oFF()
      }
    }

    function oFF(){
      let divLabel = document.querySelectorAll(".el-date-table .el-date-table__row td div span label");
      let divSpan = document.querySelectorAll(".el-date-table .el-date-table__row td div span");
      domBtn.value.innerHTML = onOff.value ? "農(nóng)歷: 開" : "農(nóng)歷: 關";
      for (let i = 0; i < divSpan.length; i++) {
        divSpan[i].style.width = "25px";
        divSpan[i].style.height = "25px";
        divSpan[i].style.borderRadius = "50%";
        divLabel[i] && divLabel[i].remove()
      }
    }

    function Dom() {
      let year = document.querySelectorAll(".el-date-picker__header span");
      let tdDiv = document.querySelectorAll(".el-date-table .el-date-table__row td");

      // 獲取 頭部 年月
      for (let i = 0; i < year.length; i++) {
        if (i == 0) {
          times.year = year[i].innerHTML.split(" ")[0];
        } else if (i == 1) {
          times.monthe = year[i].innerHTML.split(" ")[0];
        }
      }

      // 點擊月的時候
      let tdMo = document.querySelectorAll(".el-month-table tbody tr td div");
      for (let i = 0; i < tdMo.length; i++) {
        tdMo[i].onclick = function () {
          loadDom();
        };
      }
      let divSpan = document.querySelectorAll(".el-date-table .el-date-table__row td div span");
      // 在 每天 添加 一個標簽
      for (let i = 0; i < divSpan.length; i++) {
        let createSpan = document.createElement("label");
        createSpan.style.display = "block";
        createSpan.style.marginTop = "-10px";
        createSpan.style.fontSize = "10px";
        divSpan[i].appendChild(createSpan);
      }
      let divLabel = document.querySelectorAll(".el-date-table .el-date-table__row td div span label");
      for (let i = 0; i < tdDiv.length; i++) {
        times.day = divSpan[i].firstChild.nodeValue;
        let navCal = GetLunarDay(times.year, times.monthe, times.day).split("月")[1];

        if (navCal == "初一") {
          navCal = GetLunarDay(times.year, times.monthe, times.day).split("月")[0].split(" ")[1] + "月";
        }
        divSpan[i].style.width = "40px";
        divSpan[i].style.height = "40px";
        divSpan[i].style.borderRadius = "4px";
        divSpan[i].style.display = "block";
        divLabel[i].innerHTML = navCal;
      }
    }

    return { datePicker, changeTime, onOff };
  },
};
</script>

2. 還需要 GetLunarDay 方法去拿到 農(nóng)歷 這個方法是在網(wǎng)上找的內(nèi)容如下：

let str = ''
let today = new Date();

// function initArray() {
//  console.log(this , initArray.arguments)
//  this.length = initArray.arguments.length
//  for (var i = 0; i < this.length; i++)
//      this[i + 1] = initArray.arguments[i]
// }
// let d = new initArray(
//  "星期日",
//  "星期一",
//  "星期二",
//  "星期三",
//  "星期四",
//  "星期五",
//  "星期六");
// str = today.getFullYear(), "年", today.getMonth() + 1, "月", today.getDate(), "日 ", d[today.getDay() + 1], " ";
let calendar = new Date();
let month = calendar.getMonth();
let date = calendar.getDate();
if ((month == 0) && (date == 1)) str = "元旦";
if ((month == 2) && (date == 12)) str = "植樹節(jié)";
if ((month == 3) && (date == 5)) str = "清明節(jié)";
if ((month == 4) && (date == 1)) str = "國際勞動節(jié)";
if ((month == 4) && (date == 4)) str = "青年節(jié)";
if ((month == 5) && (date == 1)) str = "國際兒童節(jié)";
if ((month == 7) && (date == 1)) str = "建軍節(jié)";
if ((month == 7) && (date == 16)) str = "七夕情人節(jié)";
if ((month == 9) && (date == 1)) str = "國慶節(jié)/國際音樂節(jié)/國際老人節(jié)";
if ((month == 11) && (date == 24)) str = "平安夜";
if ((month == 11) && (date == 25)) str = "圣誕節(jié)";
/*農(nóng)歷部分*/
var CalendarData = new Array(100);
var madd = new Array(12);
var tgString = "甲乙丙丁戊己庚辛壬癸";
var dzString = "子丑寅卯辰巳午未申酉戌亥";
var numString = "一二三四五六七八九十";
var monString = "正二三四五六七八九十冬臘";
var weekString = "日一二三四五六";
var sx = "鼠牛虎兔龍蛇馬羊猴雞狗豬";
var cYear, cMonth, cDay, TheDate;
CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5,
    0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B,
    0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6,
    0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54,
    0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B,
    0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D,
    0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
madd[0] = 0;
madd[1] = 31;
madd[2] = 59;
madd[3] = 90;
madd[4] = 120;
madd[5] = 151;
madd[6] = 181;
madd[7] = 212;
madd[8] = 243;
madd[9] = 273;
madd[10] = 304;
madd[11] = 334;

function GetBit(m, n) {
    return (m >> n) & 1;
}

function e2c() {
    TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
    var total, m, n, k;
    var isEnd = false;
    var tmp = TheDate.getYear();
    if (tmp < 1900) {
        tmp += 1900;
    }
    total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
    if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {
        total++;
    }
    for (m = 0; ; m++) {
        k = (CalendarData[m] < 0xfff) ? 11 : 12;
        for (n = k; n >= 0; n--) {
            if (total <= 29 + GetBit(CalendarData[m], n)) {
                isEnd = true;
                break;
            }
            total = total - 29 - GetBit(CalendarData[m], n);
        }
        if (isEnd) break;
    }
    cYear = 1921 + m;
    cMonth = k - n + 1;
    cDay = total;
    if (k == 12) {
        if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
            cMonth = 1 - cMonth;
        }
        if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
            cMonth--;
        }
    }
}

function GetcDateString() {
    var tmp = "";
    tmp += tgString.charAt((cYear - 4) % 10);
    tmp += dzString.charAt((cYear - 4) % 12);
    tmp += "(";
    tmp += sx.charAt((cYear - 4) % 12);
    tmp += ")年 ";
    if (cMonth < 1) {
        tmp += "(閏)";
        tmp += monString.charAt(-cMonth - 1);
    } else {
        tmp += monString.charAt(cMonth - 1);
    }
    tmp += "月";
    tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));
    if (cDay % 10 != 0 || cDay == 10) {
        tmp += numString.charAt((cDay - 1) % 10);
    }
    return tmp;
}

function GetLunarDay(solarYear, solarMonth, solarDay) {
    //solarYear = solarYear<1900?(1900+solarYear):solarYear;
    if (solarYear < 1921 || solarYear > 2029) {
        return "";
    } else {
        solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
        e2c(solarYear, solarMonth, solarDay - 1);
        return GetcDateString();
    }
}

// var D = new Date();
// var yy = D.getFullYear();
// var mm = D.getMonth() + 1;
// var dd = D.getDate();
// var ww = D.getDay();
// var ss = parseInt(D.getTime() / 1000);
// if (yy < 100) yy = "19" + yy;

// function showCal() {
//  console.log('-------------' , GetLunarDay(yy, mm, dd) )
// }

export default GetLunarDay;

該文章是為了自己做筆記使用靶端，若有侵權谎势，請告知刪除