How to open date picker explicitly in Ionic 4? - ionic-framework

Question

I want to open ionic date time picker when I click a button(or when i set value in one picker it should open another date time picker).

Answer 1

Nice workaround:
add datetime component and hide it.
attach a reference to it.
make sure to display the value manually since the picker is hidden.
code example attached.
html:
<ion-col (click)="datePicker.open()" width-50>
<ion-icon name="calendar"></ion-icon>
<div>
{{ selected.toDate() | amDateFormat:'DD' }} {{ selected.toDate() | amDateFormat:'MMM' }}, {{ selected.toDate() | amDateFormat:'YYYY'}}
</div>
<ion-item no-lines hidden="true">
<ion-datetime #datePicker
text-center
(ionChange)="dateChanged($event)"
displayFormat="DD MMM, YYYY"
[(ngModel)]="date"></ion-datetime>
</ion-item>
</ion-col>
.ts:
import {Component, ViewChild} from '#angular/core';
import { DateFormatPipe } from 'angular2-moment';
import * as moment from 'moment';
#Component({
templateUrl: './awesome-compo/awesome.html',
pipes: [ DateFormatPipe ]
})
export class AwesomeCompo {
private selected: any = moment();
private date: any = moment().toISOString();
#ViewChild('datePicker') datePicker;
dateChanged(date) {
const { day, month, year } = date;
this.selected.year(year.value).month(month.text).date(day.value);
};
}
For a detailed answer: Full answer