记录uni-app的时间选择器

由于开发过程中需要用到时间选择器，所以写了一个小插件。
先来看官方的文档：
官方文档

官方功能不完善，所以稍微改动一下；

<template><view><picker :title="index" @change="bindTimeChange" @columnchange="columnchange" mode="multiSelector" :disabled="disabled" :class="{disabled:disabled}":value="index" :range="array"><view class="uni-input" v-if="showTime">{{showTime}}</view><view v-else class="placeholder">{{placeholder}}</view></picker></view><!-- 只读 -->
</template><script>export default {name: 'dy-Date-Picker',props: {timeType: {type: String,default: () => 'day'},disabled: {type: Boolean,default: () => false},// 是否显示图标iconshow: {type: Boolean,default: () => true},placeholder: {type: String,default () {return '请选择'}},childValue: {default () {return ''}},minSelect: {type: String,default: () => '1900/01/01'},maxSelect: {type: String,default: () => '2050/12/31'}},data() {return {index: [0],array: [],yearArr: [], // 年份数组monthArr: [], // 月份数组yearIndex: 0, // 年份选中下标dayArr:[0,1,2,3,4,5,6,7],//天数hourArr:[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],[5,10,15,20,25,30,35,40,45,50,55]],showTime: this.moment(this.childValue)}},methods: {moment(strTime) {let type = this.timeTypeif (!strTime) {return}let value = 0;if(type == 'tian'){value = 0;return value;}else if (type == 'hour'){value = 0;return value;}let time = new Date(strTime)let y = time.getFullYear();let m = time.getMonth() + 1m = m < 10 ? `0${m}` : mlet d = time.getDate()d = d < 10 ? `0${d}` : dlet hh = time.getHours()hh = hh < 10 ? `0${hh}` : hhlet mm = time.getMinutes()mm = mm < 10 ? `0${mm}` : mmlet ss = time.getSeconds()ss = ss < 10 ? `0${ss}` : ssvalue = `${y}/${m}/${d} ${hh}:${mm}:${ss}`if (type === 'year') {value = `${y}`}if (type === 'month') {value = `${y}-${m}`}if (type === 'day') {value = `${y}-${m}-${d}`}return value},/*** [setDefaultValue 设置默认值]*/setDefaultValue() {let date = this.moment(new Date().getTime()) //获取当前时间；并展示this.valueEchoed(date)},bindDateChange(e) {this.childValue = e.target.value;},dateInit() {let type = this.timeType;if(type == 'tian'){this.array[0] = this.dayArr;return ;}else if(type == 'hour'){this.array = this.hourArr;return ;}this.array = []this.yearArr = []this.monthArr = []let minDate = this.moment(this.minSelect) || []let maxDate = this.moment(this.maxSelect) || []minDate = minDate ? minDate.split(' ') : ''maxDate = maxDate ? maxDate.split(' ') : ''minDate = minDate[0] ? minDate[0].split('-') : 1900maxDate = maxDate[0] ? maxDate[0].split('-') : 2050let {monthStar,monthEnd} = ''let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050if (type === 'day') {let dateStar = minDate[2] ? parseInt(minDate[2]) : 1let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : 31}if (type === 'month' || type === 'day') {monthStar = minDate[1] ? parseInt(minDate[1]) : 1monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12}for (let y = yearStar; y <= yearEnd; y++) {let ytext = y < 10 ? `0${y}` : y; //小于10 加 01this.yearArr.push(`${ytext}年`) //加入选择的数组if (type === 'month' || type === 'day') {let mGroup = this.getMonthArr(y,yearStar,yearEnd,monthStar,monthEnd,type)mGroup.length && this.monthArr.push(mGroup)}}this.array[0] = this.yearArrif (type === 'month' || type === 'day') {this.array[1] = this.monthArr.length && this.monthArr[0]}if (type === 'day') {this.array[2] = this.getDateArr(parseInt(this.yearArr[0]),parseInt(this.monthArr[0]))}},getMonthArr(y, yearStar, yearEnd, monthStar, monthEnd, type) {let mGroup = []let dateGroup = []if (y === yearStar && y !== yearEnd) {for (let m = monthStar; m <= 12; m++) {let mtext = m < 10 ? `0${m}` : mmGroup.push(`${mtext}月`)}}if (y === yearEnd && y !== yearStar) {for (let m = 1; m <= monthEnd; m++) {let mtext = m < 10 ? `0${m}` : mmGroup.push(`${mtext}月`)}}if (y !== yearStar && y !== yearEnd) {for (let m = 1; m <= 12; m++) {let mtext = m < 10 ? `0${m}` : mmGroup.push(`${mtext}月`)}}if (y === yearStar && y === yearEnd) {for (let m = monthStar; m <= monthEnd; m++) {let mtext = m < 10 ? `0${m}` : mmGroup.push(`${mtext}月`)}}return mGroup},getDateArr(y, m) {let minDate = this.moment(this.minSelect) || []let maxDate = this.moment(this.maxSelect) || []minDate = minDate.length && minDate.split('-')maxDate = maxDate.length && maxDate.split('-')let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050let monthStar = minDate[1] ? parseInt(minDate[1]) : 1let monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12let datearr = []let maxnum = 30let date31 = [1, 3, 5, 7, 8, 10, 12]if (date31.includes(m)) {maxnum = 31}// 判断是平年还是闰年的2月份if (m === 2) {if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) {maxnum = 29} else {maxnum = 28}}let dateStar = minDate[2] ? parseInt(minDate[2]) : 1let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : maxnumif ((y !== yearEnd && y !== yearStar) ||(y === yearStar && m !== monthStar && m !== monthEnd) ||(y === yearEnd && m !== monthEnd && m !== monthStar) ||(yearStar === yearEnd && m !== monthStar && m !== monthEnd) ||(yearStar !== yearEnd && y === yearEnd && m !== monthEnd) ||(y === yearStar && m !== monthStar && y < yearEnd)) {for (let d = 1; d <= maxnum; d++) {let dtext = d < 10 ? `0${d}` : ddatearr.push(`${dtext}日`)}}if ((yearStar === yearEnd && y === yearStar && m === monthStar && m !== monthEnd) || (yearStar !== yearEnd && y ===yearStar && m === monthStar)) {for (let d = dateStar; d <= maxnum; d++) {let dtext = d < 10 ? `0${d}` : ddatearr.push(`${dtext}日`)}}if ((y === yearEnd && m === monthEnd && m !== monthStar && yearStar === yearEnd) || (y === yearEnd && yearStar !==yearEnd && m === monthEnd)) {for (let d = 1; d <= dateEnd; d++) {let dtext = d < 10 ? `0${d}` : ddatearr.push(`${dtext}日`)}}if (y === yearStar &&yearStar === yearEnd &&m === monthStar &&monthStar === monthEnd) {for (let d = dateStar; d <= dateEnd; d++) {let dtext = d < 10 ? `0${d}` : ddatearr.push(`${dtext}日`)}}return datearr},bindTimeChange(e) {let timeValue = ''let indexArr = e.detail.value;let type = this.timeTypeif(type == 'hour'){timeValue = `${this.array[0][indexArr[0]]}:${this.array[1][indexArr[1]]}`;this.showTime = timeValue;this.$emit('getData', timeValue)return ;}else if(type == 'tian'){timeValue = this.array[0][indexArr[0]]+'天';this.showTime = timeValue;this.$emit('getData', timeValue)return ;}let year = parseInt(this.array[0][parseInt(indexArr[0]) || 0])let month = ''timeValue = year + ''if (type === 'month' || type === 'day') {let index = parseInt(indexArr[1]) || 0index = index < 0 ? 0 : indexmonth = parseInt(this.array[1][index])month = month < 10 ? `0${month}` : monthtimeValue = `${timeValue}-${month}`}if (type === 'day') {let dateindex = parseInt(indexArr[2]) || 0dateindex = dateindex < 0 ? 0 : dateindexlet date = parseInt(this.array[2][dateindex])date = date < 10 ? `0${date}` : datetimeValue = `${timeValue}-${date}`}this.showTime = timeValue;this.$emit('getData', timeValue)},// 当时发生改变时 加载对应的分钟数组columnchange(e) {const minIndex = e.detail.valueconst column = e.detail.columnlet type = this.timeTypethis.$set(this.index, column, minIndex)if (column === 0) {this.yearIndex = minIndexif (type === 'month' || type === 'day') {this.$set(this.array, 1, this.monthArr[minIndex])}if (type === 'day') {let monthindex = this.index[1] || 0let newDateArr = this.getDateArr(parseInt(this.yearArr[minIndex]),parseInt(this.monthArr[this.yearIndex][monthindex]))this.$set(this.array, 2, newDateArr)}}if (column === 1 && type === 'day') {let newDateArr = this.getDateArr(parseInt(this.yearArr[this.yearIndex]),parseInt(this.monthArr[this.yearIndex][minIndex]))this.$set(this.array, 2, newDateArr)}},valueEchoed(defaultTime) {this.index = [0]if (this.childValue || defaultTime) {let type = this.timeType;if(type == 'tian'){this.array = this.dayArr;return ;}else if(type == 'hour'){this.array = this.hourArr;return ;}let value = this.childValue || defaultTimevalue = this.moment(value)value = value.split('-')let index =this.array[0].findIndex(item => parseInt(item) === parseInt(value[0])) || 0index = index === -1 ? 0 : indexthis.index[0] = indexthis.yearIndex = indexif (type === 'month' || type === 'day') {this.array[1] = this.monthArr.length && this.monthArr[index]const monthindex =(this.array[1] && this.array[1].length &&this.array[1].findIndex(item => parseInt(item) === parseInt(value[1]))) ||0this.index[1] = monthindex}if (type === 'day') {let index0 = this.index[0] || 0let index1 = this.index[1] || 0index0 = index0 === -1 ? 0 : index0index1 = index1 === -1 ? 0 : index1let newDay = this.getDateArr(parseInt(this.yearArr[index0]),parseInt(this.monthArr[index0][index1]))this.getDateIndex(newDay)}}},getDateIndex(newDay) {let defaultTime = this.moment(new Date().getTime())let value = this.childValue || defaultTimevalue = this.moment(value)value = value.split('-')this.array[2] = newDaylet dateindex =this.array[2].findIndex(item => parseInt(item) === parseInt(value[2])) || 0this.index[2] = dateindex}},watch: {// 监测组件最小选择范围发生改变 初始化日期数据minSelect() {this.dateInit()this.setDefaultValue()},// 监测组件最大可选范围发生改变 初始化日期数据maxSelect() {this.dateInit()this.setDefaultValue()},childValue() {this.showTime = ''this.showTime = this.moment(this.childValue)this.dateInit()this.setDefaultValue()}},created() {this.dateInit()this.valueEchoed()if (!this.childValue) {this.setDefaultValue()}}}
</script><style lang="less">.tx_r {line-height: 48px;font-size: 15px;font-weight: normal;color: #848b9a;}.placeholder {color: #b5b8c2;font-size: 30rpx;}.fa-angle-right {font-size: 36rpx;padding-left: 12rpx;}
</style>

可直接复制使用
谢谢关注；

记录uni-app的时间选择器相关推荐

记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
014_TimePicker时间选择器
1. TimePicker时间选择器 1.1. 用于选择或输入日期. 1.2. 时间选择器属性参数说明类型可选值默认值 value / v-model 绑定值 date(TimePicker ...
Android中TimePicker时间选择器的使用和获取选择的时和分
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
日历日期时间选择器
1.日历 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 andro ...
Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
android edittext获取 time值,在Android EditText中实现日期时间选择器(DatePicker和TimePicker)...
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
android日期选择区间控件_Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
选择对话框 android_Android日期时间选择器对话框
选择对话框 android Android Date Time picker are used a lot in android apps. In this tutorial we'll demons ...
Python记录程序运行的时间
Python记录程序运行的时间内置模块time包含很多与时间相关函数.我们可通过它获得当前的时间和格式化时间输出. import timestart = time.clock()#当中是你的程序el ...

记录uni-app的时间选择器

记录uni-app的时间选择器相关推荐

最新文章

热门文章