ionic 2 DatePicker

Question

私はionicには新しく、私はionic 2 betaで遊んでいます。 in the documentationのようなcordovaプラグインを使用してネイティブの日付ピッカーを実装しようとしています。

例を完全にコピーして貼り付けましたが、Nexus 5エミュレータとArchos Android端末で"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

このドキュメントは不足しています（この質問の時点でのイオンネイティブのドキュメントはまだ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を使用するか、windowに発射するdevicereadyイベントを待つことができますいずれかを意味します。注意すべき

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