目录
一、效果查看
时间选择器实现效果视频
二、目录
三、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:'2022-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>
三、使用说明
使用参数列表
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
height | String | 30 | 时间选择选择器的高度 |
width | String | 100 | 时间选择选择器的宽度 |
dateType | Number | 0 | 选择器的类型 0年月日 时分秒 1年月日 时分 2年月日 时 3年月日 4年月 5年 6月 7日 8时 9分 10秒 11时分秒 12时分 |
defaultTime | String | - | 绑定的时间 |
bgColor | String | - | 事件选择器背景颜色 |
title | String | 日期和时间 | 弹起时间框设置的标题 (选择器标题) |
placeholder | String | 请选择 | 弹起时间框设置的默认提示 |
position | String | center | 选择的时间显示的位置 |
keys | String | - | 唯一key值,注意:页面中时间选择器key值不能重复 |
startYear | Number | 10 | 当前年,前多少年 |
endYear | Number | 0 | 当前年,后多少年 |
dayArr | Array | [] | 当选择器dateType为7的时候,可自定义设置天数,否则为当月实际天数 |
getDateValue | Function | - | 点击确定,获取值的方法,返回两个参数,value、key值(时间选择器唯一值) |
资源:
链接: 链接: https://pan.baidu.com/s/1x-ZAjU33OycyKfuBIdCP_w?pwd=wafv
提取码: wafv.
注意:
当前组件适配的为安卓,如适配ios系统,请自行处理一下时间格式,将‘-’改为‘/’。
如引用本文内容,请标明处处。
有问题可留言