ionic 2 DatePicker

Question

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.

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

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

Hi @ MoKAt can you please provide html part of code to know the exact solution, now I'M trying to do ionic 2 date picker, i have tried many ways it's not useful to me , so can you please help for that?....thanks... — R. Mani Selvam, Jan 11 '17 at 10:46
I don't think I still have that code, but the answer (and the documentation) is giving all needed informations since I've made it work with it. — MokaT, Jan 18 '17 at 14:33

user1234 · Accepted Answer · 2016-05-10T04:02:36.850

7

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

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

Then import the DatePicker plugin in your code:

import {DatePicker} from 'ionic-native';

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

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

edited May 10 '16 at 04:02

answered Mar 05 '16 at 21:47

user1234

7,860
4
27
36

1

Thanks for this good answer, but I'm still having trouble, I've installed ionic-native (and rxjs because of dependancies), I've got the folder in node_modules, and it's referenced in package.json, but build is failing `Cannot resolve module 'ionic-native'` – MokaT Mar 06 '16 at 13:09
2

The last release was bad, try updating now: `npm install ionic-native` – user1234 Mar 06 '16 at 15:04
It works ! Thanks a lot ! Fast update I'm impressed :) – MokaT Mar 06 '16 at 17:22
Hi I have tried your method and it works. However I would like to display a calender and let the user select the date from it. May I know if you have any suggestions? I used ionic-datepicker (https://github.com/rajeshwarpatlolla/ionic-datepicker) previously for ionic 1 but there are some problems when using in ionic 2. I installed it using `npm install https://github.com/rajeshwarpatlolla/ionic-datepicker` and called with `import {ionic-datepicker} from 'ionic-datepicker';` Its giving me a syntax error with the - in ionic-datepicker – Huiting May 05 '16 at 03:13
@Tim maybe you could have a look to that question related to the same topic: http://stackoverflow.com/questions/40791000/ionic-2-date-picker-cordova-plugin-property-android-themes-does-not-exist – nyluje Nov 24 '16 at 16:29

score 1 · Answer 2 · answered May 31 '17 at 10:37

Try this:

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

ionic 2 DatePicker

2 Answers2

Linked