ionic 2 DatePicker [英] ionic 2 DatePicker

问题描述

我是离子的新手，我正在玩离子2 beta。我正在尝试使用cordova插件实现原生datepicker，如在文档。

I'm new to ionic and I'm playing with ionic 2 beta. I'm trying to implement a native datepicker using cordova plugin like in the documentation.

我已完全复制/粘贴示例，我在Nexus上获得ReferenceError：DatePicker未定义 5 Emulator和Archos Android手机。

I've fully copy/paste the example, and I get "ReferenceError: DatePicker is not defined on Nexus 5 Emulator and Archos android phone.

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

发现没有什么关于这一点，也许我在cordonic插件在Ionic 2上做错了？

I've searched a lot and found nothing about this, maybe I'm doing it wrong with cordova plugin on Ionic 2?

推荐答案

（在这个问题的时候，Ionic Native文档仍然是一个WIP）。

The documentation on this is lacking (the Ionic Native docs at the time of this question are still very much a WIP).

ionic-native 是一个与框架分离的模块，因此您需要安装它：

ionic-native is a separate module from the framework, so you'll need to install it:

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

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

You'll also need to install the plugin you're trying to use if you haven't already:

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

然后导入 DatePicker 您的代码：

import {DatePicker} from 'ionic-native';

然后与Ionic 1一样，在Cordova准备好之前，您将无法使用任何插件。这意味着您可以使用 Platform.ready 或等待 deviceready 在窗口上触发的事件：

And then same as Ionic 1 you won't be able to use any plugins until Cordova is ready. This means you can either use Platform.ready or wait for the deviceready event to fire on 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- 将回调包装在promise中。

Also one thing to note is that ionic-native wraps the callbacks in a promise.

这篇关于ionic 2 DatePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！