通过indexOf vue3输出选定日期之间的数据范围

hrysbysz  于 2023-02-24  发布在  Vue.js
关注(0)|答案(1)|浏览(166)

我在vue3上做了一个日期选择器,当选择两个日期时,我需要悬停所选日期之间的天数。我使用“indexOf”方法

:class="{
        active: currentMonthInNumber + '/' + date + '/' + currentYear === firstDay || currentMonthInNumber + '/' + date + '/' + currentYear === lastDay,
        between: between.includes(date),
      }"
      @click="choosing dates(date)"
<script>
data() {
return {
firstDay: false,
  lastDay: false,
  between: [],
methods: {
choosingDates(date) {
  date = new Date(this.currentYear, this.currentMonthInNumber - 1, date);
  const dateFormatter = Intl.DateTimeFormat('en-US');
  let newDate = dateFormatter.format(date)
  if (this.firstDay === false) {
    this.firstDay = newDate;
  } else if (this.lastDay === false) {
    this.lastDay = newDate;
    this.setBetween();
  }
},
setBetween() {
const start = new Date(this.firstDay);
  const end = new Date(this.lastDay);
  let date = new Date(start);
  while (date <= end) {
    console.log(date);
    let newDate = date.setDate(date.getDate() + 1);
    date = new Date(newDate);
    this.between.push(date);
  }
},

in console.log(date);显示firstDaylastday之间的所有日期,但:class之间不工作

erhoui1w

erhoui1w1#

试试这个(我不能检查它)

:class="{
        active:  isActive,
        between: isBetween,
}"
// why exist a space in "choosing dates(date)" ???
@click="choosingDates(date)"

computed: {
    isBetween() {
       return between.includes(date)
    },
    isActive() {
       return currentMonthInNumber + '/' + date + '/' + currentYear === firstDay || currentMonthInNumber + '/' + date + '/' + currentYear === lastDay
    }
}

相关问题