uniapp日期加减切换,点击切换
2024-01-10 10:32:25
先上完成后的页面:当前年年份不显示,不然完整显示。
可以切换和自定义选择。
html:样式和图片自定义。
<view class="image-text_30">
<image @click="delMonth" :src="require('@/static/home/zuo.png')" class="icon_4"></image>
<text @click="selectMonth" lines="1" class="text-group_12">{{ currentYear == new Date().getFullYear() ? currentMonth : currentYear + '年' + currentMonth }}月</text>
<image @click="addMonth" :src="require('@/static/home/you.png')" class="icon_5"></image>
</view>
<u-datetime-picker
:show="showDateTime"
v-model="dateTime"
@close="showDateTime = false"
@cancel="showDateTime = false"
@confirm="confirmDateTime"
mode="year-month"
closeOnClickOverlay
:formatter="formatter"
></u-datetime-picker>
JavaScript:
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
return value
},
confirmDateTime(time) {
this.currentMonth = new Date(time.value).getMonth() + 1
this.currentYear = new Date(time.value).getFullYear()
this.showDateTime = false
this.calendarDate = this.currentYear + '-' + this.currentMonth
},
delMonth() {
if (this.currentMonth == 1) {
this.currentMonth = 12
this.currentYear -= 1
} else {
this.currentMonth -= 1
}
this.setTime(this.currentYear, this.currentMonth)
},
addMonth() {
if (this.currentMonth == 12) {
this.currentMonth = 1
this.currentYear += 1
} else {
this.currentMonth += 1
}
this.setTime(this.currentYear, this.currentMonth)
},
setTime(year, month) {
this.dateTime = Number(new Date(year, month - 1))
this.currentMonth = new Date(year, month - 1).getMonth() + 1
this.currentYear = new Date(year, month - 1).getFullYear()
this.calendarDate = this.currentYear + '-' + this.currentMonth
},
代码逻辑上面还是可以优化的。懒得弄了
其实没难度,但是个人简单记录下,逻辑放这里,下次需要可以再copy。
文章来源:https://blog.csdn.net/qq_52856519/article/details/135495605
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!