ionic2cordova-plugins

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


I have installed the plugin Date Picker in my project.

In a component which 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?


Solution

  • 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.