ion-datetime always forces the date picker to be displayed-CodePudding

I use Ionic 6 with Angular. I want a time picker button for a stop watch functionality. Since I need only the time, and not the date, I have the following in my HTML:

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>Start Time</ion-label>
      <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

I just copy pasted this snippet from the official ionic sample at https://github.com/ionic-team/ionic-docs/blob/v4/src/demos/api/datetime/index.html

The above code works fine inside that sample, which is based on plain HTML/JS, using @ionic/[email protected]/ But when I plug this into my Ionic6/Angular code, it always displays the date picker with the bulky calendar. I do not have the need, nor the screen real estate, for the calendar. Changing the time format to something like hh/mm also does not have any effect.

How to make Ionic recognize the display format/picker format I want?

CodePudding user response：

Try like this

<ion-datetime presentation="time" displayFormat="h:mm" locale="en-US"></ion-datetime>

ion-datetime will use the hour cycle that is specified by the locale property by default. For example, if locale is set to en-US, then ion-datetime will use a 12 hour cycle.

more detail refer the ionic doc

Working example