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

Question

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

<DatePicker
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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？

Answer 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，我还没有看到任何关于如何手动更改颜色的建议。最好在插件页面上发布您的问题。