微信小程序使用日历需要禁用某些日期需求的实现

最新推荐文章于 2024-09-12 07:57:28 发布

一键写代码

最新推荐文章于 2024-09-12 07:57:28 发布

阅读量2.9k

点赞数 2

分类专栏：小程序前端技术积累

本文链接：https://blog.csdn.net/qq_42991509/article/details/118157551

版权

需求描述：

日历组件，某些日期被人选了，就不能再选，用一个颜色标记。用户可以选择部分能选的。

在这里插入图片描述
类似这样的需求图片。

办法1是，vant-ui 微信小程序插件本身的日期组件是可以实现的。

具体方法：


    <van-calendar
    title="日历"
    :show="true"
    :formatter="formatter1"
    color="#07c160"
    type="range"
    :show-confirm="false"
/>

我们可以通过`formatter`来自定义渲染内容。

      formatter1(day){
   
         // 周日全天不可选
        let week = day.date.getDay()
        if(week == 0){
   
            day.type = 'disabled_yes' // 很牛笔 很关键
        }
          const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
   
        if (date === 1) {
   
          day.topInfo = '劳动节';
        } else if (date === 4) {
   
          day.topInfo = '五四青年节';
        } else if (date === 11) {
   
          day.text = '今天';
        }
      }

      if (day.type === 'start') {
   
        day.bottomInfo = '入住';
      } else if (day.type === 'end') {
   
        day.bottomInfo = '离店';
      }

        return day
     },

重点：通过formate函数，我们可以指定日期day.type的类型为disabled 那么，禁用的样式就是官方自己的默认的日期禁用样式。

但是我们需要自定义禁用样式，那么 day.type = 'day–disabled_yes’设置为一个自定义的名称， vant的组件会自动生成一个 van-calendar__day--disabled_yes的类名，然后我们通过这个类名自己写样式就行了。

<style>
.van-calendar__day--disabled_yes {
   
  color:  red;
}
</style>

最后的效果就是这样子

在这里插入图片描述
但是这种方法有个坑，formate函数，只会在当月执行，其他月份，需要点击月份才能触发，并且担心性能问题。没有继续研究下去。

方法二：使用wx_calendar这个改写
源码地址：https://github.com/treadpit/wx_calendar
源码文档：https://treadpit.github.io/wx_calendar/v1/guide.html#%E5%BF%AB%E9%80%9F%E6%8E%A5%E5%85%A5

注意：他有v1 和v2两个版本，方式不一样。我使用的是v1版本

将src/component/calendar这个目录下的文件全部拷贝到自己的组件目录。

我的是wepy2框架都可以直接拷贝，原生小程序当然也可以直接用。

文档可以传入我们需要禁用的日期

使用示例demo

<template>
  <div class="container-wrap">
   <calendar calendarConfig="{
   {calendarConfig}}" />
  </div>
</template>
import wepy from '@wepy/core'

import store from '@/store'

import {
    disableDay } from '../components/calendar/main.js'
wepy.page({
   
  store,
  data: {
   
    calendarConfig: {
   
      multi: true,
      disableMode: {
     // 禁用某一天之前/之后的所有日期
        type: 'before'  // [‘before’, 'after']
        // date: '2020-03-24', // 无该属性或该属性值为假，则默认为当天
      },
      onlyShowCurrentMonth: false
      // defaultDay: '2018-3-6'
    }
  },
  computed: {
   

  },
  watch: {
   
  },
  methods: {
   
    initData() {
   
      // jump(2018, 6, 6)
      disableDay([
        {
   
          year: 2021,
          month: '06',
          day:

最低0.47元/天解锁文章