离子 2 日期选择器

Question

我是 ionic 的新手，正在玩 ionic 2 beta。我正在尝试使用像 in the documentation.

这样的 cordova 插件来实现本机日期选择器

我已经完全 copy/paste 这个例子，我在 Nexus 5 模拟器和 Archos android phone.

上得到 "ReferenceError: DatePicker is not defined

openDatePicker() {
    var options = {
      date: new Date(),
      mode: 'date'
    };

    function onSuccess(date) {
        alert('Selected date: ' + date);
    }

    function onError(error) { // Android only
        alert('Error: ' + error);
    }

    DatePicker.show(options, onSuccess, onError);
  }

我搜索了很多，没有找到任何相关信息，也许我在 Ionic 2 上使用 cordova 插件做错了？

Answer 1

缺少这方面的文档（提出这个问题时的 Ionic Native 文档仍然是一个 WIP）。

ionic-native 是一个独立于框架的模块，因此您需要安装它：

# from within your project directory
npm install --save ionic-native

如果您还没有安装您尝试使用的插件，您还需要安装：

#from within your project directory
ionic plugin add cordova-plugin-datepicker

然后在您的代码中导入 DatePicker 插件：

import {DatePicker} from 'ionic-native';

然后与 Ionic 1 一样，在 Cordova 准备就绪之前，您将无法使用任何插件。这意味着您可以使用 Platform.ready 或等待 deviceready 事件在 window:

上触发

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);
      }
    );
  });
}

还需要注意的一件事是 ionic-native 将回调包装在一个承诺中。

Answer 2

试试这个：

step 1: npm install @ionic-native/core --save
step 2: npm install --save @ionic-native/date-picker
step 3: add this plugin to your app.module.ts
          i. import { DatePicker } from '@ionic-native/date-picker';
         ii. providers:[DatePicker]
step 4: import { DatePicker } from '@ionic-native/date-picker';
step 5: Inject in constructor:
        constructor(public datePicker: DatePicker) { }
step 6: You can access datePicker like: 
        this.datePicker.show({
         date: new Date(),
             mode: 'date',
             androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
         }).then(
             date => console.log('Date: ', date),
             err => console.log('Error while getting date: ', err)
         );

离子 2 日期选择器

ionic 2 DatePicker

cordova

ionic2