ionic 2 DatePicker

Question

Sono nuovo di ionico e sto giocando con ionico 2 beta. Sto cercando di implementare un datapicker nativo usando il plugin cordova come in the documentation.

Ho completamente copiato/incollato l'esempio e ottengo "ReferenceError: DatePicker is not defined su emulatore Nexus 5 e telefono Android Archos.

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

Ho cercato un sacco e ho trovato nulla su questo, forse sto facendo male con il plugin di Cordova sulla ionico 2?

Answer 1

La documentazione su questo è carente (i documenti Nativi ionici al momento di questa domanda sono ancora molto un WIP).

ionic-native è un modulo separato dal quadro, quindi avrai bisogno di installarlo:

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

È inoltre necessario installare il plugin si sta cercando di utilizzare, se non l'hai già :

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

quindi importare il plug DatePicker nel codice:

import {DatePicker} from 'ionic-native'; 

E poi come Ionic 1 non sarà possibile utilizzare alcun plug-in finché Cordova non sarà pronto. Questo significa che è possibile utilizzare Platform.ready o attendere l'evento deviceready al fuoco su 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); 
     } 
    ); 
    }); 
} 

anche una cosa da notare è che ionic-native avvolge il callback in una promessa.

Answer 2

Prova questo:

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