526互联

uniapp 只选择月份与日的时间选择器

发布时间 2023-08-07 14:27:56作者: __fairy

1、使用 <picker> 组件的 mode 属性设置为 "multiSelector"，然后通过设置 range 属性来提供可选的月份和日的列表。

<template>
  <view>
    <picker mode="multiSelector" :range="range" @change="onPickerChange">
      <view class="picker">
        {{ selectedDate }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range: [
        this.getMonthRange(),
        this.getDayRange()
      ],
      selectedDate: ''
    };
  },
  methods: {
    getMonthRange() {
      const months = [];
      for (let i = 1; i <= 12; i++) {
        months.push(i + '月');
      }
      return months;
    },
    getDayRange() {
      const days = [];
      for (let i = 1; i <= 31; i++) {
        days.push(i + '日');
      }
      return days;
    },
    onPickerChange(event) {
      const values = event.mp.detail.value;
      const month = this.range[0][values[0]];
      const day = this.range[1][values[1]];
      this.selectedDate = month + day;
    }
  }
};
</script>

<style>
.picker {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 28px;
  color: #333;
  background-color: #f5f5f5;
}
</style>

在上述代码中，我们使用 <picker> 组件并将 mode 属性设置为 "multiSelector"，表示多列选择器。然后，我们在 range 属性中提供了两个数组，分别表示月份和日的可选范围。

通过 getMonthRange 和 getDayRange 方法，我们生成了月份和日的数组范围。在这个示例中，我们分别生成了 1 到 12 月和 1 到 31 日的数组。你可以根据需要进行调整。

当选择器的值发生变化时，会触发 change 事件。我们通过 @change 监听事件，并在 onPickerChange 方法中获取选择的值，并根据选择的索引获取对应的月份和日。然后，我们将它们拼接起来，并将结果赋值给 selectedDate，以在界面上显示选定的日期。

最后，我们使用一个 view 元素来展示选择器的值，通过插值表达式 {{ selectedDate }} 将 selectedDate 绑定到界面上。