uniapp vue3 封装picker时间选择器 年月日时分秒
1、因为在uniapp中并没有完整的年月日时分秒，所以需要自己写一个组件常用
2、 封装好的组件实际效果
完整代码展示
confirmPickDate 在其他方法是改变后数据
用组件ref调用open(val) 是默认赋值回显
<template>
<view class="dateTimePicker-container">
<view class="date-time" v-if="visible">
<view class="mask" @click.stop="close" />
<view class="box">
<view class="header">
<view class="determine" @click.stop="close">取消</view>
<view class="determine" @click.stop="confirm" :style="{color: themes.theme1 || '#FF4E09',}">确定
</view>
</view>
<picker-view :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange"
class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
watch,
getCurrentInstance,
defineProps,
onMounted
} from 'vue'
const emits = defineEmits(["confirmPickDate"]);
let years = ref([]),
year = ref(null),
months = ref([]),
month = ref(null),
days = ref([]),
day = ref(null),
hours = ref([]),
hour = ref(null),
minutes = ref([]),
minute = ref(null),
second = ref(null),
seconds = ref([]),
pickerValue = ref([]),
indicatorStyle = ref('height: 50px;'),
timeValue = ref(''),
visible = ref(false)
// const {
// proxy
// } = getCurrentInstance();
let props = defineProps({
themes: {
type: Object,
default () {
return {}
}
},
interviewTime: {
type: String,
default: ''
}
})
onMounted(() => {
init()
})
const init = (interviewTime) => {
const date = interviewTime ? new Date(interviewTime) : new Date();
const Years = []
const Year = date.getFullYear()
const Months = []
const Month = date.getMonth() + 1
const Days = []
const Day = date.getDate()
const Hours = []
const Hour = date.getHours()
const Minutes = []
const Minute = date.getMinutes()
const Seconds = []
const Second = date.getSeconds()
let isDay = 30;
if (Month == 2) {
if ((Year % 4 == 0 && Year % 100 != 0) || (Year % 400 == 0)) {
console.log('闰年')
isDay = 29;
} else {
isDay = 28;
console.log('平年')
}
} else if ([1, 3, 5, 7, 8, 10, 12].includes(Month)) {
isDay = 31;
} else {
isDay = 30;
}
for (let i = date.getFullYear() - 100; i <= date.getFullYear() + 100; i++) {
Years.push(i)
}
for (let i = 1; i <= 12; i++) {
Months.push(i)
}
for (let i = 1; i <= isDay; i++) {
Days.push(i)
}
for (let i = 0; i <= 23; i++) {
if (i < 10) {
Hours.push('0' + i)
} else {
Hours.push(i)
}
}
for (let i = 0; i <= 59; i++) {
if (i < 10) {
Minutes.push('0' + i)
Seconds.push('0' + i)
} else {
Minutes.push(i)
Seconds.push(i)
}
}
years.value = Years
year.value = Year
months.value = Months
month.value = Month
days.value = Days
day.value = Day
hours.value = Hours
hour.value = Hour
minutes.value = Minutes
minute.value = Minute
seconds.value = Seconds
second.value = Second
pickerValue.value = [Years.indexOf(Year), Month - 1, Day - 1, Hour, Minute, second]
return pickerValue.value
}
const bindChange = (e) => {
const val = e.detail.value
let Year = years.value[val[0]]
let isDay = 30,
Days = [];
if (val[1] + 1 == 2) {
if ((val[0] % 4 == 0 && Year % 100 != 0) || (Year % 400 == 0)) {
console.log('闰年')
isDay = 29;
} else {
isDay = 28;
console.log('平年')
}
} else if ([1, 3, 5, 7, 8, 10, 12].includes(val[1] + 1)) {
isDay = 31;
} else {
isDay = 30;
}
for (let i = 1; i <= isDay; i++) {
Days.push(i)
}
days.value = Days;
year.value = years.value[val[0]]
month.value = months.value[val[1]]
day.value = days.value[val[2]]
hour.value = hours.value[val[3]]
minute.value = minutes.value[val[4]]
second.value = seconds.value[val[5]]
}
const padZeroStr = (originStr) => {
if (+originStr < 10) {
return String(originStr).padStart(2, '0')
}
return originStr + ''
}
const close = () => {
visible.value = false
}
//val时回显
const open = (val) => {
visible.value = true
if (val !== "" && val) {
// 调用convertDateString处理val，获取年份和其他值
const [yearVal, monthVal, dayVal, hourVal, minuteVal, secondVal] = convertDateString(val);
// 更新year.value和pickerValue
year.value = yearVal;
pickerValue.value = [years.value.indexOf(yearVal), monthVal, dayVal, hourVal, minuteVal, secondVal];
console.log(pickerValue.value, "pickerValue.value");
}
}
const confirm = () => {
let monthStr = padZeroStr(month.value)
let dayStr = padZeroStr(day.value)
let hourStr = padZeroStr(hour.value)
let minuteStr = padZeroStr(minute.value)
let secondStr = padZeroStr(second.value)
timeValue.value = `${year.value}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}:${secondStr}`;
emits('confirmPickDate', timeValue.value);
close()
}
// 将时间分割成数组
const convertDateString = (dateString) => {
// 此处简化处理，实际应根据dateString格式进行解析
let parts = dateString.split(/[- :]/);
return [
parseInt(parts[0], 10), // 年份
parseInt(parts[1], 10) - 1, // 月份减1以适配数组索引
parseInt(parts[2], 10) - 1, // 日减1以适配数组索引
parseInt(parts[3], 10), // 小时
parseInt(parts[4], 10), // 分
parseInt(parts[5], 10) // 秒
];
}
defineExpose({
open,
confirm
})
</script>
<style lang="scss" scoped>
.date-time {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99999;
.mask {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100vh;
}
.box {
position: absolute;
width: 100%;
bottom: 0;
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
overflow: hidden;
height: 600rpx;
.header {
height: 88rpx;
padding: 0 30rpx;
border-bottom: 1rpx solid #e5e5e5;
display: flex;
align-items: center;
justify-content: space-between;
.determine {
color: #333333;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
}
}
.picker-view {
width: 100%;
height: 400rpx;
}
.item {
height: 100rpx;
line-height: 100rpx;
align-items: center;
justify-content: center;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
</style>原文地址：https://blog.csdn.net/m0_61382303/article/details/140458443
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！