小程序基于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
        }
      })
    },

   }
})

至此算是基本完成,具体细节再根据项目要求接着调整

  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值