ion-datetime in ionic2/ionic3, I want to the pop dialog show current date, but ion-datetime not show current date

Question

I am using

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

But if i set today's date to the variable then it will show the value by default. I need to show the date when it is selected only.

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

See here: https://github.com/ionic-team/ionic/issues/9846

If you're using Ionic 3.7 or later, they've added a feature to set initialValue on the ion-dateime element. (Hooray! Thanks to mlynch)

Example:

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

The same approach should work w/an ngModel template-driven form as well.

Preferable to set (initialValue)="someDateFunction()" rather than hard-coding the date.

In the component's .ts file, to return the current local date/time for your timezone (instead of default GMT), you could have:

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

  return localDateTime;
}

This defaults the ion-datetime minimum value to today's date based on the user's location, but leaves the field blank until a date is actually selected and committed. If you want to automatically set it 1 month out or something similar, you just need to adjust the dateFunction.

Answer 3

Not an official solution but a better workaround in your case.

Here is working 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

Year 2021 ionic 5

Still Not an official solution So i'm going with work around:

Declare a variable in the component code, say intialDate, and initialize it to an empty string "" In the template mark up, set intialDate as the [(ngModel)] and add an event handler to the (tap) event In the component code of the (tap) event handler, set intialDate to the date you want the datetime to open with (check for state and apply logic accordingly) Handle the ionCancel event yourself and reset everything as per the state and app logic

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