Quasar中为QDate组件的多个日期范围设置不同颜色的实现方法咨询

你这个思路真的很赞！不过Quasar的QDate组件本身并没有直接支持给每个dateRange对象绑定color属性的内置功能，但我们可以通过自定义日期类的方式来实现这个需求，具体步骤和代码示例如下：

实现思路 #

核心是利用QDate的day-class属性，通过一个自定义方法判断每个日期属于哪个范围，然后给对应的日期单元格添加指定颜色的样式类。

具体代码实现 #

模板部分

<q-date 
  v-model="dateRanges" 
  range 
  readonly 
  :day-class="getDayClass"
/>

脚本部分

export default {
  data() {
    return {
      dateRanges: [
        {from: '1402/07/08', to: '1402/07/17', color: 'teal'},
        {from: '1402/07/18', to: '1402/07/20', color: 'red'},
        {from: '1402/07/25', to: '1402/07/30', color: 'secondary'}
      ]
    }
  },
  methods: {
    getDayClass(date) {
      // 将QDate传入的Date对象转换为和dateRanges一致的波斯历字符串格式
      const formattedDate = this.$q.date.formatDate(date, 'YYYY/MM/DD', { locale: 'fa' })
      
      // 遍历所有日期范围，判断当前日期是否在范围内
      for (const range of this.dateRanges) {
        // 将范围的起止日期转换为Date对象，方便比较
        const fromDate = this.$q.date.parseDate(range.from, 'YYYY/MM/DD', { locale: 'fa' })
        const toDate = this.$q.date.parseDate(range.to, 'YYYY/MM/DD', { locale: 'fa' })
        
        if (date >= fromDate && date <= toDate) {
          // 返回Quasar内置的背景色类，或者自定义类名
          return `bg-${range.color}`
        }
      }
      // 不在任何范围内则返回空
      return ''
    }
  }
}

补充说明

1. 日期格式处理：因为你的日期是波斯历（1402开头），所以用到了Quasar的$q.date工具并指定了locale: 'fa'，如果是公历日期，可以去掉locale参数，调整日期格式为对应格式即可。
2. 样式类选择：这里使用了Quasar内置的bg-[color]类（比如bg-teal、bg-red），如果需要自定义颜色，可以创建自己的CSS类：

.bg-custom-blue {
  background-color: #2196F3;
  color: #fff;
}

然后在dateRanges的color字段中填写custom-blue即可。
3. 日期比较准确性：一定要将字符串日期转换为Date对象（或时间戳）进行比较，避免直接字符串对比带来的逻辑错误。

备注：内容来源于stack exchange，提问作者amin hd