Using datepicker plugin in Onsen UI 2

Question

In my app, I want to use native datepicker and tried to use this plugin, but failed to make it work. I just recently started working with Onsen UI 2 and haven't experience with using the plugins, so I might be missing something.

I followed the steps of installing and usage of the plugin. My code so far.

index.html:

<ons-list-item ng-click="ctrl.showPicker();">
    Set the time
</ons-list-item>

where 'ctrl' is my controller.

index.js

this.showPicker = function() {
    var options = {
        date: new Date(),
        mode: 'date'
    };

    function onSuccess(date) {
        alert('Selected date: ' + date);
    }

    function onError(error) { // Android only
        alert('Error: ' + error);
    }

    var datePicker = new DatePicker();
    datePicker.show(options, onSuccess, onError);
}

Unfortunetely, clicking the list item shows me this error:

ReferenceError: DatePicker is not defined

As I said, I don't have experience using the plugins in Onsen UI 2, so far I was using Cordova framework (javascript and jquery). Can anyone tell me, what can I do to make the plugin work? Thanks in advance.

score 1 · Accepted Answer · answered Jun 09 '16 at 13:13

Your angular code looks ok. The only problem is that you don't have a DatePicker variable.

Looking at docs of the plugin which you're using it seems that it doesn't export a DatePicker function.

In the docs they are using just datePicker.show, so maybe they are just exporting datePicker.

So basically all you need to do is remove the following line:

var datePicker = new DatePicker();

And you should be fine (if you installed your plugin correctly).

Using datepicker plugin in Onsen UI 2

index.html:

index.js

1 Answers1