Ionic 2/3 - ion-datetime - 设置最大值将默认年份更改为最大值答案

【问题标题】：Ionic 2/3 - ion-datetime - setting max is changing a default year to its maxIonic 2/3 - ion-datetime - 设置最大值将默认年份更改为最大值
【发布时间】：2018-02-03 03:19:03
【问题描述】：

在 Ionic 2/3 应用程序中，我想使用 ion-datetime 及其 datepicker 组件。它几乎可以正常工作。

我有两个日期 - 开始和结束，它们与我的控制器属性绑定。在我的控制器中，我还设置了两个日期的最小值和最大值。

问题是 - 当我为任何日期设置 max 属性时，datepicker 中的默认日期设置为其年份（例如，如果我将 max 设置为 2020，datepicker 中的默认日期将为 2020 年 1 月 1 日）。 如何强制将默认日期显示为今天？）。它总是使用最大年份的一月一日作为默认值。

屏幕截图示例：我已将最大日期设置为 25/08/2018。当我打开日期选择器时，默认日期是 2018 年 1 月 1 日。当我将最大日期更改为 2020 年 8 月 25 日时，也将是 2020 年 1 月 1 日。这不是预期的行为。

我的模板：

<ion-item>
  <ion-label stacked>Start:</ion-label>
  <ion-datetime [max]="startMax" [min]="startMin"
 displayFormat="DD/MM/YYYY" [(ngModel)]="start" 
(ionChange)="startDateChanged($event)"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label stacked>End:</ion-label>
  <ion-datetime [min]="endMin" [max]="endMax" 
displayFormat="DD/MM/YYYY" 
[(ngModel)]="end"
(ionChange)="endDateChanged($event)"></ion-datetime>
</ion-item>

我的控制器：

export class NewRequestStep2 {
  start: any;
  end: any;
  startMin: any;
  startMax: any;
  endMin: any;
  endMax: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.startMin = moment().format();
    this.startMax = moment().add(1, 'year').format();
    this.endMin = this.startMin;
    this.endMax = this.startMax;
  }



startDateChanged(event) {
    console.log(event);
    console.log(this.start);
    console.log(this.end);
    if (this.end) {
      if (moment(this.start) > moment(this.end)) {
        this.end = null;
        console.log('Invalid end');
      }
    }
  }

  endDateChanged(event) {
    console.log(event);
    console.log(this.start);
    console.log(this.end);
    if (this.start) {
      if (moment(this.start) > moment(this.end)) {
        this.start = null;
        console.log('Invalid start');
      }

    }
  }
}

【问题讨论】：

您阅读过文档吗？ ionicframework.com/docs/api/components/datetime/DateTime
我是这么想的 :) 我找不到解决方案
您是否尝试更改那一刻返回的数据格式？
@Microsmsm 我为什么要这样做？我要返回 ISO-8601，这就足够了。日期格式是正确的，问题是离子自动将我的结束日期设置为默认值（设置结束日期属性时），这是我不想要的。我想你没有理解我的问题。

标签： angular ionic-framework datepicker ionic2 momentjs

【解决方案1】：

只有在datepicker出现时才可以设置。

这里正在工作Plunker。

HTML：

<ion-list>
    <ion-item>
      <ion-label color="primary">Select Date</ion-label>
      <ion-input placeholder="Text Input" [value]="dataInicial | date:'dd/MM/yyyy'" (click)="open()"></ion-input>
    </ion-item>

    <ion-item no-lines hidden="true">
      <ion-datetime #datePicker displayFormat="DD/MM/YYYY" (ionCancel)="this.dataInicial  = null" [(ngModel)]="dataInicial" doneText="Feito" cancelText="Cancelar" [max]="maxDate">
      </ion-datetime>
    </ion-item>
  </ion-list>

TS：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular'; 

@Component({
     selector: 'page-home',
     templateUrl: 'app/home.page.html'
 })
 export class HomePage {

     appName = 'Ionic App';
     dataInicial: Date;
     maxDate: string;

     constructor(public neavController: NavController) {}
     @ViewChild('datePicker') datePicker;
     open() {
         if (!this.dataInicial) {
             this.dataInicial = new Date().toJSON().split('T')[0];
             setTimeout(() => {
                 this.datePicker.open();
             }, 50)
         } else {
             this.datePicker.open();
         }

     }
 }

【讨论】：

【解决方案2】：

尝试将start 和end 变量设置为组件初始化时的当前日期：

export class NewRequestStep2 {
  start: string = moment().format("YYYY-MM-DD");
  end: string = moment().format("YYYY-MM-DD");
  startMin: any;
  startMax: any;
  endMin: any;
  endMax: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.startMin = moment().format();
    this.startMax = moment().add(1, 'year').format();
    this.endMin = this.startMin;
    this.endMax = this.startMax;
  }



startDateChanged(event) {
    console.log(event);
    console.log(this.start);
    console.log(this.end);
    if (this.end) {
      if (moment(this.start) > moment(this.end)) {
        this.end = null;
        console.log('Invalid end');
      }
    }
  }

  endDateChanged(event) {
    console.log(event);
    console.log(this.start);
    console.log(this.end);
    if (this.start) {
      if (moment(this.start) > moment(this.end)) {
        this.start = null;
        console.log('Invalid start');
      }

    }
  }
}

【讨论】：

这将设置输入值，我希望它们在用户打开页面时为空。是否可以仅在 datepicker 出现时设置？
@dease 应该是可能的，但是当用户单击输入时，该字段将被填充。

【解决方案3】：

我和你一样有问题。就我而言，我有两个日期选择器，当我在第一秒选择开始日期时，应该从所选日期开始。我通过在第一个日期选择器的数据更改中添加设置超时来解决这个问题。

onFromDateChange() {
  setTimeout(t => {
    this.dateTimeToMin = this.regForm.controls['startDate']._value;
  }, 100);
}

【讨论】：