适用于vue3的vant4组件 没有日期时间选择器

项目中需要用到日期和时间一同选择的场景
本来想用 如下代码 van-datetime-picker 发现咋整也不好使 刚开始还以为是引入的问题 后来发现是vant4根本就没这玩应了…

<van-datetime-picker
  v-model="currentDate"
  type="datetime"
  title="选择完整时间"
  :min-date="minDate"
  :max-date="maxDate"
/>

在这里插入图片描述
官网文档vant4的DatePicker是没有的
在这里插入图片描述
vant2才有

后来没招了 把日期和时间分开写了

      	<van-field
         	v-model="date"
           is-link
           name="日期"
           label="日期"
           placeholder="请选择日期"
           @click="showDatePopup = true"
         />
         <van-popup v-model:show="showDatePopup" round position="bottom">
           <van-date-picker v-model="currentDate" type="datetime" title="选择日期" @confirm="onDateConfirm" />
         </van-popup>

         <van-field
            v-model="time"
            is-link
            name="时间"
            label="时间"
            placeholder="请选择时间"
            @click="showTimePopup = true"
          />
          <van-popup v-model:show="showTimePopup" round position="bottom">
            <van-time-picker v-model="currentTime" title="选择时间" @confirm="onTimeConfirm" />
          </van-popup>
data() {
    return {     
      showDatePopup: false,
      showTimePopup: false,    
        
      date: '',
      time: '',

      currentDate: [],
      currentTime: [],
    }
  },
	onDateConfirm() {
      this.showDatePopup = false
      this.date = this.currentDate[0] + '-' + this.currentDate[1] + '-' + this.currentDate[2]
    },

    onTimeConfirm() {
      this.showTimePopup = false
      this.time = this.currentTime[0] + ':' + this.currentTime[1]
    },

最后提交的时候 将日期和时间拼接 补00

	obj.realityTime = this.date + ' ' + this.time + '00'

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构之排序一

目录 1.排序 一.概念及其分类 二.排序的稳定性 2.插入排序 一.基本思想 二.插入排序的实现 复杂度 稳定性的分析 3.希尔排序 一.预排序代码的实现 二.希尔排序代码实现 复杂度分析 4.clock函数 1.排序 一.概念及其分类 说到排序&#xff0c;我们都不陌生&#x…

向上生长

&#xff08;1&#xff09; 我记得2010年&#xff0c;在中国的苹果应用商店里&#xff0c;充斥的App还有很多&#xff1a;日历App、天气App、电池省电App、记事本App…。但这已经过去了2007-2008-2009三年&#xff0c;这些应用仍然很欢。 我有一个朋友算是中国最早一批开发iOS …

vue.js+element-ui的基础表单

遇到原生的html小型单页应用时&#xff0c;是脱离了vue框架&#xff0c;而我们又想使用vue的语法和element的组件加快我们的开发速度&#xff0c;这个时候就需要引用他们的js了。技术栈即htmlvue.jselement-ui。而使用它们的方法也很简单&#xff0c;引入对应的js和css文件即可…

博世力士乐发布在线配置液压系统3D CAD目录

博世力士乐自1795从美因河畔洛尔的一个铸铁铸造厂到20世纪50年代进入液压市场&#xff0c;2001年&#xff0c;曼内斯曼力士乐与博世自动化的合并&#xff0c;推动了驱动与控制解决方案的所有相关技术无缝集成的新水平。如今博世力士乐独特的行业专业知识已成为量身定制解决方案…

手上积累了一些企业目录,但是没有电话,在企XX天X查也没找到咋办?如何快速精准批量查询其他平台上查不到的企业电话?

在B端业务场景中&#xff0c;长期需要进行拓客。有时候是企业提供客户的联系方式&#xff0c;有时候是销售利用自己的人脉资源&#xff0c;对于资源不多的销售就需要查找到目标客户的联系方式。长期来说&#xff0c;销售都需要进行拓客&#xff0c;自己通过社交&#xff0c;网络…

下载 macOS 系统安装程序的方法

阅读信息&#xff1a; 版本&#xff1a;0.4.20231021 难度&#xff1a;1/10 到 4/10 阅读时间&#xff1a;5 分钟 适合操作系统&#xff1a;10.13, 10.14, 10.15, 11.x, 12.x&#xff0c;13.x, 14 更新2023-10-21 添加Mist的介绍支持版本的更新&#xff0c;13.x&#xff0…

Xilinx FPGA 远程升级时bin和bit文件使用注意

以Spartan-6 ISE开发环境为例。 ISE开发环境支持生成bit和bin格式的程序文件&#xff0c;可以在生成选项进行配置&#xff1a; 把生成的bit文件和bin文件进行二进制比较&#xff0c;发现bit比bin文件头部多了一些内容&#xff08;头部信息&#xff09;&#xff0c;剩余部分完…

