Vant时间控件精确到秒

Vant-ui里面的时间控件最多精确到分钟,但是项目需求要精确到秒钟,
我们可以用popup弹框和picker选择器自己封装一个时间选择控件精确到秒

下面是封装的效果图

1.components下创建popUpPicker/popUpPicker.vue

<template><div class="popup-pciker-wrap"><van-popup v-model="isPicker" position="bottom" @close="close"><van-pickerref="picker"show-toolbartitle="请选择时间":columns="columns"@change="onChange"@cancel="cancel"@confirm="onConfirm"/></van-popup></div>
</template><script>
export default {name: "popup",props: ["showPicker", "values"],data() {return {isPicker: false,columns: [],Mdays:'',//弹窗关闭时月份所在值Dindex:null};},mounted() {},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;var date = new Date(strtime.replace(/-/g, "/"));var vmoduletime = date.getTime();if(this.values!=''){var vmoduledate = new Date(vmoduletime);}else{var 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();console.log(Y , M ,D , h , m , s) //获取每一列索引var year = {}; //获取前后十年数组year.values = [];var Currentday = new Date().getFullYear();for (var i = Currentday - 10; i < Currentday + 10; i++) {year.values.push(i+'年');}year.defaultIndex = year.values.indexOf(Y+'年'); //设置默认选项当前年this.columns.push(year);var month = {}; //获取12月数组month.defaultIndex = M;month.values = Object.keys(Array.apply(null, { length: 13 })).map(function (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);//获取当月的天数var days = this.getCountDays(Y,this.Mdays==''?M+1:this.Mdays);var day = {}; //创建当月天数数组day.defaultIndex = this.Dindex==null? D - 1:this.Dindex;day.values = Object.keys(Array.apply(null, { length: days+1 })).map(function (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);var hour = {}; //创建小时数组hour.defaultIndex = h;hour.values = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {if (+item + 1 <= 10) {return "0" + item+'时';} else if(+item + 1 == 11){return  + item+'时'}else {return (+item +  0).toString()+'时';}});this.columns.push(hour);var mi = {}; //创建分钟数组mi.defaultIndex = m;mi.values = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {if (+item + 1 <= 10) {return "0" + item+'分';} else if(+item + 1 == 11){return  + item+'分'}else {return (+item +  0).toString()+'分';}});this.columns.push(mi);var ss = {}; //创建秒数数组ss.defaultIndex = s;ss.values = Object.keys(Array.apply(null, { length: 60 })).map(function (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) {//a为所有列备选项值的数组var days = this.getCountDays(a[0].substr(0,4), a[1].substr(0,2));var newdays = {};newdays.values = Object.keys(Array.apply(null, { length: days+1 })).map(function (item) {if (+item + 1 <= 10) {return "0" + item+'日';} else if(+item + 1 == 11){return  + item+'日'}else {return (+item +  0).toString()+'日';}});newdays.values.splice(0, 1);this.$refs.picker.setColumnValues(2, newdays.values); //设置第三列的值this.$refs.picker.setColumnIndex(2, a[2].substr(0,2) - 1); //设置第三列索引},onConfirm(val, index) {console.log(`当前值：${val});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("close", endval);},cancel() {//选择器关闭// this.$emit("changeValue");},close() {//弹出层关闭var currentM=this.$refs.picker.getColumnValue(1)this.Mdays=currentM.substr(0,2)this.Dindex=this.$refs.picker.getColumnIndex(2)// this.$emit("close");},},
};
</script><style>
.van-picker__cancel {visibility: hidden;
}
</style>

2.使用该组件(引入组件路径,注册组件)

<template><div class="popup-pciker-wrap"><van-button @click="showup">选择时间</van-button> <van-button @click="deltime">清除时间</van-button>时间显示:{{getTime}} <popuppicker :values="getTime"   @changeValue="handelChange" ref="popup" :showPicker="showPicker1" @close="close"/></div>
</template>
<script>
import popuppicker from '../../components/popUpPicker/popUpPicker'    //页面引入组件
export default {components: {popuppicker, //页面注册组件},data() {return {getTime:'',showPicker1: false,};},methods: {showup(){this.showPicker1 = true;}, handelChange(){ //popup弹窗关闭this.showPicker1 = false;             },close(val){//picker选择器点击确定this.getTime=val       },deltime(){this.getTime=''},};
</script>

Vant时间控件精确到秒相关推荐

html小时分钟秒选择器,HTMLbootstrap时间选择器控件精确到秒 datetimepicker控件怎么精确到秒？...
在使用 HTML 中的 bootstrap datetimepicker 选择器控件时会发现,该插件不能精确到秒钟,那么 bootstrap 时间选择器控件精确到秒能否实现呢? 其实可以进行简单的修改 ...
vant时间控件的使用
<template><div class="shoukuan"><tabbar title="添 ...
html日期英文状态显示不出来,html 时间控件插件laydate，显示时分，不显示秒
概述项目中使用到了时间控件,不知为何input-->date无法弹出控件,故使用了js插件laydate.根据项目需求,时间要求精度为分,故隐藏秒控件. 参考网友博客,最终实现如下. 代码 l ...
laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
一.时间控件去掉秒,保留时分二.时间控件在移动端不能滚动一.时间控件去掉秒,保留时分方法一:使用 ready 回调函数 ready 控件在打开时触发.打开控件时让秒消失. <script& ...
elementui时间控件限制可选时间范围(精确到时分秒)
elementui时间控件限制可选时间范围(精确到时分秒) 我们在开发web端项目时,时间控件用的非常多,限制可选时间也是比较常见的需求,比如已经过去时间不能选,或这未来的时间不可选等,如果仅仅只是限 ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
vue时间控件美化成IOS样式(移动端)，vux组件datatime添加星期几/周几教程
input的时间控件有三种类型属性 Android IOS type="date" 年+月+日(原生UI样式) 年+月+日(滚轮样式) type="datetime&q ...
jqGrid中时间控件input的值赋给点开后的laydate控件
可以看到上课时间的值是8点-10点点击时间控件选择时间时,时间控件不会根据已有的时间数据显示默认值,而是显示当前时间? Q:为什么会显示当前时间,怎么解决这个问题? A: 代码如下: getTime ...
HTML5超简单的日期时间控件
HTML5超简单的日期时间控件时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...

Vant时间控件精确到秒

Vant时间控件精确到秒

1.components下创建popUpPicker/popUpPicker.vue

2.使用该组件(引入组件路径,注册组件)

Vant时间控件精确到秒相关推荐

最新文章

热门文章