从v6开始，您可以（并且应该）将datetime-button与ion-modal或ion-popover一起使用：

<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime id="datetime"></ion-datetime>
  </ng-template>
</ion-modal>

更新：如果您需要wheel-style pickers，请使用prefer-wheel属性。
来源：Ionic UI Components → Datetime Button

用离子弹还是可以的。

<ion-item>
    <ion-label position="stacked">Date of birth</ion-label>
    <ion-input value="{{ user.birthDate | date: 'dd MMM yyyy' }}" id="date"></ion-input>
    <ion-popover trigger="date" >
        <ng-template>
            <ion-datetime presentation="date" [(ngModel)]="user.birthDate" locale="en-US"></ion-datetime>
        </ng-template>
    </ion-popover>
</ion-item>

所有的功劳都归功于Damir Arh，他在这里发布了解决方案：https://www.damirscorner.com/blog/posts/20220107-DatePickerPopupInIonic6.html

在Ionic v6中，ion-datetime已更改。要在表单中使用显示日期的文本字段并在弹出窗口中使用日历选取器，请按以下示例所示使用它（startdate是日期变量）：

<ion-row>
   <ion-col>Date:</ion-col>
   <ion-col id="open-date-input" class="ion-text-end" style="margin-right: 10px;">
     <ion-text>{{ startdate|date:'shortDate':undefined:this.translate.currentLang }}</ion-text>
   </ion-col>
   <ion-popover trigger="open-date-input" show-backdrop="false">
     <ng-template>
       <ion-datetime
          #popoverDate
          value="{{startdate}}"
          presentation="date"
          showDefaultButtons=true
          (ionChange)="startdate = popoverDate.value"
        ></ion-datetime>
     </ng-template>
   </ion-popover>          
</ion-row>

当然，您可以根据需要省略/替换ion-text中的日期格式管道。

我使用的是带有react和styled组件的ionic，下面我使用IonModal从我的代码库中提取了解决方案。

import React, {useState} from "react";
import styled from "styled-components";
import {IonDatetime, IonIcon, IonModal} from "@ionic/react";
import {caretDown, caretDownOutline} from "ionicons/icons";

const IonModalBox = styled(IonModal)`
      --height: '45%';
      &::part(content){
        position: absolute;
        bottom: 0;
      }
`

const DateTimePickerContainer = styled.div`
    display: flex;
    flex-direction: row;
    align-content: center;
    width: 100%;
`

const ValueContainer = styled.div`
    flex-grow: 1;
`

interface DateTimePickerComponentProps {
    value: string | null;
}

export const DateTimePickerComponent: React.FC<DateTimePickerComponentProps> = (props) => {
    const [value, setValue] = useState<string | null>(props.value);
    const [showDialog, setShowDialog] = useState(false);

    const onClickHandler = () => {
        setShowDialog(true);
    }
    const onIonChangeHandler = (value: string | null) => {
        setValue(value);
        setShowDialog(false);
    }

    return (
        <>
            <DateTimePickerContainer onClick={onClickHandler}>
                <ValueContainer>{value}</ValueContainer>
                <IonIcon md={caretDown} ios={caretDownOutline}/>
            </DateTimePickerContainer>
            <IonModalBox isOpen={showDialog} onDidDismiss={() => setShowDialog(false)}>
                <IonDatetime value={value}
                             onIonChange={e => onIonChangeHandler(e.detail.value || null)}
                             size={"cover"}
                             showDefaultButtons={true}/>
            </IonModalBox>
        </>

    )
}