uview-plus的DatetimePicker如何只选年份？

Question

uview-plus的DatetimePicker如何只选年份？就是选择时只显示年的一列

Answer 1

引自免费微信小程序：皆我百晓生

在UView Plus中，如果你想要创建一个仅可以选择年份的DateTimePicker，你需要自定义一个组件来实现这个功能。由于UView Plus本身并没有提供直接设置DateTimePicker为只选择年份的选项，所以需要手动调整其内部结构。

首先，你需要创建一个新的Vue组件，然后在其中覆盖默认的DateTimePicker样式，并移除月份和日期的部分，只保留年份的选择。这里是一个简单的示例：

<template>
  <view class="custom-date-picker">
    <picker
      :value="year"
      :range="years"
      :columns="columnCount"
      @change="handleChange"
    />
    <button slot="confirm" @click="onConfirm">确认</button>
    <button slot="cancel" @click="onCancel">取消</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      year: new Date().getFullYear(), // 当前年份作为初始值
      years: [], // 存储所有年份
      columnCount: 1, // 设置为一列
    };
  },
  created() {
    this.generateYears();
  },
  methods: {
    generateYears() {
      const startYear = 1900;
      const endYear = new Date().getFullYear() + 10; // 假设最多可以选到未来十年
      for (let i = startYear; i <= endYear; i++) {
        this.years.push({ value: i, label: i.toString() });
      }
    },
    handleChange(value) {
      this.year = value[0];
    },
    onConfirm() {
      // 在此处处理用户点击确认后的逻辑，例如触发事件并传递所选年份
      console.log("Selected Year:", this.year);
    },
    onCancel() {
      // 取消操作，关闭组件
    },
  },
};
</script>

<style scoped>
.custom-date-picker {
  display: flex;
  flex-direction: column;
}

.picker-slot-wrapper {
  display: none; /* 隐藏默认的月份和日期部分 */
}
</style>

在这个组件中，我们使用了picker组件来自UView Plus，并设置了columnCount为1，这样就只会显示一行（即年份）。同时，我们生成了一个包含从1900年至未来十年的所有年份数组，用于填充picker组件的范围。

为了使用这个自定义组件，你需要在你的主项目中引入它，并根据需要进行注册。例如，在App.vue中：

<template>
  <view>
    <custom-date-picker v-model="selectedYear" @confirm="handleConfirm"></custom-date-picker>
  </view>
</template>

<script>
import CustomDatePicker from '@/components/CustomDatePicker.vue';

export default {
  components: {
    CustomDatePicker,
  },
  data() {
    return {
      selectedYear: null,
    };
  },
  methods: {
    handleConfirm(year) {
      console.log("Selected Year in App:", year);
      // 这里是应用中处理确认按钮的方法，可以根据需要修改
    },
  },
};
</script>

现在，你可以在你的项目中的任何地方使用custom-date-picker组件，它将允许用户只选择年份。当用户点击确认后，会触发@confirm事件，你可以在这个事件处理器中获取所选的年份。