移动端 van-datetime-picker 组件不支持选择秒，自己写组件支持选择 “年月日时分秒”

news2024/10/6 14:30:42

需求

使用 van-datetime-picker 组件写时间选择时，不支持选择 “秒” 在这里插入图片描述

要求能够选择精确到秒

代码

封装组件 TimePicker

<template>
  <div>
    <!-- 弹出层 -->
    <van-popup get-container="body" v-model="isPicker" position="bottom" @close="confirmOn">
      <!-- 时间选择 -->
      <van-picker
        ref="pickerRef"
        show-toolbar
        title="请选择时间"
        :columns="columns"
        @change="onChange"
        @cancel="cancelOn"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import _ from 'lodash.clonedeep'
const currentYear = new Date().getFullYear()
const currentMonth = new Date().getMonth() + 1
const currentDate = new Date().getDate()
const currentHour = new Date().getHours()
const currentMinute = new Date().getMinutes()
const currentSecond = new Date().getSeconds()

export default {
  name: 'TimePicker',
  props: ['showPicker', 'values', 'maxDate'],
  data() {
    return {
      isPicker: false, // 是否显示弹出层
      columns: [], // 所有时间
      Mdays: '', // 弹窗关闭时月份所在值
      Dindex: null
    }
  },
  watch: {
    isPicker(val) {
      !val && this.$emit('changeValue')
      this.columns = []
      this.getcolumns()
    },
    showPicker(val) {
      this.isPicker = val
    },
    values(val) {
      if (val === '') {
        this.Mdays = ''
        this.Dindex = null
      }
    }
  },
  methods: {
    getCountDays(year, month) {
      // 获取某年某月多少天
      var day = new Date(year, month, 0)
      return day.getDate()
    },
    getcolumns() {
      var strtime = this.values
      console.log('strtime----', strtime)
      var date = new Date(strtime)
      var vmoduletime = date.getTime()
      var vmoduledate = null
      if (this.values !== '') {
        vmoduledate = new Date(vmoduletime)
      } else {
        vmoduledate = new Date() // 没有传入时间则默认当前时刻
      }
      var Y = vmoduledate.getFullYear()
      var M = vmoduledate.getMonth()
      var D = vmoduledate.getDate()
      var h = vmoduledate.getHours()
      var m = vmoduledate.getMinutes()
      var s = vmoduledate.getSeconds()
      /** ** 获取最大可选时间前十年数组 ****/
      var year = {}
      year.values = []
      var Currentday = this.maxDate.getFullYear()
      for (var i = Currentday - 10; i <= Currentday; i++) {
        year.values.push(i + '年')
      }
      year.defaultIndex = year.values.indexOf(Y + '年') // 设置默认选项当前年
      this.columns.push(year)

      /** ** 获取当前时间 “月” 数组 currentMonth ****/
      var month = {}
      month.defaultIndex = M
      month.values = Object.keys(Array.apply(null, { length: currentMonth + 1 })).map(item => {
        if (+item + 1 <= 10) {
          return '0' + item + '月'
        } else if (+item + 1 === 11) {
          return +item + '月'
        } else {
          return (+item + 0).toString() + '月'
        }
      })
      month.values.splice(0, 1)
      this.columns.push(month)

      /** ** 获取当前 “日” 数组 currentDate ****/
      var day = {}
      day.defaultIndex = this.Dindex === null ? D - 1 : this.Dindex
      day.values = Object.keys(Array.apply(null, { length: currentDate + 1 })).map(item => {
        if (+item + 1 <= 10) {
          return '0' + item + '日'
        } else if (+item + 1 === 11) {
          return +item + '日'
        } else {
          return (+item + 0).toString() + '日'
        }
      })
      day.values.splice(0, 1)
      this.columns.push(day)

      /** ** 获取当前 “时” 数组 currentHour ****/
      var hour = {} // 创建小时数组
      hour.defaultIndex = h
      hour.values = Object.keys(Array.apply(null, { length: currentHour + 1 })).map(item => {
        if (+item + 1 <= 10) {
          return '0' + item + '时'
        } else if (+item + 1 === 11) {
          return +item + '时'
        } else {
          return (+item + 0).toString() + '时'
        }
      })
      this.columns.push(hour)

      /** ** 获取当前 “分” 数组 currentMinute ****/
      var mi = {}
      mi.defaultIndex = m
      mi.values = Object.keys(Array.apply(null, { length: currentMinute + 1 })).map(item => {
        if (+item + 1 <= 10) {
          return '0' + item + '分'
        } else if (+item + 1 === 11) {
          return +item + '分'
        } else {
          return (+item + 0).toString() + '分'
        }
      })
      this.columns.push(mi)

      /** ** 获取当前 “秒” 数组 currentSecond ****/
      var ss = {}
      ss.defaultIndex = s
      ss.values = Object.keys(Array.apply(null, { length: currentSecond + 1 })).map(item => {
        if (+item + 1 <= 10) {
          return '0' + item + '秒'
        } else if (+item + 1 === 11) {
          return +item + '秒'
        } else {
          return (+item + 0).toString() + '秒'
        }
      })
      this.columns.push(ss)
    },
    onChange(values, a) {
      /** ** 判断是当前年 - 限制月最大只能是当前月 ****/
      if (a[0].indexOf(currentYear) !== -1) {
        console.log('"当前年"----', '当前年')
        this.resetHandler(a, currentMonth, 1, '月')
      } else {
        this.resetHandler(a, 12, 1, '月')
      }
      /** ** 判断是当前月 - 限制日最大只能是当前日 ****/
      if (a[0].indexOf(currentYear) !== -1 && a[1].indexOf(currentMonth) !== -1) {
        console.log('"当前月"----', '当前月')
        this.resetHandler(a, currentDate, 2, '日')
      } else {
        var days = this.getCountDays(currentYear, a[1].slice(0, 2))
        this.resetHandler(a, days, 2, '日')
      }
      /** ** 判断是当前日 - 限制时最大只能是当前时 ****/
      if (a[0].indexOf(currentYear) !== -1 && a[1].indexOf(currentMonth) !== -1 && a[2].indexOf(currentDate) !== -1) {
        console.log('"当前日"----', '当前日')
        this.resetHandler(a, currentHour, 3, '时')
      } else {
        this.resetHandler(a, 24, 3, '时')
      }
      /** ** 判断是当前时 - 限制分最大只能是当前分 ****/
      if (
        a[0].indexOf(currentYear) !== -1 &&
        a[1].indexOf(currentMonth) !== -1 &&
        a[2].indexOf(currentDate) !== -1 &&
        a[3].indexOf(currentHour) !== -1
      ) {
        console.log('"当前时"----', '当前时')
        this.resetHandler(a, currentMinute, 4, '分')
      } else {
        this.resetHandler(a, 59, 4, '分')
      }
      /** ** 判断是当前分 - 限制秒最大只能是当前秒 ****/
      if (
        a[0].indexOf(currentYear) !== -1 &&
        a[1].indexOf(currentMonth) !== -1 &&
        a[2].indexOf(currentDate) !== -1 &&
        a[3].indexOf(currentHour) !== -1 &&
        a[4].indexOf(currentMinute) !== -1
      ) {
        console.log('"当前分"----', '当前分')
        this.resetHandler(a, currentSecond, 5, '秒')
      } else {
        this.resetHandler(a, 59, 5, '秒')
      }
    },
    // 重新设置 月、日、时、分、秒
    resetHandler(currentTimeList, setLength, setIndex, unit) {
      var newData = {} // 获取 setLength 即将设置长度数组
      newData.values = Object.keys(Array.apply(null, { length: setLength + 1 })).map(item => {
        if (+item + 1 <= 10) {
          return '0' + item + unit
        } else if (+item + 1 === 11) {
          return +item + unit
        } else {
          return (+item + 0).toString() + unit
        }
      })
      newData.values.splice(0, 1)
      this.$refs.pickerRef.setColumnValues(setIndex, _(newData.values)) // 设置第 setIndex 列的值
      this.$refs.pickerRef.setColumnIndex(setIndex, currentTimeList[setIndex].substr(0, 2) - 1) // 设置第 setIndex 列索引
    },
    // 关闭弹框
    confirmOn() {
      var currentM = this.$refs.pickerRef.getColumnValue(1)
      this.Mdays = currentM.substr(0, 2)
      this.Dindex = this.$refs.pickerRef.getColumnIndex(2)
    },
    // 时间选择器关闭
    cancelOn() {
      this.$emit('changeValue')
    },
    // 时间选择器确定
    onConfirm(val, index) {
      var endval =
        val[0].substr(0, 4) +
        '-' +
        val[1].substr(0, 2) +
        '-' +
        val[2].substr(0, 2) +
        ' ' +
        val[3].substr(0, 2) +
        ':' +
        val[4].substr(0, 2) +
        ':' +
        val[5].substr(0, 2)
      this.$emit('changeValue', endval)
      this.$emit('confirm', endval)
    }
  }
}
</script>

