如何在选择日期/年份之前默认将年份添加到 <ion-datetime>答案

【问题标题】：How to add Year to <ion-datetime> by default before choosing Date/Year如何在选择日期/年份之前默认将年份添加到 <ion-datetime>
【发布时间】：2018-04-24 12:53:23
【问题描述】：

我在表单中使用了 ion-datetime。即使在用户从日期选择器中选择年份之前，我也想默认将年份添加到我的表单中。

这是我的代码：

HOME.html

<ion-content padding>
  <div>
    <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)">
      <ion-list>

        <ion-item>
          <ion-label colot="primary" floating>
            Year
          </ion-label>
          <ion-datetime displayFormat="YYYY" formControlName="year" min="2000" max="{{date| date:'yyyy'}}" [disabled]="!user"></ion-datetime>
        </ion-item>
        <ion-item>

          <button ion-button block [disabled]="!user" (click)="addToTracker(rForm.value)">Submit To Tracker</button>
        </ion-item>

      </ion-list>
    </form>
  </div>

HOME.ts 重要代码：

this.date = new Date();

现在这可行，一旦用户选择了年份，我就可以正确地获取年份（我不想要除年份以外的任何东西） 问题是用户可以提交表单，而年份字段为空。为了克服那个（我不想使用ngModel，因为我试过了，它不允许我只使用年份，它需要一个ISO日期格式，所以一旦提交我得到了一个完整的日期，而不仅仅是年，不知道ngModel有没有别的办法）

所以我的想法是默认将当前 YEAR 放在那里...所以如果用户提交时没有一年，则默认情况下需要 2017 年。

我愿意接受建议！

非常感谢。

【问题讨论】：

标签： angular datetime ionic3

【解决方案1】：

以下是 TS 文件的代码，日期应转换为 ISOString 以在 Ionic 中正确呈现

   date : any = new Date().toISOString();
   currentYear : any = (new Date()).getFullYear();

下面是 HTML 文件的代码

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

请参阅link 以获得工作版本。

【讨论】：

日期选择器没有问题。完美地完成了这项工作！和它的原生。我的问题是我希望在用户自己选择日期之前已经默认选择默认年份。不需要你的所有代码。就是这样做的。
我也试过这个方法。问题是，一旦您单击提交，从表单中获取的 ion-datetime 字段的值将是完整日期，而不仅仅是年份，因为：` date : any = new Date().toISOString(); ` 所以实际发生的是，您只显示 YYYY，但其背后的真实数据是完整的。我需要的是仅显示 YYYY（年份）并实际仅提交 YYYY（年份）并在不使用干预的情况下默认显示 YYYY（年份）
再次在addPost方法中使用以下代码从ISO日期字符串中获取年份——new Date(this.date).getFullYear()
它是如何在我的系统上工作的``` this.minDate = moment(new Date()).subtract(1, 'months').toDate().toISOString(); this.maxDate = moment(new Date()).add(3, 'years').toDate().toISOString(); ```

【解决方案2】：

为时已晚，但也许其他人需要它。（对于离子 4）首先，您可以为此使用 ngmodel；

将此添加到 ts 文件 date:number =2017;

<ion-datetime display-format="YYYY" [(ngModel)]="date" formControlName="year" min="2000" max="{{date| date:'yyyy'}}" [disabled]="!user"></ion-datetime>

和其他选项添加 [value]="2017"

<ion-datetime display-format="YYYY" [value]="2017" formControlName="year" min="2000" max="{{date| date:'yyyy'}}" [disabled]="!user"></ion-datetime>

【讨论】：

【解决方案3】：

以下是 TS 文件的代码，日期应转换为 ISO 字符串才能在 Ionic 2/3/4 中正确呈现

添加 ts 允许用户选择未来年份的日期。

minDate: string = new Date().toISOString();

maxData : any = (new Date()).getFullYear() + 3;

enter image description here

【讨论】：