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

mlmc2os5  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(164)

我想在页面加载后立即显示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?

whhtz7ly

whhtz7ly1#

您正在使用来自Ionic-Native的DataPicker。您可以研究更多关于Ionic-Native的信息,但简单的想法是,它 Package 了用户需要的所有不同的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,我还没有看到任何关于如何手动更改颜色的建议。最好在插件页面上发布您的问题。

相关问题