Ion-datetime placeholder not working


#1

I can’t get the placeholder to work on ion-datetime. It works fine on ion-input and ion-select. Here is the markup:

<ion-datetime placeholder="Birthdate" formControlName="birthdate" displayFormat="YYYY-MM-DD" pickerFormat="YYYY-MM-DD" [min]="minimumBirthdate" [max]="maximumBirthdate"></ion-datetime>

Any ideas?


#2

What is the initial value of the birthdate control? If it’s an empty string, the placeholder works for me, albeit without any other attributes than formControlName and placeholder.


#3

Empty string

this.form = this.formBuilder.group({ birthdate: ['', [Validators.required]], });

Are you using ionic 2 or 3?

I’m on 2.


#4

Ionic versioning can be tricky. The number you really want is the version of the framework you are running:

$ npm ls ionic-angular
ionic-hello-world@0.0.0 /path/to/sandbox
└── ionic-angular@3.1.1

#5

Personnally I could never get the placeholder to work on <ion-datetime>.
What I do instead is using the method read there:

Which pre-fill my value with the current datetime in ISO UTC format (and then I do simple JS operations like split to re-format it like I want, combined with ngModel).


#6

No, I’m not using labels. I need placeholder to work so the users understand what the date means.


#7

Me neither I don’t use labels, it’s kind of a misunderstanding. It’s hard to tell whithout seeing your view code, but if you can prefill the [ngmodel] with a prepopulated value like I did, you don’t really need it, the <ion-datetime> will be correctly filled with whatever value you want (BUT it should be in ISO-68… string, anyways so that it pre-fills).

After, <ion-datetime> can be translated easily by arrays if that’s the issue (see DateTime Ionic docs --> Month Names and Day of the Week Names). And you can combine it with translate pipes too.

Hope it helps,


#8

Pre-filling in date doesn’t tell the user what they are supposed to do, e.g. enter their own birth date.

I guess I can write my own date control…


#9

@ericbl Then explain it above the select with simple plain html. I was explaining prefill because it helps, when you want to use (ng-model) and pass that value later. And that, simply placeholder does not work on ion-datetime (on Ionic 2).


#10

It works just fine for me.


#11

Hello rapropos, on Ionic 3 I guess? I’m still on Ionic 2. I edit my previous post to state it was Ionic 2.