目录

一、效果查看

时间选择器实现效果视频

二、目录

三、index.vue

<template><div><date-picker keys="0" :dateType="0" height="40" width="45" bgColor="#eeeeee" placeholder="年月日 时分秒" title="年月日 时分秒" :defaultTime.sync="defaultTime1"position="center"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="1" :dateType="1" height="40" width="45" bgColor="#eeeeee" placeholder="年月日 时分" title="年月日 时分":defaultTime.sync="defaultTime2"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="2" :dateType="2" height="40" width="45" bgColor="#eeeeee" placeholder="年月日 时" title="年月日 时":defaultTime.sync="defaultTime3"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="3" :dateType="3" height="40" width="45" bgColor="#eeeeee" placeholder="年月日" title="年月日":defaultTime.sync="defaultTime4"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="4" :dateType="4" height="40" width="45" bgColor="#eeeeee" placeholder="年月" title="年月":defaultTime.sync="defaultTime5"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="5" :dateType="5" height="40" width="45" bgColor="#eeeeee"placeholder="年" title="年":defaultTime.sync="defaultTime6"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="6" :dateType="6" height="40" width="45" bgColor="#eeeeee" placeholder="月" title="月":defaultTime.sync="defaultTime7"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="7" :dateType="7" height="40" width="45" bgColor="#eeeeee" placeholder="日" title="日":dayArr="dayArr":defaultTime.sync="defaultTime8"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="8" :dateType="8" height="40" width="45" bgColor="#eeeeee" placeholder="时" title="时":defaultTime.sync="defaultTime9"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="9" :dateType="9" height="40" width="45" bgColor="#eeeeee" placeholder="分" title="分":defaultTime.sync="defaultTime10"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="10" :dateType="10" height="40" width="45" bgColor="#eeeeee" placeholder="秒" title="秒":defaultTime.sync="defaultTime11"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="11" :dateType="11" height="40" width="45" bgColor="#eeeeee" placeholder="时分秒" title="时分秒":defaultTime.sync="defaultTime12"@getDateValue="getDateValue"></date-picker><div style="margin:10px 0"></div><date-picker keys="12" :dateType="12" height="40" width="45" bgColor="#eeeeee" placeholder="时分" title="时分":defaultTime.sync="defaultTime13"@getDateValue="getDateValue"></date-picker></div></template><script>import datePicker from './date-picker/index.vue'export default {components:{'date-picker':datePicker,},data(){return{defaultTime1:'-02-07 12:23:40',defaultTime2:'',defaultTime3:'',defaultTime4:'',defaultTime5:'',defaultTime6:'',defaultTime7:'',defaultTime8:'',defaultTime9:'',defaultTime10:'',defaultTime11:'',defaultTime12:'',defaultTime13:'',dayArr:["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15"],//只有当dateType为7的时候才有作用}},methods:{/*** val 点击确定获取的值* keys 点击确定获取的唯一标识keys值*/getDateValue(val,keys){//点击确定获取值// console.log(keys);}}}</script><style></style>

三、使用说明

使用参数列表

资源：

链接: 链接: /s/1x-ZAjU33OycyKfuBIdCP_w?pwd=wafv

提取码: wafv.

注意：

当前组件适配的为安卓，如适配ios系统，请自行处理一下时间格式，将‘-’改为‘/’。

如引用本文内容，请标明处处。

有问题可留言

Vue.js 手机端H5 时间选择器实现：年月日时分秒 年月日时分 年月日时 年月日 年月 年 月 日 时 分 秒 时分秒 时分多种类型