Can't get it to work, Error: The first argument is required and must be an element

[Izrab]

I am developing an app in PhoneGap with Framework7, I have some routed pages, from form.html (which is routed in my-app.js in Framework7 {(...})), it shows this error message "The first argument is required and must be an element".
How can I get it to work?

[jdexyz]

You must provide the new Picker function with an DOM element as the first argument.
So a minimal example is :

<input id="myInput">

var input = document.getElementById('myInput');
var picker = new Picker(input, {});

Be careful if you use jQuery, you must input the element inside the array returned by jQuery.
Hence var picker = new Picker($input[0], {});

[macsupport]

I am having the same issue with Framework7. I tried a simple example with your code loaded on the page init:

new Picker(document.querySelector('.js-date-picker'), { format: 'MMM D, YYYY', text: { title: 'Pick a date', }, });

and I get the "The first argument is required and must be an element" error every time.
I tried jQuery as well but am confused by the $input[0] example.
Could you clarify how you should use a class as the element with jQuery? I would like to utilize a number of inputs with the same class on the same page, but nothing gets me past this error.
Thanks!

[hirokihokari]

what do you see from console.log(document.querySelector('.js-date-picker')); just above that new Picker line?

[macsupport]

I see undefined, yet it is in the Dom before the script is loaded. I have tried a number of the example scripts with no luck,( with id's and classes) always the same result:

The first argument is required and must be an element

I even added the following code to the repo Doc's page and it doesn't work either:

<input type="text" class="form-control drug time-picker" name="time-picker" value="02:56">

var picker = new Picker(document.getElementsByClassName('time-picker'),{
  format: 'HH:mm',
  headers: true,
  inline:true,
  text: {
    title: 'Your time'
  } 
});

[hirokihokari]

I'm just browsing this repo so don't know much about its api(got the basics though).
But what i'm sure is that as long as you don't have that element one line above, you won't have it just below it. If console.log says undefined, it's undefined, whatever the reason is. Sometimes it's just incorrect spelling of the class/id or sometimes the dom is not loaded yet(you gotta use "load" hook)

[macsupport]

Thanks for the input and suggestions, but it doesn't explain why copying and pasting example code from the repo into the repo's docs/index.html page will not work.

[hirokihokari]

Say, the example code shows just the way you use THIS library, but ensuring the precondition is your responsiility isn't it?
Like, you probably put the code in js file or script tag in html file, which is one of the preconditions for this library to work.
And another condition is that your element exists and loaded by the time you use it as input.

Have you tried, say, load hook?

document.addEventListener('DOMContentLoaded', function() {
  // your code goes here
});

[macsupport]

Yes, all of the above and even with a settimeout function. Thanks for your help.
Moving on to one of the other date/time pickers I've looked at where I know the demo code works.