Ionic 2, Date Picker (cordova plugin). Property 'ANDROID_THEMES' does not exist on type 'typeof DatePicker'

Question

I have installed the plugin Date Picker in my project.

In a component wich has import { DataPicker } from 'ionic-native' on top, if I use it like that (with androidTheme parameter commented) it WORKS:

  let options = {
      date: new Date(),
      mode: 'date',
      // androidTheme: DatePicker.ANDROID_THEMES.THEME_HOLO_LIGHT
  };

    DatePicker.show(options).then(
      (date) => {
      console.log('date_value:' + date)
  }).catch( (error) => { });

If I uncomment androidTheme:DatePicker.ANDROID_THEMES.THEME_HOLO_LIGHT, It will bug during the building process throwing:

Property 'ANDROID_THEMES' does not exist on type 'typeof DatePicker'

I did a npm install ionic-native in CLI in my project folder as advised here but it did not fix the problem. It gives me the following output (that seems ok to me):

`-- ionic-native@2.0.3

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:

npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.15

When I look under [my project]\plugins\cordova-plugin-datepicker\www, it contains 3 folders corresponding to the 3 platforms (ios, android, windows) with each a JS file named 'DatePicker.js' and in the one below the android folder it contains in the code:

/**
 * Android themes
 */
DatePicker.prototype.ANDROID_THEMES = {
  THEME_TRADITIONAL          : 1, // default
  THEME_HOLO_DARK            : 2,
  THEME_HOLO_LIGHT           : 3,
  THEME_DEVICE_DEFAULT_DARK  : 4,
  THEME_DEVICE_DEFAULT_LIGHT : 5
};

If I look in [my project]\nodes_modules\ionic-native\dist\plugins\ , the file datepicker.js exists (of course) but does not contain the particularities of each platform.

What's wrong? Why datepicker.js under [my project]\nodes_modules\ionic-native\dist\plugins\ does not contain the particularity of each platform despite the plugin was added to the project?

Answer 1

I've found a work around for it:

in [my project]\nodes_modules\ionic-native\dist\plugins[android|ios|windows]\datepicker.js

At the end of the code it is written:

var datePicker = new DatePicker();
module.exports = datePicker;

// Make plugin work under window.plugins
if (!window.plugins) {
    window.plugins = {};
}
if (!window.plugins.datePicker) {
    window.plugins.datePicker = datePicker;
}

Hence, it makes datePicker (starting with lower case) different from DatePicker (starting with upper case from ionic-native).

In the component where I required it, I've just declare before the component:

declare var datePicker: any;

Then inside that component I've changed my code with:

 let options = {
      date: new Date(),
      mode: 'date',
      androidTheme: datePicker.ANDROID_THEMES.THEME_HOLO_LIGHT
  };

    DatePicker.show(options).then(
      (date) => {
      console.log('date_value:' + date)
  }).catch( (error) => { });

It works.