如何用dateClass()为Bootstrap Vue日历区间及起止日期添加多类名样式

问题根源 #

你原有代码使用互斥分支的三元判断，命中一个条件就仅返回对应单个类，自然无法叠加多个类。同时原有逻辑还存在两处明显错误：

• 结束日期的判断条件误写为匹配values[0]，永远不会触发end类
• 仅存储日期的“日”部分，跨月选择时会出现逻辑混乱

修复方案 #

核心思路

不要用互斥的三元判断，改用数组收集所有符合条件的类名，最后拼接为空格分隔的字符串返回，即可同时叠加多个类。同时修改日期存储逻辑，存完整的日期字符串避免跨月问题。

完整修复后代码

<template>
 <b-row>
    <b-col md="auto">
      <b-calendar v-model="value" weekday-header-format="short" hide-header nav-prev-year="disable" :date-info-fn="dateClass" @context="onContext" locale="en-US"></b-calendar>
    </b-col>
    <b-col>
      <p>Value: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
    </b-col>
  </b-row>
</template>

<script>
export default {
  name: 'calendar', 
   data() {
      return {
        value: '',
        // 存储起止日期的完整年月日字符串，避免跨月逻辑错误
        dateRange: [],
        context: null
      }
    },
    methods: {
      onContext(ctx) {
       this.context = ctx
       if(this.dateRange.length < 2){
         this.dateRange.push(ctx.selectedYMD)
         // 选完两个日期后自动排序，兼容用户先选结束日期再选开始日期的情况
         if(this.dateRange.length === 2) {
           this.dateRange.sort((a,b) => new Date(a) - new Date(b))
         }
       }else{
         this.dateRange = [ctx.selectedYMD]
       }
      },
       dateClass(ymd, date) {
         const classes = []
         // 只有选完2个日期才判断区间样式
         if(this.dateRange.length === 2) {
           const currentTs = date.getTime()
           const startTs = new Date(this.dateRange[0]).getTime()
           const endTs = new Date(this.dateRange[1]).getTime()
           // 区间内日期加inTrip类
           if(currentTs >= startTs && currentTs <= endTs) {
             classes.push('inTrip')
           }
           // 开始日期加start类
           if(ymd === this.dateRange[0]) {
             classes.push('start')
           }
           // 结束日期加end类
           if(ymd === this.dateRange[1]) {
             classes.push('end')
           }
         }
         // 拼接为空格分隔的类名字符串返回，无符合条件则返回空
         return classes.join(' ')
       }
    }
}
</script>

<style>
.inTrip{
  border-top:1px solid black;
  border-bottom:1px solid black;
}
.start{
background-color: #2E9CFF;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border:1px solid black
}
.end{
background-color: #2E9CFF;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border:1px solid black
}
</style>

内容的提问来源于stack exchange，提问作者luther wardle