uniapp日期加减切换，点击切换-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp日期加减切换，点击切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先上完成后的页面：当前年年份不显示，不然完整显示。

uniapp日期加减切换，点击切换,笔记,uni-app,前端,java

可以切换和自定义选择。

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://www.toymoban.com/news/detail-784411.html

到了这里，关于uniapp日期加减切换，点击切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！