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

目录

一、效果查看

时间选择器实现效果视频

二、目录

Vue.js 手机端H5,时间选择器实现:年月日时分秒、年月日时分、年月日时、年月日、年月、年、月、日、时、分、秒,时分秒、时分多种类型_第1张图片

三、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,html,css)