如何在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实现相同的功能，并编写下面的代码来获取datepicker。

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的DatePicker。您可以对Ionic-Native进行更多研究，但简单的想法是它包含了用户所需的所有不同的cordova插件，使其更容易。

对于DataPicker，如果查看源代码，它将使用cordova-plugin-datepicker中的插件。 （qazxsw poi）

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

https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

有关主题的更多详细信息，您可以查看DatePicker插件中打开的此问题。 （

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

）由于所有这些主题都基于Android API，我还没有看到任何关于如何手动更改颜色的建议。最好在插件页面上发布您的问题。