组件使用

<template>
	<!-- <van-popup v-model="isShowTimePicker" position="bottom">
	  <van-datetime-picker
	    type="datetime"
	    title="选择时间"
	    v-model="datePickerCurrentTime"
	    :max-date="maxDate"
	    @confirm="onConfirmTime"
	    @cancel="isShowTimePicker = false"
	  />
	</van-popup> -->
	<timePicker
	  ref="popup"
	  :max-date="maxDate"
	  :values="datePickerCurrentTime"
	  :showPicker="isShowTimePicker"
	  @changeValue="isShowTimePicker = false"
	  @confirm="onConfirmTime"
	/>
</template>

<script>
export default {
  data() {
  	return {
	  maxDate: new Date(),
	  datePickerCurrentTime: new Date(), // 时间选择器当前选值，默认是当前时间
	  isShowTimePicker: false,
  	}
  },
  methods: {
    onConfirmTime(val) {
	  ...
	  this.isShowTimePicker = false
	},
  }
}
</script>

效果展示

在这里插入图片描述

参考：https://blog.csdn.net/shids_/article/details/129492814
自己改了下：限制最大可选择时间

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/742891.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

实时数仓-DWS层

实时数仓-DWS层

理论依据&#xff1a;指标体系 如果表有相似&#xff0c;可以抽取成一张表 轻度聚合&#xff1a;比如聚合10秒的先放到DWS&#xff0c;这样ADS在计算的时候&#xff0c;会更快
阅读更多...
计讯物联5G工业路由器加速赋能公交车监控系统解决方案智能升级

