vue3+vant4封裝日期時間組件方式(年月日時分秒)

更新時間：2023年10月25日 08:48:07 作者：跳跳的小古風(fēng)

這篇文章主要介紹了vue3+vant4封裝日期時間組件方式(年月日時分秒),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3+vant4封裝日期時間組件

vant4目前無法直接使用vant3自帶的年月日時分秒組件，綜合考慮下，決定自己封裝一個！

效果圖

在這里插入圖片描述

代碼片段

核心組件代碼

<template>
  <!-- 彈出層 -->
  <van-popup v-model:show="data.isPicker" position="bottom" round @close="confirmOn">
    <van-picker ref="picker" title="請選擇時間" :columns="data.columns" @change="onChange" @cancel="cancelOn"
      @confirm="onConfirm" v-model="data.selectedValues" />
  </van-popup>
</template>
<script setup>

import { reactive, watch, getCurrentInstance } from "vue";

const customFieldName = {
  text: "value",
  value: "values",
  children: ""
};
const data = reactive({
  isPicker: false, //是否顯示彈出層
  columns: [], //所有時間列
  selectedValues: [] //控件選擇的時間值
});

const props = defineProps({
  // 傳入的顯影狀態(tài)
  showPicker: {
    type: Boolean
  },
  // 傳入的值
  values: {
    type: String
  }
});

//定義要向父組件傳遞的事件
const emit = defineEmits(["changeValue", "confirm"]);


watch(
  () => props.showPicker,
  val => {
    data.isPicker = val;
    data.columns = [];
    getcolumns();
  },
  {
    immediate: true//立即監(jiān)聽--進(jìn)入就會執(zhí)行一次 監(jiān)聽顯影狀態(tài)
  }
);


function onChange() {
  // 無用的方法 
}


function getcolumns() {
  let strtime = props.values; //傳入的時間
  //console.log(strtime); 2023-09-05 19:28:00 
  let date = new Date(strtime.replace(/-/g, "/"));
  // console.log(date); Wed Aug 09 2023 14:53:15 GMT+0800 (中國標(biāo)準(zhǔn)時間) 
  let timeVaules = date.getTime();

  let dateVaules;
  if (props.values != "") {
    dateVaules = new Date(timeVaules);
  } else {
    dateVaules = new Date(); //沒有傳入時間則默認(rèn)當(dāng)前時刻
  }

  let Y = dateVaules.getFullYear();
  let M = dateVaules.getMonth();
  let D = dateVaules.getDate();
  let h = dateVaules.getHours();
  let m = dateVaules.getMinutes();
  let s = dateVaules.getSeconds();

  let year = []; //獲取前后十年數(shù)組
  year.values = [];
  let Currentday = new Date().getFullYear();
  for (let i = Currentday - 10; i < Currentday + 10; i++) {
    year.push({ text: i.toString(), value: i });
  }
  year.defaultIndex = year.values.indexOf(Y); //設(shè)置默認(rèn)選項當(dāng)前年

  // 個位數(shù)補0
  const _M = M < 10 ? `0${M + 1}` : M.toString(); //月份比實際獲取的少1，所以要加1
  const _D = D < 10 ? `0${D}` : D.toString();
  const _h = h < 10 ? `0${h}` : h.toString();
  const _m = m < 10 ? `0${m}` : m.toString();
  const _s = s < 10 ? `0${s}` : s.toString();

  // 生成年月日時分秒時間值
  data.selectedValues.push(Y);
  data.selectedValues.push(_M);
  data.selectedValues.push(_D);
  data.selectedValues.push(_h);
  data.selectedValues.push(_m);
  data.selectedValues.push(_s);

  data.columns.push(year); //生成年列

  let month = []; //獲取12月數(shù)組
  month = Object.keys(Array.apply(null, { length: 13 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: +item, value: +item };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  month.splice(0, 1);
  data.columns.push(month); //生成月列

  //獲取當(dāng)月的天數(shù)
  let days = getCountDays(Y, M + 1);
  let day = []; //創(chuàng)建當(dāng)月天數(shù)數(shù)組
  day = Object.keys(Array.apply(null, { length: days + 1 })).map(function (
    item
  ) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: +item, value: +item };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  day.splice(0, 1);
  data.columns.push(day); //生成日列

  let hour = []; //創(chuàng)建小時數(shù)組
  hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: +item, value: +item };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  data.columns.push(hour); //生成小時列

  let mi = []; //創(chuàng)建分鐘數(shù)組
  mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: +item, value: +item };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  data.columns.push(mi);//生成分鐘列

  let ss = []; //創(chuàng)建秒數(shù)數(shù)組
  ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: +item, value: +item };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  data.columns.push(ss);//生成秒鐘列
}


function getCountDays(year, month) {
  //獲取某年某月多少天
  let day = new Date(year, month, 0);
  return day.getDate();
}

// 關(guān)閉彈框
function confirmOn() {
  emit("changeValue");
}


//時間選擇器關(guān)閉 值不改變并關(guān)閉彈框
function cancelOn({ selectedValues }) {
  confirmOn()
}

// 時間選擇器確定 值改變
function onConfirm({ selectedValues }) {
  let endval =
    selectedValues[0] +
    "-" +
    selectedValues[1] +
    "-" +
    selectedValues[2] +
    " " +
    selectedValues[3] +
    ":" +
    selectedValues[4] +
    ":" +
    selectedValues[5];

  confirmOn()
  emit("confirm", endval);
}
</script>

引入

 
import DataTime from "@/components/datatime/index.vue";
...
const startTime = ref(""); //值定義
const showPicker = ref(false); //彈框顯隱

const onConfirm = selectedValues => {
  //console.log(selectedValues);
  //2023-09-08 19:01:37
  startTime.value = selectedValues;
  showPicker.value = false;
};

 <DataTime
   :values="endTime"
    @changeValue="showPicker = false" //子組件方法
    :showPicker="showPicker"
    @confirm="onConfirm" //子組件方法
  />
  ...