1.效果图

2.前提

vue引入Vant：

vue2.0
npm i vant -Svue3.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><TimeSelectionclearValueplaceholderText="开始时间":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-popupv-model="isShowTime" position="bottom" :style="{ height: '40%' }"><van-datetime-pickerv-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-pickerv-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-pickerv-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 = valthis.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.nowShowTimethis.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 = trueif(this.types == 'year') {this.isShowYMD = falsethis.isShowHMS = falsethis.isShowYear = truethis.setYear()this.title1 = '选择年月日'this.title2 = '选择时分秒'}else{this.isShowYMD = truethis.isShowHMS = falsethis.isShowYear = falseif(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 = falseif(this.types == 'date-seconds'){ //年月日 时分秒this.selectYMD = util.formatDate(value,1)this.isShowHMS = truethis.setHMS()}else if(this.types == 'date-minutes'){ //年月日 时分this.selectYMD = util.formatDate(value,1)this.isShowHMS = truethis.setHM()}else if(this.types == 'date-hour'){ //年月日 时this.selectYMD = util.formatDate(value,1)this.isShowHMS = truethis.setH()}else if(this.types == 'date'){ //年月日this.seletTime = util.formatDate(value,1)this.$emit('change',this.seletTime)this.isShowTime = falsethis.isShowHMS = false}else if(this.types == 'year-month'){ //年月this.seletTime = util.formatDate(value,7)this.$emit('change',this.seletTime)this.isShowTime = falsethis.isShowHMS = false}},//确定选择时分秒confirmHMS(value){this.selectHMS = valueif(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();//月，日 ，时，分，秒，没有拼接0let months = monthlet weekdays = weekdaylet hours = hourlet minutess = minuteslet secondss = secondsif (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.注意

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

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

momentjs转换格式_Moment.js+Vue过滤器的使用，各种时间格式转换为YYYY-MM-DD HH:mm:ss格式...
前言这篇文章将Moment.js与vue过滤器连用.如果不会过滤器的朋友,可以先看这篇文章vue过滤器一.Moment.js是什么? Moment.js是JavaScript 日期处理类库.使用场 ...
在vue、html中手动写日期格式化转换为“yyyy-MM-dd hh:mm:ss”
做前端页面的时候,貌似日期格式化是没有预置的,需要自己写(当然大部分都是直接C+V了),但是觉得那些方法不容易看懂,而且对于小白来说,用起来也不是那么地方便,于是自己写了一个简单的日期格式化函数. 在 ...
vue中时间格式2021-11-21T12:30:00.000+00:00转换yyyy-MM-dd HH:mm:ss
vue时间格式2021-11-21T12:30:00.000+00:00转换yyyy-MM-dd HH:mm:ss 1.方式一 <el-table-column prop="updat ...
将时间戳格式化为yyyy-MM-dd hh:mm:ss格式(Vue) Moment
推荐方法: 文档 | Moment.js 中文网(可支持其他时间格式转换,英文,法文等.) //下载安装包 npm install moment -D//main.js引入包 import momen ...
vue时间格式2021-11-21T12:30:00.000+00:00转换yyyy-MM-dd HH:mm:ss
vue时间格式2021-11-21T12:30:00.000+00:00转换yyyy-MM-dd HH:mm:ss 1.html部分 <el-table-column prop="up ...
在vue中将2022-07-05T09:57:39.000Z 转换成 YYYY-MM-DD HH:mm:ss 格式
1.问题描述今天联系项目的时候遇到一个时间格式的问题,在数据库的时候时间格式是正常的,但是前端页面拿的数据渲染表格的时候就显示不是我想要的格式了,这就需要对时间格式进行处理了下面两张图就是数据库和 ...
vue 毫秒数转年月日_vue中将时间戳转换为YYYY-MM-dd hh:mm格式时间的组件
首先我们可以使用vue中的过滤方法将数据变成另一个格式 // html {{rating.rateTime | formateDate}} //script filters: { formateDat ...
【Vue】时间戳转换为年月日格式为 yyyy-MM-dd hh:mm js转换时间戳时间戳转换为年月日 Fri Apr 01 2022 00:00:00 GMT+0800 (中国标准时间)转换
Vue中将时间戳转换为年月日用法时间戳转换为年月日 yyyy-MM-dd hh:mm 用法1: formatDate(new Date(val * 1000), 'yyyy年MM月dd日 hh:m ...
据说这是熟练掌握python的爷们_dongbei 是一门基于 Python 3 二次开发的东北方言编程语言...
dongbei - 东北方言编程语言学编程,就整东北浪! 体格咋地扫码关注原作者微信公众号"老万故事会": 引言 dongbei是啥?它是一门以东北方言词汇为基本关键字的以人为 ...

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

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

1.效果图

2.前提

3.项目结构

4.index.vue

5.timeSelection.vue

6.util.js

7.注意

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

最新文章

热门文章