Datepicker plugin not working in phonegap 3.0.0

Question

Am developing an app using phonegap/cordova 3.0.0 and I am trying to get a native datepicker in my app using the datepicker plugin which i found in this repo. However after going through the plugin documentation for phonegap 3.0.0 i figured that the plugin was not compatible with phonegap 3.0.0, so i tried modifying using the guidelines in the phonegap documentation and hosting it on github here so i can add it my project. But when i try triggering the plugin in a backbone view i see these errors in the eclispe logcat

exec() call to unknown plugin: Datepicker
 datePicker Plugin.js failed: Class not found at file:///android_asset/www/plugins/org.apache.cordova.datepicker/www/datepicker.js:44

my view look like this

define(['marionette', 'text!templates/composer.html'], function (marionette, ViewTemplate) {
    'use strict';

    var ComposerView = marionette.ItemView.extend({
        template: _.template(ViewTemplate),

        initialize: function(options) {
            this.formValid = false;

            if(options.id !== null) {

                if(this.options.type == "credit")
                var collection = App.Credits;
                else
                    var collection = App.Debits;

                var model = collection.get(options.id);
                this.model = model;
                this.formValid = true;
            }
            else {
                var modelAttr = {name: false, amount: false, due_date: null, reason: null};
                this.model = new Backbone.Model(modelAttr);
            }
        },

        onRender: function() {
            var height = $(window).outerHeight();
            this.$el.height(height);
        },

        onBeforeClose: function() {
            if(App.Ui.Popupmenu.isShown)
                App.Ui.Popupmenu.hide();

            if(App.Layout.menuVisible)
                App.Layout.hideMenu();
        },

        ui: {
            name: "#name",
            amount: "#amount",
            due_date: "#due_date",
            reason: "#reason"
        },

        events: {
            'click div.button.save': 'save',
            'click div.button.cancel': 'cancel',
            'blur input': 'validateField',
            'focus .nativedatepicker': "showDatepicker"
        },

        showDatepicker: function(event) {
             var currentField = $(event.currentTarget);
             var myNewDate = Date.parse(currentField.val()) || new Date();
             if(typeof myNewDate === "number"){ myNewDate = new Date (myNewDate); }

            // Same handling for iPhone and Android
            console.log(window.plugins.datePicker);
            window.plugins.datePicker.show({
                    date : myNewDate,
                    mode : 'date', // date or time or blank for both
                    allowOldDates : true
                }, function(returnDate) {
                    var newDate = new Date(returnDate);
                    currentField.val(newDate.toString("dd/MMM/yyyy"));
                    // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
                    currentField.blur();
             });
        },

        validateField: function (event) {

            var field = $(event.currentTarget);

            if(field.hasClass('required'))
                this.required(field);

            if(field.hasClass('numeric'))
                this.numeric(field);
        },

        required: function (field) {

            if(field.val()) {
                this.formValid = true;
                field.parent('div.form-group').removeClass('error');
            }
            else {
                this.formValid = false;
                field.parent('div.form-group').addClass('error');
            }
        },

        numeric: function (field) {

            var pattern = /[1-9][0-9]*/;
            var value = field.val().toString();

            if(pattern.test(value)) {
                this.formValid = true;
                field.parent('div.form-group').removeClass('error');
            }
            else
            {
                this.formValid = false;
                field.parent('div.form-group').addClass('error');
            }
        },

        save: function (event) {
            var self = this;

            var el = $(event.currentTarget);
            el.removeClass('active').addClass('active');

            window.App.Ui.ActivityIndicator.show('Please wait...')
            //determine which collection to use
            if(this.options.type == "credit")
                var collection = App.Credits;
            else
                var collection = App.Debits;

            if(this.formValid) {

                var model = {
                    name: this.ui.name.val(),
                    amount: this.ui.amount.val(),
                    reason: this.ui.reason.val(),
                    type: this.options.type
                };

                if(this.options.action == "add")
                {
                    collection.create(model, {
                        wait: true,
                        success: function(model, resp, options) {
                            self.saveSuccess(model, resp, options, self);
                        } 
                    });
                }
                else if(this.options.action == "edit")
                {
                    this.model.save(model, {
                        wait: true,
                        success: function(model, resp, options) {
                            self.saveSuccess(model, resp, options, self);
                        }
                    });
                }

            }
        },

        saveSuccess: function(model, resp, options, cxt) {
            window.App.Ui.ActivityIndicator.hide();

            if(cxt.options.type == "credit")
                window.location.hash = "creditors";

            else if(cxt.options.type == "debit")
                window.location.hash = "debtors";
        },

        cancel: function(event) {
            //TODO: add cancel confirmation
            window.history.back();
        }
    });

    return ComposerView;
});

What could be wrong with the plugin? Any help will be appreciated

Answer 1

I fixed the problem by making some corrections to the plugin.xml file and the config.xml of my app

plugin.xml

<name>Datepicker</name>
<description>Cordova Datepicker Plugin</description>
<license>Apache 2.0</license>
<keywords>cordova,datepicker</keywords>
<author>Patrick Foh</author>

<js-module src="www/datepicker.js" name="Datepicker">
    <clobbers target="window.plugins.datePicker" />
</js-module>

<!-- android -->
<platform name="android">
    <config-file target="res/xml/config.xml" parent="/*">
        <feature name="Datepicker">
            <param name="android-package" value="org.apache.cordova.datepicker.Datepicker"/>
        </feature>
    </config-file>

    <source-file src="src/android/Datepicker.java" target-dir="src/org/apache/cordova/datepicker" />
</platform>

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.chronotechlabs.debtr" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Debtr</name>
    <description>
       Keep track of who you owe and who owes you money
    </description>

    <author email="debtr@chronotechlabs.com" href="http://chronotechlabs.com">
       Chronotech Labs Ltd
    </author>

    <feature name="SplashScreen">
        <param name="android-package" value="org.apache.cordova.SplashScreen" />
    </feature>

    <feature name="Storage">
        <param name="android-package" value="org.apache.cordova.Storage" />
    </feature>

    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.Notification" />
    </feature>

    <feature name="NetworkStatus">
        <param name="android-package" value="org.apache.cordova.NetworkManager" />
    </feature>

    <feature name="Datepicker">
        <param name="android-package" value="org.apache.cordova.datepicker.Datepicker"/>
    </feature>

    <access origin="*" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="true" />
    <preference name="splashscreen" value="splash" />
</widget>