Issue rendering default date on alert in ionic 4 - ionic-framework

Question

I am using Ionic 4 AlertController to create an alert that lets a user add a task. The issue is, that until a user clicks on the date input, no date shows. I have tried adding both a min and max as well.
Code is as follows
async addCustomTask() {
const alert = await this.alertController.create({
header: 'Add custom task',
inputs: [
{
name: 'task',
type: 'text',
placeholder: 'I would like to..'
},
{
name: 'dueDate',
type: 'date'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
return false;
}
}, {
text: 'Ok',
handler: (data) => {
this.addTask(data.task, moment.tz(data.dueDate, this.account.timezone));
}
}
]
});
await alert.present();
};
Looks like this when it loads up
The moment you click it, it all begins to work as needed. It submits as a date as well, in the correct format.
Ionic:
ionic (Ionic CLI) : 4.10.3 (/Users/sam/.nvm/versions/node/v11.0.0/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.0.0-rc.0
#angular-devkit/build-angular : 0.8.9
#angular-devkit/schematics : 0.8.9
#angular/cli : 6.2.9
#ionic/angular-toolkit : 1.2.2
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.0, (and 11 other plugins)
System:
NodeJS : v11.0.0 (/Users/sam/.nvm/versions/node/v11.0.0/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

Answer 1

My Current Ionic version is 4.12.0, needed an alert-popup to take input from user StartDate and EndDate from the user for a filter. What I learned is that it allows you to add the "date" type HOWEVER, it only supports "STRING" for value & max values. Also, remember not to mix the input types. The following is my code
private format_date(dt: any) {
var today = new Date(dt);
let dd: any = today.getDate();
let mm: any = today.getMonth() + 1;
const yyyy = today.getFullYear();
if (dd < 10) {
dd = `0${dd}`;
}
if (mm < 10) {
mm = `0${mm}`;
}
return `${yyyy}-${mm}-${dd}`;
}
async presentPopover() {
const dt = new Date();
this.firstDate = dt.getFullYear() + '-' + ((dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1) ) + '-01';
this.maxDate = this.format_date(dt);
this.lastDay = new Date(dt.getFullYear(), dt.getMonth() + 2, 0);
this.lastDay = this.format_date(this.lastDay);
if(new Date(this.lastDay) > dt) {
this.lastDay = this.format_date(dt);
}
const alerts = await this.alertController.create({
header: 'Filter',
inputs: [
{
name: 'fromDt',
type: 'date',
value: this.firstDate,
max: this.maxDate
},
{
name: 'toDt',
type: 'date',
value: this.lastDay,
max: this.maxDate
}
],
buttons:
[
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
},
{
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
this.fetchData();
}
}
]
});
await alerts.present();
}