Ion-datetime placeholder not working

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?

1 Like

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.

Empty string

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

Are you using ionic 2 or 3?

I’m on 2.

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

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

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

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,

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…

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

It works just fine for me.

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