如何在 IONIC 2 中显示日期选择器？

Posted 2023-05-07

【中文标题】如何在 IONIC 2 中显示日期选择器？

【英文标题】：How to display Date-picker in IONIC 2?

【发布时间】：2016-12-17 07:25:58

【问题描述】：

我想在页面加载后立即显示 DatePicker。

<DatePicker
        android:layout_
        android:layout_
        android:id="@+id/datePicker"
        android:layout_gravity="center_horizontal|top"
        android:headerBackground="?attr/colorPrimary"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

我使用 Android Studio 并编写了上面的代码来获得如下图所示的输出。

我想使用 ionic 2 实现相同的功能，并编写了以下代码来获取日期选择器。

import Component from '@angular/core';
import DatePicker from 'ionic-native';
import Calendar from 'ionic-native';
import Platform from 'ionic-angular';

@Component(
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
)
export class HelloIonicPage 



constructor(platform: Platform) 
    platform.ready().then(() => 
      let options = 
        date: new Date(),
        mode: 'date'
      

  DatePicker.show(options).then(
    date => 
      alert('Selected date: ' + date);
    ,
    error => 
      alert('Error: ' + error);
    
  );
);

我得到了如下图所示的 DatePicker。

现在我的问题是如何获得与第一张图片中相同的 DatePicker？

【问题讨论】：

抱歉，我无法缩小图片尺寸

您能否提供一个应用程序的插件，您只需使用日历部分会有所帮助

【参考方案1】：

您正在使用 Ionic-Native 的 DataPicker。您可以研究更多有关 Ionic-Native 的信息，但简单的想法是它包含了用户需要的所有不同的 cordova 插件，以使其更容易。

对于 DataPicker，如果您查看源代码，它使用的是 cordova-plugin-datapicker 的插件。 (https://github.com/VitaliiBlagodir/cordova-plugin-datepicker)

在 README 下，您可以在初始化 DataPicker 时选择一系列选项。该插件仅适用于定义的 android 主题：

androidTheme - Android
Choose the theme of the picker
Type: Int
Values: THEME_TRADITIONAL | THEME_HOLO_DARK | THEME_HOLO_LIGHT | THEME_DEVICE_DEFAULT_DARK | THEME_DEVICE_DEFAULT_LIGHT
Default: THEME_TRADITIONAL

有关主题的更多详细信息，您可以查看在 DatePicker 插件中打开的这个问题。 (https://github.com/VitaliiBlagodir/cordova-plugin-datepicker/issues/180) 由于所有这些主题都是基于 Android API，我还没有看到任何关于如何手动更改颜色的建议。最好在插件页面上发布您的问题。

【讨论】：

它几乎接近我正在寻找的东西。但它显示为弹出窗口。有什么方法可以在页面上而不是弹出窗口上获取它？

使用 Ionic-Native 的日历而不是 DatePicker 怎么样？

它正在将用户从当前应用程序导航到日历应用程序。

如果您正在寻找日历，那么 DatePicker 将不是正确的选择，因为它纯粹是用于选择日期和时间。如果我是正确的，Ionic 2 中日历 UI 的开发尚未完成，因此不受支持。您可以查看此帖子并查看 Ionic 团队的回复。 (forum.ionicframework.com/t/calender-component/53782/3) 虽然可能还有其他方法可以解决，但我也不确定。