uni-app 有没有月范围选择以及年范围选择的功能

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 有没有月范围选择以及年范围选择的功能

项目详情

开发环境、版本号、项目创建方式

项⽬目信息 详细信息
开发环境
版本号
项目创建方式
3 回复

去插件市场搜一搜


在uni-app中,原生的组件并没有直接提供月范围选择或年范围选择的功能。不过,你可以通过一些自定义的逻辑和组件来实现这些功能。以下是如何实现月范围选择和年范围选择的一些代码示例。

月范围选择

要实现月范围选择,你可以使用<picker>组件并结合一些数据处理逻辑。这里是一个简单的例子:

<template>
  <view>
    <picker mode="multiSelector" :range="monthRanges" @change="onMonthRangeChange">
      <view class="picker">{{selectedMonths.join(' - ')}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedMonths: [0, 0], // 初始选择为第1年的第1个月和第几个月(0-based index)
      monthRanges: this.generateMonthRanges()
    };
  },
  methods: {
    generateMonthRanges() {
      const years = Array.from({length: 10}, (_, i) => i + 2023); // 生成未来10年的年份数组
      let ranges = [];
      years.forEach(year => {
        for (let month = 0; month < 12; month++) {
          ranges.push(`${year}-${String(month + 1).padStart(2, '0')}`);
        }
      });
      return [years.map(y => y), Array.from({length: 12}, (_, i) => i + 1).map(m => `${m}`)];
    },
    onMonthRangeChange(e) {
      this.selectedMonths = e.detail.value;
      const [yearIndex, monthIndex] = e.detail.value;
      const startMonth = this.monthRanges[0][yearIndex] + '-' + String(this.monthRanges[1][monthIndex - (monthIndex > 0 ? 0 : 12) + 1].padStart(2, '0'));
      const endMonth = this.monthRanges[0][this.selectedMonths[0]] + '-' + String(this.monthRanges[1][this.selectedMonths[1]].padStart(2, '0'));
      console.log(`Selected Month Range: ${startMonth} - ${endMonth}`);
    }
  }
};
</script>

年范围选择

年范围选择可以通过类似的逻辑实现,但更为简单,因为只需要处理年份:

<template>
  <view>
    <picker mode="multiSelector" :range="yearRanges" @change="onYearRangeChange">
      <view class="picker">{{selectedYears.join(' - ')}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedYears: [0, 10], // 初始选择为第1个到第11个年份(0-based index)
      yearRanges: Array.from({length: 20}, (_, i) => i + 2023)
    };
  },
  methods: {
    onYearRangeChange(e) {
      this.selectedYears = e.detail.value;
      console.log(`Selected Year Range: ${this.yearRanges[e.detail.value[0]]} - ${this.yearRanges[e.detail.value[1]]}`);
    }
  }
};
</script>

这两个示例展示了如何使用<picker>组件和数据处理逻辑来实现月范围选择和年范围选择。你可以根据实际需求进一步调整和扩展这些代码。

回到顶部