web前端笔记+表单练习题+五彩导航栏练习题

web前端笔记 1-骨架快捷方式!enter<!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>骨架部分</titl…

mysql 事务基本介绍

目录 命令小结 一 MySQL事务的概念 &#xff08;一&#xff09;事务介绍 &#xff08;二&#xff09;事务特点 &#xff08;三&#xff09;事务的ACID特点 1&#xff0c;原子性 1.1 原子性具体形容 1.2 原子性案例 2 &#xff0c;一致性 2.1一致性具体介绍 2.2…

Cubemx串口配置

1.时钟 2.引脚配置 3.重写printf代码 /* USER CODE BEGIN 1 */ int __io_putchar(int ch){HAL_UART_Transmit(&huart1,(uint8_t *) ch, 1,1000);return ch; } /* USER CODE END 1 */

JavaEE 初阶篇-深入了解进程与线程(常见的面试题:进程与线程的区别)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 进程概述 2.0 线程概述 2.1 多线程概述 3.0 常见的面试题&#xff1a;谈谈进程与线程的区别 4.0 Java 实现多线程的常见方法 4.1 实现多线程方法 - 继承 Thread 类…

含“AI”量上涨,智能模组SC208系列助力智慧零售全场景高质发展

AI正重塑智慧零售产业&#xff0c;加速零售在采购、生产、供应链、销售、服务等方面改善运营效率和用户体验。零售行业经历了从线下到线上再到全渠道融合发展过程&#xff0c;“提质、降本、增效、高体验”是亘古不变的商业化与智能化方向。含“AI”量逐渐上涨的智慧零售正经历…

【Pt】新建项目时的设置

新建项目时需要在如下界面做一些设置。 一、模板与文件 模板通常选择“PBR - Metallic Roughness Alpha-blend” 文件可以选择fbx&#xff0c;abc&#xff0c;obj等格式的三维模型文件 二、项目设置 2.1 文件分辨率 指的是在软件中的预览效果&#xff0c;分辨率越高预览效果…

RUST egui体验

egui官方提供了web版的demo&#xff0c;效果还是很不错的&#xff0c;就是用的时候有点一头雾水&#xff0c;没有找到明确的指导怎么把这些组件插入到自己的application或者web。花了一天时间撸了一遍流程&#xff0c;记录一下&#xff0c;说不定以后能用到呢 >_< efram…

Redis学习二--常见问题及处理

基本概念 Redis基本概念数据结构 机制 持久化机制&#xff1a; RDB(内存快照)&#xff1a;某一时刻的内存快照以二进制的方式写入磁盘&#xff0c;可以手动触发和自动触发。 优点&#xff1a;生成文件小&#xff0c;恢复速度快&#xff0c;适用于灾难恢复。 缺点&#xff1a…

如何与施耐德Schneider建立EDI连接?

EDI基础知识 何为EDI&#xff1f;是一个软件、系统还是一种流程呢&#xff1f;准确来说&#xff0c;EDI全称Electronic Data Interchange&#xff0c;中文名称是电子数据交换&#xff0c;也被称为“无纸化贸易”。EDI是&#xff1a; 标准化的数据格式连接业务系统间的数据桥梁…

Verilog刷题笔记40

题目&#xff1a; For the following Karnaugh map, give the circuit implementation using one 4-to-1 multiplexer and as many 2-to-1 multiplexers as required, but using as few as possible. You are not allowed to use any other logic gate and you must use a and …

vite脚手架生成vue项目及其配置

认识脚手架 脚手架就是为了快速生成可复用代码的工具&#xff0c;帮你配置好开发过程中要用到的工具和环境&#xff0c;更快更方便地做开发写业务 vite和cli脚手架区别 可参考博主文章&#xff1a; Vue脚手架&#xff08;cli和vite详解&#xff09;_vite和vuecli-CSDN博客 …

JVM的知识

什么是JVM 1.JVM&#xff1a; JVM其实就是运行在 操作系统之上的一个特殊的软件。 2.JVM的内部结构&#xff1a; &#xff08;1&#xff09;因为栈会将执行的程序弹出栈。 &#xff08;2&#xff09;垃圾99%的都是在堆和方法区中产生的。 类加载器&#xff1a;加载class文件。…

花生壳 | ubuntu安装和卸载花生壳

一、到花生壳官网下载linux版本的花生壳 一般下载到Downlaods文件夹 进入文件夹 dpkg -i phddns_5_1_amd64.deb #安装花生壳 dpkg -r phddns #卸载花生壳 登录花生壳管理网站 http://b.oray.com 在Ubuntu中输入命令查看sn码&#xff0c;默认密码为admin phddns status …