離子2 DatePicker

我是新來的離子，我正在玩離子2測試版。我正在嘗試使用cordova插件（如in the documentation）來實現本機日期選擇器。離子2 DatePicker

我已經完全複製/粘貼示例，並且我在Nexus 5仿真器和愛可視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); 
    }

我已經搜查了很多，發現一無所知，也許我做錯了與離子2科爾多瓦插件？

來源

2016-03-05 MokaT

嗨@ MoKAt可以請你提供的代碼來知道確切的解決方案HTML部分，現在我要做的離子2日期選擇器，我已經嘗試了許多方法是沒有用的對我來說，所以你能幫忙嗎？....謝謝... –

我不認爲我仍然有這樣的代碼，但答案（和文檔）提供了所有我需要的信息與它一起工作。 – MokaT

關於這方面的文檔缺乏（在這個問題時離子本地文檔仍然是一個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包裹回調中的承諾。

來源

2016-03-05 21:47:08 user1234

感謝這個很好的答案，但我仍然遇到麻煩，我已經安裝了離子本地（和rxjs因爲依賴），我已經得到了node_modules中的文件夾，並且它在package.json中引用，但構建是失敗'無法解析模塊'ionic-native'' – MokaT

最新版本不好，現在嘗試更新：'npm install ionic-native' – user1234

它的工作原理！非常感謝！快速更新，我印象深刻:) – MokaT

試試這個：

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

來源

2017-05-31 10:37:04

離子2 DatePicker

回答

相關問題