uni-app日期范围选择，颗粒度为`年-月`，支持`至今`选项

本文主要是介绍uni-app日期范围选择，颗粒度为`年-月`，支持`至今`选项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

1. 在components中创建sofar-picker.vue

<template><view :class="{'pickerMask':visable}" @click="maskClick" @touchmove.stop.prevent="returnHandle"><view class="picker-box" :class="{'picker-show':visable}"><view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle"><view class="time-box"><view @click="touchSelect(0)" class="time-item" :style="{color:touchIndex?'#000000':themeColor}"><text>{{startText}}</text><text>{{resultDate[0]}}</text></view><text>至</text><view @click="touchSelect(1)" class="time-item" :style="{color:touchIndex?themeColor:'#000000'}"><text>{{endText}}</text><text>{{resultDate[1]}}</text></view></view><view :style="{color:themeColor}" @click="pickerConfirm">确定</view></view><picker-view :value="pickerValue" @change="pickerChange" class="picker-view" :indicator-style="indicatorStyle" @tap.stop="returnHandle"><picker-view-column><view class="picker-item" v-for="(item,index) in yearList" :key="index">{{index>0||touchIndex<1? item+'年' : item+'年' }}</view></picker-view-column><picker-view-column><view class="picker-item" v-for="(item,index) in monthList" :key="index"><text v-show="pickerValue[0]>0||touchIndex<1">{{item}}月</text></view></picker-view-column></picker-view></view></view>
</template><script>export default {name: 'sofarPicker',props: {defaultDate: {type: Array,default: () => []},visable: {type: Boolean,default: false},minYear: {type: Number,default: 1990,},separator: {type: String,default: '.'},themeColor:{type: String,default: '#10BE9D'},startText: {type: String,default: '开始时间'},endText: {type: String,default: '结束时间'}},data() {const date = new Date();const yearList = [];const year = date.getFullYear();const monthList = [];const month = date.getMonth() + 1;for (let i = this.minYear; i <= date.getFullYear(); i++) {yearList.unshift(i);}for (let i = 1; i <= 12; i++) {monthList.push(i);}return {indicatorStyle: 'height: 100rpx;',touchIndex: 0,yearList: yearList,monthList: monthList,year: year,month: month,pickerValue: [0, month - 1],resultDate: []}},mounted() {this.setDate()},methods: {returnHandle(){},maskClick() {this.$emit('update:visable', false)},setDate() {if (this.defaultDate.length > 0) {let date = this.defaultDate[0]this.resultDate = this.defaultDatethis.setPicker(date)} else {let startTime = this.year + this.separator + this.monththis.resultDate = [startTime, '至今']}},setPicker(date) {console.log('setPicker');console.log(date);let startTime = this.year + this.separator + this.monthif (date === '至今') {this.pickerValue = [0, 0]} else {let dateArray = date.split(this.separator)let yearIndex = this.yearList.indexOf(Number(dateArray[0]))let monthIndex = this.monthList.indexOf(Number(dateArray[1]))this.pickerValue = [yearIndex, monthIndex]}	},getDate(date) {let result = ''let year = this.yearList[date[0]]let month = this.monthList[date[1]]if (year === '至今') {result = '至今'} else {result = year + this.separator + month}this.resultDate[this.touchIndex] = result},touchSelect(val) {console.log('touchSelect');let date = this.resultDate[val]if (this.touchIndex === val) {return} else {if (val) {this.yearList.unshift('至今')} else {this.yearList.splice(0, 1)}this.touchIndex = val}if (date) {this.setPicker(date)}},pickerChange(e) {this.pickerValue = e.detail.valuethis.getDate(e.detail.value)},pickerConfirm() {const { resultDate, year, month } = thislet nowTime = new Date(year+'/'+month).getTime()let startTime = new Date(resultDate[0]).getTime()let endTime = resultDate[1] === '至今' ? nowTime : new Date(resultDate[1]).getTime()if (startTime <= endTime && endTime <= nowTime) {this.$emit('confirm', resultDate)this.maskClick()} else {uni.showToast({title: '时间范围错误！',icon: 'none'})}}}}
</script><style lang="scss" scoped>.pickerMask {position: fixed;z-index: 998;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);}.picker-box {position: fixed;bottom: 0;left: 0;width: 100%;transition: all 0.3s ease;transform: translateY(100%);z-index: 998;.operate-box {display: flex;align-items: center;justify-content: space-between;padding: 18rpx 30rpx;background-color: #FFFFFF;text-align: center;font-size: 30rpx;border-bottom: 2rpx solid #e5e5e5;.time-box {width: 60%;display: flex;align-items: center;justify-content: space-between;.time-item {display: flex;flex-direction: column;}}}}.picker-show {transform: translateY(0);}.picker-view {width: 750rpx;height: 600rpx;background-color: #FFFFFF;.picker-item {height: 100rpx;display: flex;align-items: center;justify-content: center;text-align: center;}}
</style>

2. 使用

<template><view class="content"><view class="header"><view class="date-item">年月范围：{{startTime}} - {{endTime}}</view></view><button class="date-btn" type="default" @click="openPicker">打开</button><sofar-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></sofar-picker></view>
</template><script>import sofarPicker from '@/components/sofar-picker/sofar-picker.vue'export default {components: {sofarPicker},data() {return {pickerVisable: false,defaultDate: [],startTime: '',endTime: ''}},methods: {openPicker() {this.pickerVisable = true},confirm(date) {this.startTime = date[0]this.endTime = date[1]}}}
</script><style>.header {width: 100%;padding: 60rpx 30rpx;display: flex;flex-direction: column;}.date-item {margin-bottom: 30rpx;}.date-btn {width: 500rpx;height: 80rpx;line-height: 80rpx;}
</style>

这篇关于uni-app日期范围选择，颗粒度为`年-月`，支持`至今`选项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---