实现vant的年月日时分秒组件

方法:van-datetime-picker(type:datetime)和 van-picker结合实现。

javascript 复制代码
<template>
  <div class="datetimesec-picker">
    <van-datetime-picker
      ref="timePickerRef"
      type="datetime" //年月日时分
      v-model="currentDate"
      :show-toolbar="false"
      :visible-item-count="7"
      @confirm="onTimeConfirm"
    />
    <van-picker
      class="sec-picker"
      :default-index="secondIdx"
      :show-toolbar="false"
      :visible-item-count="7"
      :columns="
        Array(60)
        .fill()
        .map((_, i) => `0${i}`.slice(-2))
       " //秒
      @change="handleSecChange"
    />
  </div>
  <div @click="toggleTimeConfirm">
    <span class="flex justify-center items-center fw-600 text-18px c-#fff">
      下一步
    </span>
  </div>
</template>

<script setup>
import momentMini from 'moment-mini'

const formData = reactive({
  startDate:momentMini(new Date()).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
})
const timePickerRef = ref(null)
const currentDate = ref(
  new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000),
) //默认往前1天
const secondIdx = ref(null) //默认秒数索引
const handleSecChange = (val, idx) => {
  secondIdx.value = idx
}

watch(
  () => formData.startDate,
  nV => {
    secondIdx.value = Number(nV.slice(-2))
  },
  { immediate: true },
)

//点击'下一步'
const toggleTimeConfirm= () => {
  //触发datetime-picker的confirm钩子
  timePickerRef.value.getPicker().confirm()
}
const onTimeConfirm= value => {
  formData.startDate= `${momentMini(new Date(value))
    .format('YYYY-MM-DD HH:mm:ss')
    .slice(0, -2)}${addZero(secondIdx.value)}`
}

// 一位数字前面补零
const addZero = (num) => {
  return num < 10 ? `0${num}` : num;
}
</script>

<style lang="scss" scoped>
.datetimesec-picker {
  display: flex;
  .van-picker:first-of-type {
    flex: 5;
  }
  .van-picker:last-of-type {
    flex: 1;
  }
}
</style>

参考文章:

van-datetimesec-picker - npm

相关推荐
lemonzoey1 分钟前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆10 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W14 分钟前
uniapp全局状态管理实现方案
前端
Vertira15 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
鹏程36 分钟前
局域网下五子棋,html+node.js实现
node.js·html
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