2 changed files with 528 additions and 3 deletions
@ -0,0 +1,521 @@ |
|||
<template> |
|||
<view> |
|||
<view v-if="pickerShow" class="picker" @click="backClick"> |
|||
<view class="main"> |
|||
<view class="header" @touchmove.stop.prevent @click.stop> |
|||
<view class="btn" @tap="getResult('cancel')" :style="{color: cancelTextColor}">{{cancelText}}</view> |
|||
<view class="btn" @tap="getResult('confirm')" :style="{color: confirmTextColor}">{{confirmText}}</view> |
|||
</view> |
|||
<view class="body" @click.stop @touchmove.stop.prevent> |
|||
<picker-view :value="valueArr" @change="change" class="picker-view" @pickstart="pickstart" |
|||
@pickend="pickend"> |
|||
<picker-view-column v-if="!reset && params.year"> |
|||
<view class="column" v-for="(item, index) in years" :key="index"> |
|||
{{ item }} |
|||
<text class="text" v-if="showTimeTag">年</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.month"> |
|||
<view class="column" v-for="(item, index) in months" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="text" v-if="showTimeTag">月</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.day"> |
|||
<view class="column" v-for="(item, index) in days" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="text" v-if="showTimeTag">日</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.hour"> |
|||
<view class="column" v-for="(item, index) in hours" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="text" v-if="showTimeTag">时</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.minute"> |
|||
<view class="column" v-for="(item, index) in minutes" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="text" v-if="showTimeTag">分</text> |
|||
</view> |
|||
</picker-view-column> |
|||
<picker-view-column v-if="!reset && params.second"> |
|||
<view class="column" v-for="(item, index) in seconds" :key="index"> |
|||
{{ formatNumber(item) }} |
|||
<text class="text" v-if="showTimeTag">秒</text> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'timePicker', |
|||
props: { |
|||
value: { |
|||
default: true, |
|||
type: Boolean |
|||
}, |
|||
// picker中需要显示的参数 |
|||
params: { |
|||
type: Object, |
|||
default () { |
|||
return { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: true, |
|||
minute: true, |
|||
second: true, |
|||
timestamp: false, |
|||
} |
|||
} |
|||
}, |
|||
//左上角文字 |
|||
cancelText: { |
|||
type: String, |
|||
default: '取消', |
|||
}, |
|||
|
|||
//右上角文字 |
|||
confirmText: { |
|||
type: String, |
|||
default: '确认', |
|||
}, |
|||
|
|||
//年月日开始时间 |
|||
beginDate: { |
|||
type: [String, Number], |
|||
default: '1990-1-1' |
|||
}, |
|||
|
|||
//年月日结束时间 |
|||
endDate: { |
|||
type: [String, Number], |
|||
default: '2050-12-31' |
|||
}, |
|||
|
|||
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02 || 默认当前时间 |
|||
defaultTime: { |
|||
type: String, |
|||
default: function(){ |
|||
let time = new Date(); |
|||
let year = time.getFullYear(); |
|||
let month = time.getMonth() + 1; |
|||
let day = time.getDate(); |
|||
let hour = time.getHours(); |
|||
let min = time.getMinutes(); |
|||
let ppn = time.getSeconds(); |
|||
let cover = function(par) { |
|||
par = par.toString()[1] ? par : "0" + par; |
|||
return par; |
|||
} |
|||
let str = [year, month, day].map(cover).join('-') +" "+ [hour, min, ppn].map(cover).join(":"); |
|||
return str; |
|||
} |
|||
}, |
|||
|
|||
// 是否显示后面的年月日中文提示 |
|||
showTimeTag: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
|
|||
// 是否允许通过点击背景关闭Picker |
|||
backClickClose: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
|
|||
//开始小时 |
|||
hourBegin: { |
|||
type: [Number, String], |
|||
default: '0' |
|||
}, |
|||
|
|||
//结束小时 |
|||
hourEnd: { |
|||
type: [Number, String], |
|||
default: '23' |
|||
}, |
|||
|
|||
//分钟间隔 |
|||
minutesInterval: { |
|||
type: [Number, String], |
|||
default: '1' |
|||
}, |
|||
//左上角文字颜色 |
|||
cancelTextColor: { |
|||
type: String, |
|||
default: '#000' |
|||
}, |
|||
//右上角文字颜色 |
|||
confirmTextColor: { |
|||
type: String, |
|||
default: '#1E7DEB' |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
pickerShow: false, |
|||
years: [], |
|||
months: [], |
|||
days: [], |
|||
hours: [], |
|||
minutes: [], |
|||
seconds: [], |
|||
year: 0, |
|||
month: 0, |
|||
day: 0, |
|||
hour: 0, |
|||
minute: 0, |
|||
second: 0, |
|||
reset: false, |
|||
valueArr: [], |
|||
moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init() |
|||
}, |
|||
computed: { |
|||
currentYear() { |
|||
return `${this.year}` |
|||
}, |
|||
currentMonth() { |
|||
return `${this.month}` |
|||
}, |
|||
beginYear() { |
|||
return (new Date(this.beginDate).getFullYear()) |
|||
}, |
|||
endYear() { |
|||
return (new Date(this.endDate).getFullYear()) |
|||
}, |
|||
beginMonth() { |
|||
return (new Date(this.beginDate).getMonth() + 1) |
|||
}, |
|||
endMonth() { |
|||
return (new Date(this.endDate).getMonth() + 1) |
|||
}, |
|||
beginDay() { |
|||
return (new Date(this.beginDate).getDate()) |
|||
}, |
|||
endDay() { |
|||
return (new Date(this.endDate).getDate()) |
|||
}, |
|||
}, |
|||
watch: { |
|||
currentYear() { |
|||
if (this.params.year) this.setMonths() |
|||
}, |
|||
currentMonth() { |
|||
this.setDays() |
|||
}, |
|||
value(val) { |
|||
this.pickerShow = val; |
|||
}, |
|||
pickerShow(val) { |
|||
this.init() |
|||
this.$emit("input", val); |
|||
} |
|||
}, |
|||
methods: { |
|||
//日期时间处理 |
|||
initTimeValue() { |
|||
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号 |
|||
let dfdate = this.defaultTime.replace(/\-/g, '/') |
|||
let bdate = this.beginDate.replace(/\-/g, '/') |
|||
let edate = this.endDate.replace(/\-/g, '/') |
|||
let time = null |
|||
time = new Date(bdate) |
|||
if (!!dfdate) { |
|||
time = new Date(dfdate) > new Date(bdate) ? new Date(dfdate) : new Date(bdate) |
|||
time = new Date(dfdate) > new Date(edate) ? new Date(edate) : new Date(dfdate) |
|||
} |
|||
// 获取年日月时分秒 |
|||
this.year = time.getFullYear() |
|||
this.month = Number(time.getMonth()) + 1 |
|||
this.day = time.getDate() |
|||
this.hour = time.getHours() |
|||
this.minute = time.getMinutes() |
|||
this.second = time.getSeconds() |
|||
}, |
|||
// 生成递进的数组 |
|||
generateArray: function(start, end) { |
|||
// 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加 |
|||
start = Number(start) |
|||
end = Number(end) |
|||
end = end > start ? end : start |
|||
// 生成数组，获取其中的索引，并剪出来 |
|||
return [...Array(end + 1).keys()].slice(start) |
|||
}, |
|||
getIndex: function(arr, val) { |
|||
let index = arr.indexOf(val) |
|||
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0 (转成相反数在减一)，导致条件不成立 |
|||
return ~index ? index : 0 |
|||
}, |
|||
init() { |
|||
this.valueArr = [] |
|||
this.reset = false |
|||
this.initTimeValue() |
|||
if (this.params.year) { |
|||
this.valueArr.push(0) |
|||
this.setYears() |
|||
} |
|||
if (this.params.month) { |
|||
this.valueArr.push(0) |
|||
this.setMonths() |
|||
} |
|||
if (this.params.day) { |
|||
this.valueArr.push(0) |
|||
this.setDays() |
|||
} |
|||
if (this.params.hour) { |
|||
this.valueArr.push(0) |
|||
this.setHours() |
|||
} |
|||
if (this.params.minute) { |
|||
this.valueArr.push(0) |
|||
this.setMinutes() |
|||
} |
|||
if (this.params.second) { |
|||
this.valueArr.push(0) |
|||
this.setSeconds() |
|||
} |
|||
}, |
|||
setYears() { |
|||
// 获取年份集合 |
|||
this.years = this.generateArray(this.beginYear, this.endYear) |
|||
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值 |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year)) |
|||
}, |
|||
setMonths() { |
|||
//结束开始年是同年 |
|||
if (this.endYear == this.beginYear) { |
|||
this.months = this.generateArray(this.beginMonth, this.endMonth) |
|||
} |
|||
//开始年为当前选择年 |
|||
else if (this.beginYear == this.year) { |
|||
this.months = this.generateArray(this.beginMonth, 12) |
|||
} |
|||
//结束年为当前选择年 |
|||
else if (this.endYear == this.year) { |
|||
this.months = this.generateArray(1, this.endMonth) |
|||
} else { |
|||
this.months = this.generateArray(1, 12) |
|||
} |
|||
let index = 0 |
|||
if (this.params.year && this.params.month) index = 1 |
|||
else index = 0 |
|||
this.valueArr.splice(index, 1, this.getIndex(this.months, this.month)) |
|||
this.month = this.months[this.valueArr[index]] |
|||
}, |
|||
setDays() { |
|||
let totalDays = new Date(this.year, this.month, 0).getDate() |
|||
//结束开始月份是同月份 |
|||
if (this.beginMonth == this.endMonth) { |
|||
this.days = this.generateArray(this.beginDay, this.endDay) |
|||
} |
|||
//开始月份为当前选择月 |
|||
else if (this.beginMonth == this.month && this.year == this.beginYear) { |
|||
this.days = this.generateArray(this.beginDay, totalDays) |
|||
} |
|||
//结束月份为当前选择月 |
|||
else if (this.endMonth == this.month && this.year == this.endYear) { |
|||
this.days = this.generateArray(1, this.endDay) |
|||
} |
|||
//正常月份 |
|||
else { |
|||
this.days = this.generateArray(1, totalDays) |
|||
} |
|||
|
|||
let index = 0 |
|||
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法 |
|||
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误 |
|||
if (this.params.year && this.params.month) index = 2 |
|||
else if (this.params.month) index = 1 |
|||
else if (this.params.year) index = 1 |
|||
else index = 0 |
|||
// 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值 |
|||
// 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始) |
|||
if (this.day > this.days.length) this.day = this.days.length |
|||
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day)) |
|||
}, |
|||
setHours() { |
|||
let bh = +this.hourBegin |
|||
let eh = +this.hourEnd |
|||
this.hours = this.generateArray(bh, eh) |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour)) |
|||
}, |
|||
setMinutes() { |
|||
if (+this.minutesInterval > 1) { |
|||
let inter = +this.minutesInterval < 60 ? +this.minutesInterval : 59; |
|||
for (let i = 0; i < 60; i += inter) { |
|||
this.minutes.push(i); |
|||
} |
|||
} else { |
|||
this.minutes = this.generateArray(0, 59) |
|||
} |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute)) |
|||
}, |
|||
setSeconds() { |
|||
this.seconds = this.generateArray(0, 59) |
|||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second)) |
|||
}, |
|||
backClick() { |
|||
this.backClickClose && this.close() |
|||
}, |
|||
open() { |
|||
this.pickerShow = true |
|||
}, |
|||
close() { |
|||
this.pickerShow = false |
|||
}, |
|||
// 小于10前面补0，用于月份，日期，时分秒等 |
|||
formatNumber(num) { |
|||
return +num < 10 ? '0' + num : String(num) |
|||
}, |
|||
// 标识滑动开始，只有微信小程序才有这样的事件 |
|||
pickstart() { |
|||
// #ifdef MP-WEIXIN |
|||
this.moving = true; |
|||
// #endif |
|||
}, |
|||
// 标识滑动结束 |
|||
pickend() { |
|||
// #ifdef MP-WEIXIN |
|||
this.moving = false; |
|||
// #endif |
|||
}, |
|||
// 用户更改picker的列选项 |
|||
change(e) { |
|||
console.log('change', e); |
|||
this.valueArr = e.detail.value; |
|||
let i = 0; |
|||
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度 |
|||
// 进入if规则，i会加1，保证了能获取准确的值 |
|||
if (this.params.year) this.year = this.years[this.valueArr[i++]]; |
|||
if (this.params.month) this.month = this.months[this.valueArr[i++]]; |
|||
if (this.params.day) this.day = this.days[this.valueArr[i++]]; |
|||
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]]; |
|||
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]]; |
|||
if (this.params.second) this.second = this.seconds[this.valueArr[i++]]; |
|||
}, |
|||
// 用户点击确定按钮 |
|||
getResult(event = null) { |
|||
// #ifdef MP-WEIXIN |
|||
if (this.moving) return; |
|||
// #endif |
|||
let result = {}; |
|||
// 只返回用户在this.params中配置了为true的字段 |
|||
if (this.params.year) result.year = this.formatNumber(this.year || 0); |
|||
if (this.params.month) result.month = this.formatNumber(this.month || 0); |
|||
if (this.params.day) result.day = this.formatNumber(this.day || 0); |
|||
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0); |
|||
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0); |
|||
if (this.params.second) result.second = this.formatNumber(this.second || 0); |
|||
if (this.params.timestamp) result.timestamp = this.getTimestamp(); |
|||
if (event) this.$emit(event, result); |
|||
this.close(); |
|||
}, |
|||
// 获取时间戳 |
|||
getTimestamp() { |
|||
// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容 |
|||
let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this |
|||
.second; |
|||
return new Date(time).getTime() / 1000; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.picker { |
|||
/* #ifndef APP-NVUE */ |
|||
display: block; |
|||
/* #endif */ |
|||
position: fixed; |
|||
z-index: 10; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 100vh; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
|
|||
.main { |
|||
width: 100%; |
|||
.column{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.header { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
padding: 0 40rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
font-size: 30rpx; |
|||
background: #fff; |
|||
position: relative; |
|||
|
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
border-bottom: 1rpx solid #eaeef1; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.btn { |
|||
padding: 16rpx; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
width: 100%; |
|||
height: 500rpx; |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
|
|||
.picker-view { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32rpx; |
|||
padding: 0 8rpx; |
|||
|
|||
.text { |
|||
font-size: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue