Ionic, ion-datetime show today's date selected when picker popped up

Ionic Framework ionic-v3
1

i am new to ionic framework and trying to use ion-datetime in ionic2.

When clicked on the ion-datetime, i need to show today’s date selected in picker popped up.

image

Thank you.

2

You could probably bind it to a variable set to today’s date:
<ion-datetime [(ngModel)]="someVar"></ion-datetime>

3

Firstly, thanks for the response.

I am using <ion-datetime (ionChange)="filter()" 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.

4

you could probably set someVar to null first, then bind a click function to it where you could set today’s date:

<ion-datetime [(ngModel)]="someVar" (click)="someFunc()"></ion-datetime>

then in your ts file, probably somethig like this

someFunc(){
  if(!this.someVar){
    // set someVar to today's date
  }

  // else do nothing since, someVar is probably set to a user's input by now
}

i hope this helps

5

Yeah, i tried this earlier but found one issue. When i set today’s date on a click function it is binding but it is not selected in date picker as screenshot below.

in html file

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

in ts file, used the following code

filter(){
this.someVar = new Date().toISOString();
}

image

Thank you.

6

filter() is triggered when you try selecting a value in your <ion-datetime> since you’ve bound it to (ionChange).

may I ask if you have tried changing it’s value by interacting with it?

7

sorry my bad, i bound it to (click) event but just copied the ion-datetime tag from my above post :confused:. Here is the original.

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

Thank you

8

it’s okay.
i looked into it in a plunkr and was surprised that it behaved that way.
unfortunately I cannot think of other ways that would exhibit the behaviour you want.

I’ve also found this.

and I think until this is resolved, you would have to stick to initializing your ngModel instead of giving it null as I previously suggested

9

ah Ok. Thanks for your prompt responses.

10

Have any issue ? I’m facing the same problem.

11

Hey i didnt get the solution for that instead (of using ion-datetime) i used
<ion-input type = "Date" clearInput [(ngModel)]="txtDate"></ion-input>
which shows a calendar.

12

Ok thanks !
It seems that the problem has still not been resolved anywhere in the forum.
I found this related post : Ionic ion-datetime: how to set default picker value without changing the model?

we are not alone :slight_smile:

13

@cee in your html file put:

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

in your ts file put :slight_smile:

date= new Date().toISOString()
14

Thanks, but The problem with this solution (which I know) is that it initializes the form input with a value. I would like that if my entry has no value, then the field remains empty but in this case the opening of the picker is initialized to the date of the day

15

Then use

 <ion-datetime  placeholder=" " displayFormat="MM/DD/YYYY" [(ngModel)]="date" ></ion-datetime>
16

Thanks for your reply, but this doesn’t solve the problem as it forces today’s days to be displayed in the field by default… I would like to leave it blank until the user enters a date himself the current date

17

Well this goes against improving UX. But if you want to change the default value just use the placeholder

18

Got the exact same issue.
It would be great to have a way of giving the “picker” a default date if you open it for the first time before any value ist set.
At the moment if I open the datepicker, I get the MAX value pre-selected which is kind of dumb :frowning:

2 Likes
19

I have the same problem, someone can help me?

20

I found a solution look at this

stackoverflow