本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题
所实现的效果如图
自定义月份
代码如下,注释齐全
- 本段代码用到scss
<template>
<view class="choose-range">
<view class="month-wrapper">
<view class="date-popover" tabindex="-1">
<view style="text-align: center">
<view class="flexbox head_box" >
<u-icon name="arrow-left" class="prev" @click.native="prevYear('up')"></u-icon>
<text class="yearClass">{{startY}}年</text>
<u-icon name="arrow-right" class="next" @click.native="nextYear('up', startY)"></u-icon>
</view>
<view class="flexbox monthItem">
<template v-for="(month, idx) in startMonth">
<view class="item" @click.native="selectMonth(month)" :key="idx" :class="{
'between': chooseBetween(month)
}">
<view class="monthText" :class="{
'start': chooseStart(month),
'disabled': chooseDisable(month)
}">
{{month.val}}
</view>
</view>
</template>
</view>
</view>
<view style="text-align: center">
<view class="flexbox head_box" >
<u-icon name="arrow-left" class="prev" @click.native="prevYear('down')"></u-icon>
<text class="yearClass">{{endY}}年</text>
<u-icon name="arrow-right" class="next" @click.native="nextYear('down', endY)"></u-icon>
</view>
<view class="flexbox monthItem">
<template v-for="(month, idx) in endMonth">
<view class="item" @click.native="selectMonth(month)" :key="idx" :class="{
'between': chooseBetween(month)
}">
<view class="monthText" :class="{
'start': chooseStart(month),
'disabled': chooseDisable(month)
}">
{{month.val}}
</view>
</view>
</template>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* chason-month uniapp 适用于小程序的月份选择器
* recentMonthDate {String} 截止日期 'YYYY-MM'
* 例子 <month-range :recentMonthDate="recentMonthDate" @getMonth='getMonth'></month-range>
* @getMonth 点击事件
* getMonth(data) { this.$emit('getDateObj', data) }
* 返回 { start: '2021-01', end: '2022-01' }
*/
import moment from 'moment'
export default {
name: 'choose-range',
props: {
recentMonthDate:{ type: String, default: '' },
},
data() {
return {
monthLabels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
startMonth:[],
endMonth:[],
startY: moment(new Date()).format('YYYY')-1,
endY: moment(new Date()).format('YYYY'),
selected:{},
selected1:{},
endDate: {},
flag: 0,
}
},
watch: {
recentMonthDate: {
immediate: true,
deep: true,
handler(val) {
this.endDate = {
year: moment(val).format('YYYY'),
month: moment(val).format('MM')
}
}
}
},
methods: {
// 上一年
prevYear(str){
if(str === 'up'){
this.startY -= 1
}else if(str === 'down'){
this.endY -= 1
}
this.pushMonth()
},
// 下一年
nextYear(str, year){
if(year == this.endDate.year) return
if(str === 'up'){
this.startY = this.startY*1 + 1
}else if(str === 'down'){
this.endY = this.endY*1 + 1
}
this.pushMonth()
},
// 浅蓝色筛选条件
chooseBetween(month){
if(this.selected.year != this.selected1.year){
if(this.selected.year>this.selected1.year){
if(this.selected.year == month.year){
if(month.month <= this.selected.month){
return true
}
}
if(this.selected.year > month.year && this.selected1.year < month.year){
return true
}
if(this.selected1.year == month.year){
if(month.month >= this.selected1.month){
return true
}
}
}else if(this.selected.year<this.selected1.year){
if(this.selected.year == month.year){
if(month.month >= this.selected.month){
return true
}
}
if(this.selected.year < month.year && this.selected1.year > month.year){
return true
}
if(this.selected1.year == month.year){
if(month.month <= this.selected1.month){
return true
}
}
}
}else if(this.selected.year == this.selected1.year){
if(month.year == this.selected.year){
if(this.selected.month > this.selected1.month){
if(month.month <= this.selected.month && month.month >= this.selected1.month){
return true
}
}else if(this.selected.month < this.selected1.month){
if(month.month >= this.selected.month && month.month <= this.selected1.month){
return true
}
}
}
}
},
// 选中条件
chooseStart(month){
if(this.selected.year != this.selected1.year){
if(month.year == this.selected.year){
if(month.month == this.selected.month){
return true
}
}
if(month.year == this.selected1.year){
if(month.month == this.selected1.month){
return true
}
}
}else{
if(month.year == this.selected.year){
if(month.month == this.selected.month){
return true
}
if(month.month == this.selected1.month){
return true
}
}
}
},
chooseDisable(month){
if(this.endDate.year == month.year){
if(this.endDate.month<month.month){
return true
}
}
},
// 选择月份
selectMonth(date){
if(this.endDate.year == date.year){
if(this.endDate.month<date.month){
return
}
}
if(this.flag === 2){
this.flag = 0
this.selected = {}
this.selected1 = {}
}
if(this.flag === 0){
this.selected = {
year: date.year,
month: date.month
}
}
if(this.flag === 1){
this.selected1 = {
year: date.year,
month: date.month
}
this.$emit('getMonth', this.getDate())
}
this.flag += 1
},
getDate(){
if(this.selected1.month<10){
this.selected1.month = '0' + this.selected1.month
}
if(this.selected.month<10){
this.selected.month = '0' + this.selected.month
}
let chooseDate = {}
if(this.selected.year < this.selected1.year){
chooseDate = {
start: this.selected.year + '-' + this.selected.month,
end: this.selected1.year + '-' + this.selected1.month
}
}else if(this.selected.year > this.selected1.year){
chooseDate = {
start: this.selected1.year + '-' + this.selected1.month,
end: this.selected.year + '-' + this.selected.month
}
} else {
if(this.selected.month < this.selected1.month){
chooseDate = {
start: this.selected.year + '-' + this.selected.month,
end: this.selected1.year + '-' + this.selected1.month
}
}else if(this.selected.month >= this.selected1.month){
chooseDate = {
start: this.selected1.year + '-' + this.selected1.month,
end: this.selected.year + '-' + this.selected.month
}
}
}
return chooseDate
},
// 填充月份
pushMonth(){
this.startMonth.splice(0, this.startMonth.length)
this.endMonth.splice(0, this.endMonth.length)
for(let i in this.monthLabels){
this.startMonth.push({val:this.monthLabels[i],year:this.startY,month:parseInt(i)+1})
this.endMonth.push({val:this.monthLabels[i],year:this.endY,month:parseInt(i)+1})
}
}
},
mounted() {
this.pushMonth()
}
}
</script>
<style scoped lang="scss">
.start{ color: #fff !important; background-color: #3C63EB; }
.end{ background-color: #55ffff; }
.between{ background-color: rgba(60, 99, 235, 0.1); }
.choose-range {
box-sizing: border-box;
.monthItem { margin-bottom: 16rpx; }
.head_box { height: 94rpx; line-height: 57rpx; }
.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
.yearClass {
padding: 0 16rpx;
color: rgba(0, 0, 0, 0.9);
line-height: 28rpx;
display: flex;
align-items: center;
// font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
margin: 0 43rpx;
}
.item {
flex: 1;
flex-basis: 25%;
height: 80rpx;
box-sizing: border-box;
.monthText{
// font-family: PingFang SC;
font-size: 30rpx;
line-height: 80rpx;
color: rgba(0, 0, 0, 0.9);
border-radius: 2px;
text-align: center;
width: 126rpx;
margin: 0 auto;
}
}
}
.date-popover {
overflow-x: hidden;
overflow-y: hidden;
outline: none;
width: 100%;
box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
background: #fff;
transition: opacity .1s ease;
position: absolute;
margin: auto;
z-index: 10;
}
.month-wrapper {
position: relative;
display: block;
min-width: 200px;
}
.next, .prev {
color: rgba(0, 0, 0, 0.3);
padding: 20rpx;
}
.next {padding: 20rpx;}
.disabled{ opacity: 0.6 !important; }
}
</style>
