Uniapp-小程序简单的时间选择组件-年月日时分

文章目录

前言
一、组件效果
二、组件代码
- 使用
总结

前言

uniapp小程序开发系列。本文实现一个简单时间选择控件。uniapp用个心仪时间控件真的麻烦。官方给得要么年月日，要么时分。产品只要年月日时分。这该怎么玩。旧项目没有引入ui框架，我也不想去引入，不然高低整一个vant 小程序版的。

uniapp生态中，有个插件市场，找了一通，是有时间控件。但是引入也是麻烦。没必要。下文基于网友给的案例再稍微改了改。对了这是vue2 的。

一、组件效果

二、组件代码

时间控件的实现代码，区分了闰年平年。需要秒的话，可以自行修改。

<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() + 1const 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 = yearsthis.year = yearthis.months = monthsthis.month = monththis.days = daysthis.day = daythis.hours = hoursthis.hour = hourthis.minutes = minutesthis.minute = minutethis.value = [0, month-1, day-1, hour, minute]},bindChange: function (e) {const val = e.detail.valueconsole.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]]},// 补0padZeroStr(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>

使用

在你需要的文件引入组件。

<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 = dateStrthis.$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>