小程序基于vant calendar 修改成横向切换月份，点击左右两侧改变月份,并在需要的日期上加上标注-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序基于vant calendar 修改成横向切换月份，点击左右两侧改变月份,并在需要的日期上加上标注。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序基于vant calendar 修改成横向切换月份，点击左右两侧改变月份,并在需要的日期上加上标注

小程序基于vant calendar 修改成横向切换月份，点击左右两侧改变月份,并在需要的日期上加上标注。效果图如上，只是简单的完成

主要的思路就是，将vant的日历控件设置成平铺，然后将minDate和maxDate分别设置成当前月的第一天和最后一天。这样日历区域就只会显示一个月的内容，然后再自己加两个按钮，分别在点击事件中去替换minDate和maxDate的值，产生是点击切换月份的效果。日历上特殊日期的标注则通过formatter函数来控制

wxml中写法：

一个view包着两个按钮和一个日历，按钮用定位的方法，定位到左右，把日历的标题和副标题都隐藏掉，日历里面的那个年月标题直接去修改vant的源码样式，让它隐藏掉。然后用title="{{title}}"自己重新定义一个标题

这里是因为点击左右切换月份后，标题不再跟着变换，所以才想了这个办法，以后有更好的解决办法就不这样写

<view class="calendar-div">
  <view class="calendar-div-button">
    <view class="prov" bindtap="arrowLeft">前一月</view>
    <view class="next" bindtap="arrowRight">后一月</view>
  </view>
  <van-calendar
    title="{{title}}"
    poppable="{{ false }}"
    show-confirm="{{ false }}"
    show-mark="{{false}}"
    class="calendar-div-calendar"
    row-height="50"
    min-date="{{minDate}}"
    max-date="{{maxDate}}"
    default-date="{{defaultDate}}"
    show-subtitle="{{false}}"
    type="multiple"
    formatter="{{ formatter }}"
  />
</view>

js中的写法

formatter如果是要根据接口返回回来的值去做什么操作就可以卸载函数里面，通过setDate去更新data中的值，同样也是要有return

Component({

  data: {
      // 最大值和最小值都要保证是这个月, 默认值是今天，这样布局中才只会显示一个月
      minDate: new Date().getTime(),
      maxDate: new Date().getTime(),
      defaultDate: new Date().getTime(),
      title: new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月',
      // formatter一定要有返回值，不然报错
      formatter(day: any) {
        return day
      },
  },

  created() {
    this.setMinMaxDay()
    this.formatterFuc()
  },
  methods: {
    // 初始设置显示月份可选择的天数区间
    setMinMaxDay() {
      let nowYear = new Date(this.data.defaultDate).getFullYear();
      let nowMonth = new Date(this.data.defaultDate).getMonth() + 1;
        
        // new Date中日期1就是本月第1天，0就是上个月的最后一天
      this.setData({
        minDate: new Date( nowYear, (nowMonth - 1), 1).getTime(),
        maxDate: new Date( nowYear, nowMonth, 0).getTime()
      })
    },
    // 当前月上一个月
    arrowLeft() {
      let year = new Date(this.data.minDate).getFullYear();
      let month =  new Date(this.data.minDate).getMonth();

       // 修改min和max来改变月份显示区域，同时更新title
      this.setData({
        minDate: new Date(year, (month - 1), 1).getTime(),
        maxDate: new Date(year, month, 0).getTime(),
        title: year + '年' + (month) + '月'
      })
    },
    // 当前月下一个月
    arrowRight() {
      let year = new Date(this.data.minDate).getFullYear();
      let month =  new Date(this.data.minDate).getMonth();
      
      this.setData({
        minDate: new Date(year, (month + 1), 1).getTime(),
        maxDate: new Date(year, (month + 2), 0).getTime(),
        title: year + '年' + (month + 2) + '月'
      })
    },

    formatterFuc() {
      this.setData({
        formatter: function(day) {
          const month = day.date.getMonth() + 1;
          const date = day.date.getDate();
          if (month === 11) {
            if (date === 7) {
              day.bottomInfo = '立冬';
            } else if (date === 22) {
              day.topInfo = '小雪';
              day.className = 'blue-flag'
            } else if (date === 21) {
              day.text = '今天';
            }
          }
          return day
        }
      })
    },

   }
})

至此算是基本完成，具体细节再根据项目要求接着调整文章来源地址https://www.toymoban.com/news/detail-502534.html

到了这里，关于小程序基于vant calendar 修改成横向切换月份，点击左右两侧改变月份,并在需要的日期上加上标注的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！