Question

我正在使用ion-datetime和我的表单。我想在用户从datepicker中选择年份之前默认添加到我的表单年份。

这是我的代码：

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年。

我愿意接受建议！

非常感谢。

Answer 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了解工作版本。

Answer 2

为时已晚，但也许有人需要它。（适用于Ionic 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>

Answer 3

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

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

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

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

enter image description here

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

3 个答案: