How to have Anytime datepicker firing selectively

Question

I am using the Anytime datepicker on some input elements.

This is how it's set on an element:

AnyTime.picker(element_id)

With element_id being a string containing the id of the element.
When the element is clicked, it brings up the Anytime datepicker control.

It works OK, but I want to prevent it from firing in some situations, if some conditions are met. I can't seem to find a decent way to do that.

More specifically, I want to inhibit it when browsing from a mobile device, and use the HTML5 date dialog instead (or just a text input, if it's not available). I've found a way to have the HTML5 date dialog show up when the site is in "mobile layout", using media queries in JavaScript ( window.matchMedia() ), but I end up with both Anytime and the HTML5 date dialog tied to to the element, and clicking it will bring up both. I want Anytime to not show up in this case...

I can't find anything that works, short of modifying the Anytime source to fire only conditionally...

I've tried removing the datepicker with Anytime_noPicker(), but it doesn't work, and it would be a very un-elegant solution anyway, if it did work.

Answer 1

Instead calling AnyTime.picker() every time, you can put it inside the else condition for your window.matchMedia() test. For example:

if ( window.matchMedia(...) )
   // use input type="date" here
else
   AnyTime.picker('element-id');

Answer 2

Another answer that might be a better solution for you is to test whether the browser is actually supporting the type="date", and only invoke AnyTime.picker() or $().AnyTime_picker() if it does not. For example:

if ( document.getElementById('my-date').type != 'date' )
    AnyTime.picker('my-date',{...});