Ionic 3 日期时间选择器不显示日期

Posted 2023-04-12

【中文标题】Ionic 3 日期时间选择器不显示日期

【英文标题】：Ionic 3 date time picker not showing days

【发布时间】：2018-05-28 21:03:30

【问题描述】：

我正在使用以下代码显示仅包含每周日期的日期时间选择器。但是选择器只显示从 1 到 31 的数字。

     <ion-list>
        <ion-item>
          <ion-label>Date</ion-label>
          <ion-datetime displayFormat="DDDD" pickerFormat="DDDD">
          </ion-datetime>
        </ion-item>
    </ion-list>

离子日期选择器的文档说“DDDD”将显示日期的全名。但它不起作用。有人能解释我哪里错了吗？

我想在日期时间选择器列表中包含日期名称，例如-星期日、星期一、星期二。

【问题讨论】：

我遇到了同样的问题，你找到解决办法了吗？

您好，请您使用stackblitz.com提供您的代码

【参考方案1】：

您可以在这里获取 DAY MONTH YEAR 和 HOUR MINUTE，如果需要，您可以删除 HOUR 和 MINUTE

<ion-datetime displayFormat="DD MMM, YYYY  HH:mm" [min]="minDate" [max]="maxDate" cancelText="Annuler" doneText="Valider" #datePicker"></iondatetime>

【参考方案2】：

所以 Ionic 替换了 pickerFormat 中的 DDD 和 DDDD。我不知道为什么。 此代码在ion-datetime 模板中：

template.replace('DDDD', '~').replace('DDD', '~');

如果您必须在选择器中显示日期，最好使用外部模块，例如 Angular Material 或使用日期数组创建自己的 select。

【参考方案3】：

老实说，我也遇到了这个问题，因为这在 ion-datetime 选择器中不可用，我只是决定在几天内使用我自己的select，然后使用时间选择器。

     <ion-item>
        <ion-select [(ngModel)]="selectedDay">
            <ion-option [value]="day" *ngFor="let day of daysOfWeek"> day </ion-option>
        </ion-select>
    </ion-item>
    <ion-item>
        <ion-datetime displayFormat="h:00 a" pickerFormat="h a" [(ngModel)]="selectedHour"></ion-datetime>
    </ion-item>

daysOfWeek 只是一个数组：

 daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednsday', 'Thursday', 'Friday', 'Saturday']

然后使用selectedDay 和selectedHour 我可以创建我的时间戳。

【参考方案4】：

只有在选择日期并关闭日期选择器时才会显示日期名称，而不是在打开并显示在屏幕底部的日期选择器界面中，如您在图片中显示的那样。

您可能想试试这个插件作为ion-datetime 的替代品：

https://ionicframework.com/docs/native/date-picker/

或

https://www.npmjs.com/package/cordova-plugin-datetimepicker

【讨论】：

离子日期时间选择器有两种不同的格式类型设置。 “选择器格式”和“显示格式”。如果picker format的值为“DDDD”，那么picker界面应该显示周天全称，而“DDDD”的显示格式是选择日期的结果，后面会显示选中周天的全称选择器关闭。所以他们为两个不同的地方进行了格式设置——选择器界面和输入值。而且您建议我的本机日期选择器插件没有任何选项只能显示每周日。