文章目录
前言
uniapp小程序开发系列。本文实现一个简单时间选择控件。uniapp用个心仪时间控件真的麻烦。官方给得要么年月日，要么时分。产品只要年月日时分。这该怎么玩。旧项目没有引入ui框架，我也不想去引入，不然高低整一个vant 小程序版的。
uniapp生态中，有个插件市场，找了一通，是有时间控件。但是引入也是麻烦。没必要。下文基于网友给的案例再稍微改了改。对了 这是vue2 的 。
一、组件效果
二、组件代码
时间控件的实现代码，区分了闰年平年。需要秒的话，可以自行修改。
js
<template>
<div class="date-time" v-if="visible">
<div class="mask" @click.stop="close" />
<div class="box">
<div class="header">
<div class="determine" @click.stop="close">取消</div>
<div class="determine" @click.stop="confirm" :style="{color: themes.theme1 || '#FF4E09',}">确定</div>
</div>
<picker-view :indicator-style="indicatorStyle" :value="value" @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>
</div>
</div>
</template>
<script>
export default {
data() {
return {
years: [],
year: null,
months: [],
month: null,
days: [],
day: null,
hours: [],
hour: null,
minutes: [],
minute: null,
value: [],
indicatorStyle: `height: 50px;`,
timeValue: ''
}
},
props: {
visible: {
type: Boolean,
default: false
},
themes: {
type: Object,
default() {
return {};
},
},
interviewTime: {
type: String,
default() {
return '';
},
}
},
mounted() {
this.init();
},
watch: {
visible: {
handler(newValue, oldValue) {
if (newValue) {
if (this.interviewTime) {
this.init(this.interviewTime);
}
}
},
immediate: false,
deep: true
}
},
methods: {
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()
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(); i <= date.getFullYear()+2; 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)
} else {
minutes.push(i)
}
}
this.years = years
this.year = year
this.months = months
this.month = month
this.days = days
this.day = day
this.hours = hours
this.hour = hour
this.minutes = minutes
this.minute = minute
this.value = [0, month-1, day-1, hour, minute]
},
bindChange: function (e) {
const val = e.detail.value
console.log('日期变化',val)
let year = this.years[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)
}
this.days = days;
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
this.hour = this.hours[val[3]]
this.minute = this.minutes[val[4]]
},
// 补0
padZeroStr(originStr){
if(+originStr < 10){
return String(originStr).padStart(2,'0')
}
return originStr + ''
},
close(){
this.$emit('update:visible', false);
},
confirm() {
let monthStr = this.padZeroStr(this.month)
let dayStr = this.padZeroStr(this.day)
let hourStr = this.padZeroStr(this.hour)
let minuteStr = this.padZeroStr(this.minute)
this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
this.$emit('confirmPickDate', this.timeValue);
this.$emit('update:visible', false);
},
},
}
</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>使用
在你需要的文件引入组件。
html
<template>
<view class="example-body" @click="showDatePickClick">
<view class="uni-input" style="text-align: right;" >{{interviewTime.substring(0,16)}}</view>
<my-date-picker :visible.sync="visible" :interviewTime="interviewTime" @confirmPickDate="confirmPickDate" />
</view>
</template>
<script>
import myDatePicker from '../components/date-picker.vue';
export default {
name: "XXXX-XX",
props: {
address: Array
},
components: {
myDatePicker
},
data() {
return {
interviewTime:'',
visible:false
}
},
mounted(){
this.interviewTime = this.getDate()
},
methods: {
confirmPickDate(dateStr){
console.log('confirmPickDate',dateStr)
this.interviewTime = dateStr
this.$emit("getPickDate", dateStr);
},
showDatePickClick(){
console.log('showDatePickClick')
this.visible = true
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}/${month}/${day} 00:00:00`;
}
}
}
</script>
<style scoped>
.example-body {
width: 270px;
height: 30px;
background-color: #fff;
}
</style>总结
以上就是今天要讲的内容，本文讨论了用uniapp 实现小程序时间选择组件 仅仅支持 年月日时分 的简单版本。