如何配置Ionic DateTime以显示当前年份及未来年份？

当然可以！Ionic的DateTime组件完全支持配置成只显示当前及未来年份，我来给你说具体怎么弄：

核心配置思路 #

通过组件的min和max属性就能限定年份的可选范围：

• 将min设置为当前年份，直接过滤掉过往年份
• 将max设置为你期望的未来年份上限，可以是固定值，也可以动态计算

具体代码示例 #

Angular 版本 #

模板中配置组件：

<ion-datetime
  displayFormat="YYYY"
  min="{{ currentYear }}"
  max="{{ currentYear + 5 }}"
  [(ngModel)]="selectedYear">
</ion-datetime>

组件类中计算当前年份：

import { Component } from '@angular/core';

@Component({
  selector: 'app-year-picker',
  templateUrl: './year-picker.component.html'
})
export class YearPickerComponent {
  currentYear: number = new Date().getFullYear();
  selectedYear: string | undefined;
}

Vue 版本 #

模板部分：

<template>
  <ion-datetime
    display-format="YYYY"
    :min="currentYear"
    :max="currentYear + 5"
    v-model="selectedYear">
  </ion-datetime>
</template>

脚本部分：

<script setup>
import { ref } from 'vue';
const currentYear = ref(new Date().getFullYear());
const selectedYear = ref('');
</script>

React 版本 #

组件代码：

import { useState } from 'react';
import { IonDatetime } from '@ionic/react';

function YearPicker() {
  const currentYear = new Date().getFullYear();
  const [selectedYear, setSelectedYear] = useState('');

  return (
    <IonDatetime
      displayFormat="YYYY"
      min={currentYear.toString()}
      max={(currentYear + 5).toString()}
      value={selectedYear}
      onIonChange={(e) => setSelectedYear(e.detail.value!)}
    />
  );
}

export default YearPicker;

灵活调整的小技巧 #

• 如果想要固定未来年份上限，直接给max赋值具体年份即可，比如max="2030"
• 要是需要选择完整日期（年/月/日），可以把min设为当前日期的ISO字符串（new Date().toISOString().split('T')[0]），max设为未来某一天的ISO字符串，组件会自动过滤掉过往年份的日期
• 动态调整范围：根据业务逻辑实时修改min或max的值，比如用户选择不同场景时，更新未来年份的上限

内容的提问来源于stack exchange，提问作者lunbox