计讯物联5G工业路由器加速赋能公交车监控系统解决方案智能升级

一、方案概述 为提升公交车智能化管理水平为目的&#xff0c;保障公交车营运人员和乘客的安全&#xff0c;计讯物联以公交车智能调度营运为核心&#xff0c;推出计讯物联5G公交车一站式解决方案&#xff0c;通过构建感知层、传输层、设备层、应用层四层架构&#xff0c;通过感…
阅读更多...
将名为“普通高等学校本科专业目录.pdf”的pdf文件转换成csv文件

将名为“普通高等学校本科专业目录.pdf”的pdf文件转换成csv文件

文章目录 任务描述2023年普通高等学校本科专业目录pdf链接代码代码解析运行截图 任务描述 将名为“普通高等学校本科专业目录.pdf”的pdf文件转换成csv文件。这个pdf每页是个表格&#xff0c;表格有7列。 下面是pdf的第一页和第二页&#xff1a; 2023年普通高等学校本科专业…
阅读更多...
10.3.2 【Linux】历史命令：history

10.3.2 【Linux】历史命令：history

[dmtsaistudy ~]$ alias hhistory 在正常的情况下&#xff0c;历史命令的读取与记录是这样的&#xff1a; 当我们以 bash 登陆 Linux 主机之后&#xff0c;系统会主动的由主文件夹的 ~/.bash_history 读取以前曾经下过的指令&#xff0c;那么 ~/.bash_history 会记录几笔数据呢…
阅读更多...
microblaze生成download.bit 报错：Program FPGA failed Reason： couldn‘t open......

microblaze生成download.bit 报错：Program FPGA failed Reason： couldn‘t open......

报错信息&#xff1a; couldn’t open “E:/Xilinx_Project/……/……/…….sdk/top_wrapper_hw_platform_0/download.bit”: no such file or directory [Updatemem 57-153] Failed to update the BRAM INIT strings for E:\Xilinx_Project\……\……\…….sdk\……\Debug\……
阅读更多...
基于vue的地方美食分享网站(spring boot)

基于vue的地方美食分享网站(spring boot)

本项目在开发和设计过程中涉及到原理和技术有&#xff1a;B/S、java技术和MySQL数据库等等。开发步骤如下&#xff1a; 绪论&#xff1b;剖析项目背景&#xff0c;说明研究的内容。 开发技术&#xff1b;系统主要使用了java技术&#xff0c;b/s模式和myspl数据库.
阅读更多...
react-基础-01

react-基础-01

