CODEWITHSUNDEEP
cordova
Aleks
Aleks

Reputation: 5388

How to use plugins for PhoneGap?

I have created an PhoneGap application using html and css. Now I wanted to add few things more and I have found a plugin for my next update to the app, but I have never used plugins for PhoneGap and I need a help, and I haven't find an example on the internet.

I am using PhoneGap 3.3.0

I have installed a pluging that I needed from DatePicker . I have used the command:

phonegap local plugin add https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

Ok, it created new directory in Plugins but I don't know how to use the plugin. Maybe this is a silly question.

What should I do? - should I include some javascript into my code, update config.xml, update Java code or something similar to show this "date picker" when I click on a button in Html ? (for example)

I am using this for both Android and iOS. Also I don't know what is the differance between cordova and phonegap, as I can see they are both used (and I have taught that is one the same, but it seems it is not)

Upvotes: 3

Views: 3728

Answers (2)

Jonathan
Jonathan

Reputation: 2264

What I want to happen is simple - I just want a datepicker to display when I click a certain field.

However, the same as Aleks, I don't know what to put in my html, how to use it in html, and what should I put in the html to invoke the datepicker on some input.

The documentation from the plugin is incomplete.

I found a solution from this test project. Steps are as follows:

  1. Pre-requisite: phonegap/cordova-cli installed
  2. Install Cordova's device plugin: $ cordova plugin add org.apache.cordova.device
  3. Install Dirk's datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
  4. Copy the nativedatepicker.js from the test project and place it on your project's js folder. This file has showDatePicker(), showDateTimePicker() convenience functions.
  5. Add the ff. to index.html code:

Note: The datepicker won't show when you test it in your browser

....
    <div class="form-group">
      <label>Appointment</label>
      <input type="text" class="form-control datepicker" id="appointment">
    </div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function () {
            $(document).on('click', '.datepicker', function () {
                showDatePicker($(this), 'date');
            });

            $(document).on('click', '.timepicker', function () {
                showDatePicker($(this), 'time');
            });

            $(document).on('click', '.datetimepicker', function () {
                if (device.platform === "Android")
                    showDateTimePicker($(this));
                else
                    showDatePicker($(this), 'datetime');
            });
        });
    })(jQuery);
</script>

Upvotes: 3

urz0r
urz0r

Reputation: 462

as dawson mentioned, over at https://github.com/VitaliiBlagodir/cordova-plugin-datepicker#usage, you can see how the plugin is used:

var options = {
  date: new Date(),
  mode: 'date'
};

datePicker.show(options, function(date){
  alert("date result " + date);  
});

this will of course need to go into your javascript.

if you have already added the platforms (iOS and Android), your native plugin files probably won't get copied into the platforms folder. in this case, you need to copy them manually. for iOS, the plugin files go into platforms/ios//Plugins.

regarding cordova/phonegap, think of cordova as the engine that powers phonegap. the codebase is the same so right now, most of the commands are equivalent.

Upvotes: 1

Related Questions