Rc1 - Default DateTime picker to Today

I want a datetime picker that defaults to today when it is accessed and is bound to a blank value, such as when adding a new item. I’ve implemented the hack as described in this post: DateTime - default to todays date

The problem is that it actually sets the bound data to today as well. I don’t want that. It shouldn’t set the date until they actually pick it. I just want the picker to start at today instead of the max date. Is there some way to do this?

Also, is there a way to clear a date once they pick one? I can’t seem to type in the field or clear it with delete, and there is no clear button on the picker.


No news? Same problem here

Any updates on this topic? Looking to do the same…

I had to customize it to work. As far as I know, the functionality hasn’t been added yet, but I haven’t looked at it in a few releases. Here is my element with an added button to clear the value:

<ion-datetime name="mdp" id="mdp" #dateTime displayFormat="MM/DD/YYYY" [(ngModel)]="mydate"></ion-datetime>
<button item-right icon-only ion-button (click)="mydate=null"
					[class.hide]="mydate===null"><ion-icon name="close"></ion-icon></button>

Here is my abbreviated component code to show how to set the default to today if your value isn’t populated:

@ViewChild('dateTime') dateTime;
mydate: string = null;  

    this.dateTime.setValue(new Date().toISOString());

If I’m not misremembering, if you set a min/max on the datetime component, the default will be the max date regardless of this workaround. Also, your #dateTime item cannot be inside any *ngIf block or @ViewChild will fail.

Thanks. But I do have it inside a ngFor so cannot use reference variables in the template. On a related note, if you don’t set a max date, it defaults to end of current year. So effectively on December 30, you will only have 1 day to select from. No problem if the intent is to collect dates in the past (like DOB). but an issue if you want to use it in say a reservation form :slight_smile:

In my experience the datetime picker really hates it when you bind it to blank/invalid data. My rule of thumb is “always initialize its bound property to a valid ISO 8601 string”. If the problem is “how do I know whether the user chose that value or not?”, you can track that with a separate boolean that is flipped by (ionChange) / (ionCancel).

Makes sense. And I could apply opacity based on that boolean. Hopefully will be out of the box some day and this additional code could be avoided.

You may want to chime in on this PR.

I hadn’t even noticed that yet about ending on December 31st of the current year. I was just so glad to get it to default to today based on a solution from another thread. I will have to re-implement with the default bound value and opacity settings as mentioned.