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