vue tutorial 上的小demo 改用react 写法 属性绑定 <div className{xx}></div>事件绑定 import React, { useState } from react;export function App(props) {const [count, setCount] useState(0)function add() {setCount(count 1)}return (<div classN…
阅读更多...
Broadcast 广播使用详解

Broadcast 广播使用详解

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、Broadcast概述二、Broadcast的注册三、Broadcast的注册类型四、静态注册开机广播的实现五、动态监听亮灭屏幕广播实现六、广播的发送方法七、参考文…
阅读更多...
【Hello mysql】 mysql的内置函数

【Hello mysql】 mysql的内置函数

Mysql专栏&#xff1a;Mysql 本篇博客简介&#xff1a;介绍mysql的基内置函数 mysql的内置函数 日期函数获取年月日获取时分秒获取时间戳在日期的基础上加上日期在日期的基础上减去日期计算两个日期之差创建一张表 记录生日创建一个留言表 字符串函数获取emp表的ename列的字符集…
阅读更多...
arm学习stm32芯片学习方波启动蜂鸣器，马达，风扇

arm学习stm32芯片学习方波启动蜂鸣器，马达，风扇

main.c #include "pwm.h" extern void printf(const char *fmt, ...); void delay_ms(int ms) {int i,j;for(i 0; i < ms;i)for (j 0; j < 1800; j); } int main() {//蜂鸣器初始化hal_pwm_beep_init1();//马达hal_pwm_motor_init1();//风扇hal_pwm_blower_…
阅读更多...
MySQL 06 :多表查询

MySQL 06 :多表查询

MySQL 05 :多表查询 加where过滤 老韩分析 1。雇员名&#xff0c;雇员工资来自emp表 2。部门的名字来自dept表 3。 需求对emp和dept查询 ename&#xff0c;sal&#xff0c;dname&#xff0c;deptno 4。 当我们需要指定显示某个表的列是&#xff0c;需要表&#xff0c; 说明 …
阅读更多...
视频的特效效果是怎么加的？可以批量添加吗

视频的特效效果是怎么加的？可以批量添加吗

经常逛自媒体平台的小伙伴不难发现&#xff0c;要想原创的短视频更有创造性&#xff0c;内容更丰富&#xff0c;给视频添加特效效果算是比较常用的一个方法了。今天小编要分享的可不只是单一地给视频添加特效这么简单&#xff0c;我要给大家分享如何才能快速地批量给视频素材添…
阅读更多...
Linux 学习记录46(QT篇)

Linux 学习记录46(QT篇)

Linux 学习记录46(QT篇) 本文目录 Linux 学习记录46(QT篇)一、建立QT项目工程二、Assistant帮助文档的使用三、自动生成的文件介绍1. tempprj.pro2. mainwindow.h3. mainwindow.cpp4. main.cpp5. mainwindow.ui 四、常用类的介绍1. 信息调试类(1. qDebug(2. 输出当前界面尺寸(3…
阅读更多...
stm32(DMA)

stm32(DMA)

DMA介绍 什么是DMA&#xff1f; 令人头秃的描述&#xff1a; DMA(Direct Memory Access&#xff0c;直接存储器访问) 提供在外设与内存、存储器和存储器、外设 与外设之间的高速数据传输使用。它允许不同速度的硬件装置来沟通&#xff0c;而不需要依赖于 CPU&#xff0c;在这…
阅读更多...
解决Anaconda第三方库下载慢

解决Anaconda第三方库下载慢

1.打开Anconda Prompt&#xff0c;进入后台 2.执行命令第一个是添加一个清华镜像&#xff0c;第二个设置在 conda 显示通道的 URL。 &#xff08;1&#xff09;conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ &#xff08;2&#xff0…
阅读更多...
无线振动传感器之利：实现设备远程监控和管理

无线振动传感器之利：实现设备远程监控和管理

在现代工业生产中&#xff0c;设备的远程监控和管理对于提高生产效率和降低成本至关重要。而无线振动传感器作为一种先进的监测技术&#xff0c;能够快速实现设备的远程监控&#xff0c;提供实时的振动数据和设备健康状况&#xff0c;为企业的运维管理带来了许多优势。本文将介…
阅读更多...
第十九章：Linux中安装MySQL

第十九章：Linux中安装MySQL

第十九章&#xff1a;Linux中安装MySQL 19.1&#xff1a;卸载MySQL 查看是否安装过MySQL # 如果你是用rpm安装&#xff0c;检查一下RPM PACKAGE rpm -qa | grep -i mysql # 检查 mysql service systemctl status mysqld.service # CentOS6和CentOS7在MySQL的使用中的区别 # 防…
阅读更多...
React-Native学习，RN的容器Flex-Box布局

React-Native学习，RN的容器Flex-Box布局

justify-content&#xff08;在RN中属性名称为&#xff1a;justifyContent&#xff09;在主轴上对齐方式 align-items&#xff08;在RN中属性名称为&#xff1a;alignItems&#xff09;在交叉轴上的对齐方式 在React Native中&#xff0c;当没有设置容器的主轴方向时&#xf…
阅读更多...
Web-文件上传

Web-文件上传

需求 新增员工和修改员工的需求会需要上传对应的图像 先实现对应的新增需求吧 &#xff01;&#xff01;&#xff01;RequestBody,因为传参是json格式&#xff0c;还是看对应接口文档&#xff01;&#xff01;&#xff01; controller service mapper xml 对应代码 &…
阅读更多...
Jstat命令解析

Jstat命令解析

Jstat命令解析 Jstat是JDK自带的一个轻量级小工具。全称“Java Virtual Machine statistics monitoring tool”&#xff0c;它位于java的bin目录下&#xff0c;主要利用JVM内建的指令对Java应用程序的资源和性能进行实时的命令行的监控&#xff0c;包括了对Heap size和垃圾回收…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023