Vue.js 手机端H5,时间选择器实现:年月日时分秒、年月日时分、年月日时、年月日、年月、年、月、日、时、分、秒,时分秒、时分多种类型
目录
一、效果查看
时间选择器实现效果视频
二、目录
三、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系统,请自行处理一下时间格式,将‘-’改为‘/’。
如引用本文内容,请标明处处。
有问题可留言
Vue.js 手机端H5,时间选择器实现:年月日时分秒、年月日时分、年月日时、年月日、年月、年、月、日、时、分、秒,时分秒、时分多种类型相关推荐
- vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器 最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
- vue+weui 手机端项目
vue+weui 手机端项目 俩个地址 https://weui.io/ https://github.com/Tencent/weui/wiki?tdsourcetag=s_pctim_aiomsg ...
- pc网站和手机端h5网站开发接入微信支付
有关支付类开发,现在比以前要简单很多了,微信和支付宝两大支付巨头早已经给出了非常详细的接入文档,并且迭代了好多版本,但在实际开发中其实文档的可读性还是有些磕磕绊绊的,而且也有一些坑需要注意.以微信支付 ...
- 手机端H5开发,屏幕不同尺寸适配方法(屏幕自适应)
最近在接触手机端H5开发,然后设计师将设计图发给我们进行开发,对于第一次接触详细设计图开发的我来说,觉得很新颖毕竟一直没有接触这么正规的设计图(字体样式,颜色,大小等等),之后再开发的时候,就遇到了一 ...
- vue 限制手机端访问
vue 限制手机端访问 APP.vue页面 mounted() {var str = navigator.userAgentvar ipad = str.match(/(iPad).*OS\s([\d ...
- h5适配华为手机_手机端H5页面适配 踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
- JS手机端移动端长按longtap事件
JS手机端移动端长按longtap事件移动端并没有所谓的longtap事件,即长按事件.但是,有时候会用到,只能借助touchstart.touchmove.touchend三个事件以及延迟setTi ...
- JS实现视频试看提示付费功能 手机端 H5网页
手机端 网页 JS实现视频试看功能,到时间自动停止播放 H5 场景:视频播放 对未付费的用户只播放两分钟 付费的用户可正常播放 思路:监听视频播放时间,到达预定时间的时候, 暂停视频播放, 同时关闭大 ...
- js手机端时间区间_js根据时间范围生成时间刻度数据
前言: 使用d3绘制时间轴图表,不可避免的涉及到动态变动时间刻度,根据业务需求需要调整查看不同的时间粒度数据.如果后台数据非连续数据,需要前端自己处理的话,就得自己根据时间范围创建时间刻度数据. 一. ...
最新文章
- 都啥时候了,你还怕学了Python找不到工作?
- boost::bind的使用
- c语言16x32点阵显示汉字,点阵16*32滚屏显示汉字
- 数学之美 系列十三 信息指纹及其应用
- pandas绘图_Pandas内置绘图方法(线型图、柱状图、密度图)
- Deep learning with python notebooks 笔记 第一章 深度学习基础
- [终极精简版][图解]Nginx搭建flv mp4流媒体服务器
- LeetCode 3Sum (Two pointers)
- java cximage_CxImage的简单用法
- 宾馆管理系统(做了ppt忘记发博客了)
- CF1299B Aerodynamic 题解
- 举个栗子!Tableau 技巧(109):用 LOD 计算产品销售周期
- MCS—51汇编语言程序
- 数据库可视化查询工具
- Spring-Data-JPA EntityManager 从一次线上BUG探究Autowired和PersistenceContext的区别
- 慧数汽车大数据:中国多功能轿车(旅行车)市场研究报告(2018简版)
- CodeM资格赛D 送外卖 题解
- CMD中指定JDK版本命令
- html js 鼠标移动图片跟着移动
- 尚硅谷_SpringMVC笔记