Rc1 - Default DateTime picker to Today

Ionic Framework ionic-v3
1

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.

3 Likes
2

No news? Same problem here

3

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

4

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;  

if(this.mydate===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.

5

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:

6

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).

7

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.

8

You may want to chime in on this PR.

9

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.