Question

我正在使用

<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="someVar"></ion-datetime>.

但是，如果我将今天的日期设置为变量，那么它将默认显示该值。我只需要选择它的日期。

Answer 1

xxx.html

<ion-datetime #changeTime displayFormat="YYYY-MM-DD"
   [(ngModel)]="changeDate"
   (ionChange)="handleChangeDate(changeDate)"</ion-datetime>

xxx.ts

@ViewChild('changeTime') changeDateTime: DateTime;

changeDate = '';
constructor() {
        let datePipe = new DatePipe('en-US');
        this.changeDate = datePipe.transform(new Date(), 'yyyy-MM-dd');
}
ionViewDidLoad() {
        this.changeDateTime.updateText = () => {};
}

handleChangeDate(changeDate: string) {
        this.changeDate = changeDate;
        this.changeDateTime._text = changeDate;
}

Answer 2

见这里：https://github.com/ionic-team/ionic/issues/9846

如果您使用的是Ionic 3.7或更高版本，他们会在initialValue元素上添加一项功能来设置ion-dateime。（万岁！感谢mlynch）

示例：

<ion-datetime displayFormat="MM/DD/YYYY" formControlName="someDateControl" (initialValue)="10/01/2017"></ion-datetime>

同样的方法也可以使用ngModel模板驱动的形式。

最好设置(initialValue)="someDateFunction()"而不是硬编码日期。

在组件的.ts文件to return the current local date/time for your timezone (instead of default GMT)中，您可以：

someDateFunction() {
  let timezoneOffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
  let localDateTime = (new Date(Date.now() - timezoneOffset)).toISOString().slice(0,-1);

  return localDateTime;
}

这会根据用户的位置将ion-datetime最小值默认为今天的日期，但会将该字段留空，直到实际选择并提交日期为止。如果你想自动将其设置为1个月或类似的东西，你只需要调整dateFunction。

Answer 3

不是官方解决方案，而是您案例中更好的解决方法。

以下是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();
         }

     }
 }

Answer 4

2021 年离子5

仍然不是官方解决方案所以我要解决：

在组件代码中声明一个变量，比如intialDate，并初始化为空字符串"" 在模板标记中，将 intialDate 设置为 [(ngModel)] 并将事件处理程序添加到 (tap) 事件在 (tap) 事件处理程序的组件代码中，将 intialDate 设置为您希望日期时间打开的日期（检查状态并相应地应用逻辑）自己处理 ionCancel 事件并根据状态和应用逻辑重置所有内容

xxx.html

<ion-datetime (tap)="dateFocus(intialDate)" (ionCancel)="intialDate.value = null" #inputRefDate2='ngModel' [(ngModel)]="intialDate" [name]="intialDate" displayFormat="DD-MMM-YYYY" pickerFormat="DD-MMM-YYYY"> </ion-datetime>

xxx.ts

dateFocus(obj) {if (!obj.value) {obj.value = new Date(this.currentDate).toISOString();}}

离子日期时间在ionic2 / ionic3中，我想弹出对话框显示当前日期，但是离子日期时间不显示当前日期

4 个答案: