Vue+Vant 基于DatetimePicker进行二次开发，实现yyyyMMdd hh:mm:ss时间选择

已于 2022-09-26 14:46:07 修改
阅读量2.1k 收藏 5
点赞数
文章标签： vue.js javascript html
于 2021-09-28 15:58:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bueryao527/article/details/120530809
版权

Vue+Vant 基于DatetimePicker进行二次开发，实现yyyyMMdd hh:mm:ss时间选择

1.效果图

在这里插入图片描述

2.前提

vue引入Vant：

vue2.0
npm i vant -S

vue3.0
npm i vant@next -S

main.js 引入Vant

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

3.项目结构

在这里插入图片描述

4.index.vue

<template>
  <div class="time-box">
    <span>开始时间：</span>
    <TimeSelection
    clearValue
    placeholderText="开始时间"
    :inputWidth="230"
    :inputHeight="35"
    :types="types" 
    :nowShowTime="startTime" 
    @change="getTime"
    />
  </div>
</template>
<script>
import TimeSelection from './children/timeSelection.vue'
export default {
  components:{TimeSelection},
  data(){
    return{
      startTime:null,
      types:'date-seconds', //date-seconds(年月日 时分秒)、date-minutes(年月日 时分)、
                            //date-hour(年月日 时)、date(年月日)、year-month(年月)、year(年)
    }
  },
  methods:{
    getTime(val) {
      this.startTime = val
    }
  }
}
</script>
<style scoped>
.time-box{
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
</style>

5.timeSelection.vue

<template>
<div>
  <div class="d-input"
  :style="{'width':inputWidth+'px','height':inputHeight+'px'}"
  >
    <input 
    class="input-left"
    :style="{'width':(clearValue&&seletTime!='')?inputWidthLeft:inputWidth,'height':'100%'}"
    :placeholder="placeholderText" 
    readonly="readonly"
    v-model="seletTime" 
    @click="show"
    />
    <van-icon v-if="(clearValue&&seletTime!='')" name="close" size="15"
    @click="deleteData"
    />
  </div>
  <van-popup
    v-model="isShowTime" position="bottom" :style="{ height: '40%' }">
    <van-datetime-picker
      v-if="isShowYMD"
      v-model="defaultCurrentDate"
      :min-date="minSelectDate"
      :max-date="maxSelectDate"
      :type="types=='date'?'date':
      types=='year-month'?'year-month':
      types=='year'?'year':
      'date'"
      :title="title1"
      @confirm="confirmYMD"
      @cancel="cancelYMD"
    />
    <van-picker
      v-if="isShowHMS"
      show-toolbar
      :title="title2"
      :columns="
      types=='date-seconds'?hourMinuteSecond:
      types=='date-minutes'?hourMinute:
      types=='date-hour'?hour:
      hourMinuteSecond"
      @confirm="confirmHMS"
      @cancel="cancelYMD"
    />
    <van-picker
      v-if="isShowYear"
      show-toolbar
      :title="title3"
      :columns="year"
      @confirm="confirmYear"
      @cancel="cancelYear"
    />
  </van-popup>
</div>
  
</template>

<script>
import util from './util'
export default {
  props:{
    minDate:{
      type:Date,
      default:function(){
        return new Date(2000, 0, 1);
      },
    },
    maxDate:{
      type:Date,
      default:function(){
        return new Date(util.formatDate(new Date(),9));
      },
    },
    currentDate:{
      type:Date,
      default:function(){
        return new Date();
      },
    },
    nowShowTime:{
      type:String,
      default:''
    },
    types:{
      type:String,
      default:"date-seconds"
    },
    inputWidth:{
      type:Number,
      default:200
    },
    inputHeight:{
      type:Number,
      default:40
    },
    placeholderText:{
      type:String,
      default:"时间选择"
    },
    clearValue:{
      type:Boolean,
      default:false,
    },
  },
  data(){
    return{
      inputWidthLeft:'',

      isShowTime:false,
      isShowYMD:false,
      isShowHMS:false,
      isShowYear:false,

      title1:'选择年月日',
      title2:'选择时分秒',
      title3:'选择年',

      minSelectDate:new Date(2000, 0, 1),
      maxSelectDate:new Date(util.formatDate(new Date(),9)),
      defaultCurrentDate:new Date(),

      selectYMD:null,//选择的年月日
      selectHMS:null,//选择的时分秒
      seletTime:'',//最终选择的时间

      hourMinuteSecond:[
         // 第一列
        {
          values: ['00', '01', '02', '03', '04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','21','22','23'],
          defaultIndex:0,
        },
        // 第二列
        {
          values: ['00', '01', '02', '03', '04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59'],
          defaultIndex: 0,
        },
        //第三列
        {
          values: ['00', '01', '02', '03', '04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59'],
          defaultIndex: 0,
        },
      ],//时分秒数据
      hourMinute:[
        // 第一列
        {
          values: ['00', '01', '02', '03', '04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','21','22','23'],
          defaultIndex:0,
        },
        // 第二列
        {
          values: ['00', '01', '02', '03', '04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59'],
          defaultIndex: 0,
        },
      ],//时分数据
      hour:[
        // 第一列
        {
          values: ['00', '01', '02', '03', '04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','21','22','23'],
          defaultIndex:0,
        },
      ],//小时数据
      year:[
        {
          values:[],
          defaultIndex:0
        }
      ]
    }
  },
  watch:{
    minDate:function(val){
      this.minSelectDate = val
    },
    maxDate:function(val) {
      this.maxSelectDate = val
    },
    currentDate:function(val){
      this.defaultCurrentDate = val
    },
    nowShowTime:function(val){
      if(!util.isEmpty(val)){
        this.seletTime = val
        this.defaultCurrentDate = new Date(val)
      }else{
        this.seletTime = ''
        this.defaultCurrentDate = new Date()
      }
    },
    inputWidth:function(val){
      if(!util.isEmpty(val)){
        if(this.inputWidth){
          this.inputWidthLeft = (val-30)+'px'
        }else{
          this.inputWidthLeft = '120px'
        }
      }else{
        this.inputWidthLeft = '120px'
      }
    },
  },
  mounted(){
    if(!util.isEmpty(this.nowShowTime)){
      this.seletTime = this.nowShowTime
      this.defaultCurrentDate = new Date(this.seletTime)
    }else{
      this.seletTime = ''
      this.defaultCurrentDate = new Date()
    }

    this.setYearList()
    if(!util.isEmpty(this.inputWidth)){
      this.inputWidthLeft = (this.inputWidth-30)+'px'
    }else{
      this.inputWidthLeft = '120px'
    }
  },
  methods:{
    //是否显示时间选择弹窗
    show(){
      this.isShowTime = true
      if(this.types == 'year') {
        this.isShowYMD = false
        this.isShowHMS = false
        this.isShowYear = true
        this.setYear()
        this.title1 = '选择年月日'
        this.title2 = '选择时分秒'
      }else{
        this.isShowYMD = true
        this.isShowHMS = false
        this.isShowYear = false
        if(this.types == 'date-seconds'){ //年月日 时分秒
          this.title1 = '选择年月日'
          this.title2 = '选择时分秒'
        }else if(this.types == 'date-minutes'){ //年月日 时分
          this.title1 = '选择年月日'
          this.title2 = '选择时分'
        }else if(this.types == 'date-hour'){ //年月日 时
          this.title1 = '选择年月日'
          this.title2 = '选择小时'
        }else if(this.types == 'date'){ //年月日
          this.title1 = '选择年月日'
          this.title2 = '选择时分秒'
        }else if(this.types == 'year-month'){ //年月
          this.title1 = '选择年月'
          this.title2 = '选择时分秒'
        }
      }
    },
    

    //时分秒设置
    setHMS(){
      this.hourMinuteSecond[0].values.forEach(item=>{
				if(util.formatDate(new Date(),8)[0]==item){
						this.hourMinuteSecond[0].defaultIndex = Number(item)
				}
			})
			this.hourMinuteSecond[1].values.forEach(item=>{
				if(util.formatDate(new Date(),8)[1]==item){
						this.hourMinuteSecond[1].defaultIndex = Number(item)
				}
			})
			this.hourMinuteSecond[2].values.forEach(item=>{
				if(util.formatDate(new Date(),8)[2]==item){
						this.hourMinuteSecond[2].defaultIndex = Number(item)
				}
			})
    },
    //设置时分
    setHM(){
      this.hourMinute[0].values.forEach(item=>{
				if(util.formatDate(new Date(),8)[0]==item){
						this.hourMinute[0].defaultIndex = Number(item)
				}
			})
			this.hourMinute[1].values.forEach(item=>{
				if(util.formatDate(new Date(),8)[1]==item){
						this.hourMinute[1].defaultIndex = Number(item)
				}
			})
    },
    //设置时
    setH(){
      this.hour[0].values.forEach(item=>{
				if(util.formatDate(new Date(),8)[0]==item){
					this.hour[0].defaultIndex = Number(item)
				}
			})
    },


    //设置年
    setYear(){
      this.year[0].values.forEach(item=>{
				if(util.formatDate(new Date(),9)[0]==item){
					this.year[0].defaultIndex = Number(item)
				}
			})
    },
    //确认选择年
    confirmYear(value){
      this.seletTime = value[0]
      this.$emit('change',this.seletTime)
      this.isShowTime = false
    },
    //取消选择年
    cancelYear(){
      this.isShowYear = false
    },
    //设置年选择的列表
    setYearList(){
      let numberArr = []
      let nowYear = new Date().getFullYear()
      for(let j=2010;j<=nowYear;j++){
        numberArr.push(String(j))
      }
      this.year[0].values = numberArr
    },


    //确认选择年月日数据
    confirmYMD(value){
      this.isShowYMD = false
      if(this.types == 'date-seconds'){ //年月日 时分秒
        this.selectYMD = util.formatDate(value,1)
        this.isShowHMS = true
        this.setHMS()
      }else if(this.types == 'date-minutes'){ //年月日 时分
        this.selectYMD = util.formatDate(value,1)
        this.isShowHMS = true
        this.setHM()
      }else if(this.types == 'date-hour'){ //年月日 时
        this.selectYMD = util.formatDate(value,1)
        this.isShowHMS = true
        this.setH()
      }else if(this.types == 'date'){ //年月日
        this.seletTime = util.formatDate(value,1)
        this.$emit('change',this.seletTime)
        this.isShowTime = false
        this.isShowHMS = false
      }else if(this.types == 'year-month'){ //年月
        this.seletTime = util.formatDate(value,7)
        this.$emit('change',this.seletTime)
        this.isShowTime = false
        this.isShowHMS = false
      }
    },
    //确定选择时分秒
    confirmHMS(value){
      this.selectHMS = value
      if(this.types == 'date-seconds'){
        this.seletTime = this.selectYMD + ' '+this.selectHMS[0]+':'+this.selectHMS[1]+':'+this.selectHMS[2]
      }else if(this.types == 'date-minutes'){
        this.seletTime = this.selectYMD + ' '+this.selectHMS[0]+':'+this.selectHMS[1]
      }else if(this.types == 'date-hour'){
        this.seletTime = this.selectYMD + ' '+this.selectHMS[0]+':00'
      }
      this.$emit('change',this.seletTime)
      this.isShowTime = false
    },
    //取消时间选择
    cancelYMD(){
      this.isShowTime = false
    },

    //删除选择的时间
    deleteData(){
      this.seletTime = ''
      this.$emit('change','')
    },
  }
};
</script>

<style scoped>
.d-input{
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ddd;
  align-items: center;
}
.input-left{
  overflow: auto;
  word-break: keep-all;
  padding: 0 5px;
  box-sizing: border-box;
}
input{
  background:none;  
	outline:none;  
	border:none;
}
</style>

6.util.js

//时间格式化
function formatDate(date, type = 1) {
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var weekday = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    //月，日 ，时，分，秒，没有拼接0
    let months = month
    let weekdays = weekday
    let hours = hour
    let minutess = minutes
    let secondss = seconds

    if (month < 10) {
        month = "0" + month;
    }
    if (weekday < 10) {
        weekday = "0" + weekday;
    }
    if (hour < 10) {
        hour = "0" + hour;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }

    if (type == 1) {
        return (year + "-" + month + "-" + weekday);
    } else if (type == 2) {
        return (hour + ":" + minutes + ":" + seconds);
    } else if (type == 3) {
        return (year + "-" + month + "-" + weekday + ' ' + hour + ":" + minutes + ":" + seconds)
    } else if (type == 4) {
        return year + "/" + months + "/" + weekdays + " " + hours + ":" + minutess + ":" + secondss;
    } else if (type == 5) {
        return [hour, minutes, seconds]
    } else if (type == 6) {
        return (year + "年" + month + "月" + weekday + '日');
    } else if (type == 7) {
        return (year + "-" + month);
    } else if (type == 8) {
        return ([hour, minutes, seconds])
    } else if (type == 9) {
        return ([year, months, weekdays])
    } else if (type == 10) {
        return (year + "-" + month + "-" + weekday + ' ' + hour + ":00")
    }
}

//非空判断
function isEmpty(str) {
    if (str == null || str == "") {
        return true;
    }
    return false;
}

export default {
    formatDate,
    isEmpty
}

7.注意

如引用本文内容，请标明出处。
有问题可留言

不二夭
关注
在Vue2中，Vant2组件的datetime-picker插件基本使用
QQ_ADMIN的博客
07-27 2559
在vue2项目中，使用Vant2组件的datetime-picker时间插件，之前在网上看了好多示例，仅仅只是照搬官网的使用方式，并不能达到使用效果，或者是根本就无法运行的代码。当前代码也不是最优的，后续再优化...
用vue+vant框架写手机端
yjg9898web的博客
08-04 3441
用vue+vant框架写手机端了解vue+vant1.什么是vue2.什么是vant安装如何安装vue/cli(脚手架)插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 了解vue+vant 1.什么是vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框
iview ＜DatePicker type=“date“ format=“yyyy-MM-dd“＞＜/DatePicker＞及＜Cascader/＞回显校验不通过问题
fdyputi的博客
05-24 326
view design 时间及级联选择器校验
vantUI时间选择器将选中值改为 yyyy-mm-dd 00:00:00 格式
lwfcomeon的博客
01-28 1万+
vantUI时间选择器默认选中值为： 更改之后 代码如下 &lt;van-popup v-model="startTimeshow" position="bottom" :overlay="true"&gt; &lt;van-datetime-picker @cancel="Cancel" @confirm="Confirm"
Vant，date-picker日期组件，面板设置默认日期
最新发布
qq_38711726的博客
08-02 527
vant的日期组件面板打开，显示当前日期。
vant-DatetimePicker 时间选择的使用
weixin_57246351的博客
08-29 1万+
1,注册DataTimePicker组件 import { DatetimePicker } from 'vant' Vue.use(DatetimePicker) 2,在UserEdit.vue页面使用, 定义相关变量 <!-- 修改时间 --> <van-popup v-model="isShowBirth" position="bottom" style="height: 50%" round> <!-- 日期选择控件 --> <v
Winform 遍历窗体控件，设置 DateTimePicker时间格式为 yyyy-MM-dd HH:mm:ss
鸣风
04-03 2320
/// &lt;summary&gt; /// 遍历 groupBox1.Controls /// 设置 DateTimePicker的属性 /// &lt;/summary&gt; private void dateTimePickerSeeting() { foreach (...
Vue + Vant DatetimePicker 日期选择 常见的日期限制（只允许选择当前月，整月选择）
射手男很懒的博客
09-22 8704
Vue + Vant DatetimePicker 日期选择 常见的日期限制 安装Moment.js（Moment.js JavaScript 日期处理类库 http://momentjs.cn/） npm install moment --save # npm yarn add moment # Yarn <van-datetime-picker class="datePick" ...
vant 组件，时间选择器的应用 van-datetime-picker
weixin_49577940的博客
01-17 1万+
vant 组件，时间选择器的应用 van-datetime-picker
Vue 用Vant实现时间选择器的示例代码
12-30
引入Vant中DatetimePicker组件（全局引入后可直接使用） import Vue from 'vue'; import { DatetimePicker } from 'vant' Vue.use(DatetimePicker); 关键使用代码（结合vant组件Popup的底部弹出层一起使用） ...
Vue2.x 全家桶+Vant 搭建大型单页面电商项目 (页面齐全, 数据源与项目完整)
01-02
基于 vue 2.x 和 vant 2.x实现。使用了最新的Vue全家桶技术栈，以及一些优秀的开源库如better-scroll、 moment.js、twix.js、pubsub-js,后台数据通过Easy-Mock搭建 ; 需要在本地安装 node 和 git。本项目技术栈...
使用Vant完成DatetimePicker 日期的选择器操作
01-21
效果展示： 代码展示： 点击选择日期 <van-datetime-picker v-model=c
datetimepicker时间选择器
09-24
一个多多类型，用途的时间选择器，支持年月日、时分时间区间选择
项目实战：《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
qq_52264068的博客
02-11 3935
《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
Moment.js+Vue过滤器的使用，各种时间格式转换为YYYY-MM-DD HH:mm:ss格式
qq_36818931的博客
01-05 2504
文章目录前言一、Moment.js是什么？二、使用步骤1.安装2.在过滤器中添加function3.在template中使用总结 前言 这篇文章将Moment.js与vue过滤器连用。如果不会过滤器的朋友，可以先看这篇文章vue过滤器 一、Moment.js是什么？ Moment.js是JavaScript 日期处理类库。使用场景：vue项目中经常需要将时间戳转换为各种时间格式再显示。 二、使用步骤 1.安装 这里只展示Node.js的安装方法。其余安装方式详见Moment.js文档 Node..
使用Vant完成DatetimePicker 日期的选择器
热门推荐
柠檬不萌只是酸i
09-08 3万+
效果展示： 代码展示： <template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button> <van-field v-model="timeValue" p...
vue 时间控件
盖世小可爱的博客
06-04 2046
1、项目开发中在使用日期时间选择器时需要添加默认时间并精确到HH:mm:ss，默认时间为当天的00:00:00~23:59:59 日期选择器相关属性 <el-date-picker v-model="serachForm.gengerateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd
datetimepicker格式化
东方红Zone
11-04 8189
  1  DateTimePicker 得到时间我在工单管理的 历史查询中，需要通过时间进行工单查询而这个时间可以让用户选择，又可输入，又得符合时间格式，所以选择用DateTimePicker 控件，但DateTimePicker 默认只显示 年 月 日  （ 2008 年 10月 1号）而要得到年月日时，这时得进行转换    dateTimePicker1.Format =
Vant的DatetimePicker时间选择组件
weixin_46659355的博客
03-28 9126
Vant的DatetimePicker时间选择组件 1, 安装vant[推荐按需加载] //1,通过 npm 安装 npm i vant -S //2,在babel.config.js文件中配置如下 plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值