0

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.

Rolf
  • 5,550
  • 5
  • 41
  • 61

2 Answers2

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');
Andrew M. Andrews III
  • 1,989
  • 18
  • 23
  • Thank you. `$('#ButtonCreationDemoInput').AnyTime_noPicker()` does not work for me, nor AnyTime_picker(), for some reason. To have Anytime work, I had to use Anytime() with an ID. What this code does is essencially add a picker "on-demand". Ideally, I'd want the picker to be there, but have some control on whether it shows-up or not (but, as I said, removing it and adding it again would be an acceptable hack - if only I could get this method to work). Anyway, I gave up, for now, mobile users will just have to live with 2 datepickers (native and Anytime) showing up at once - it does work. – Rolf Jan 12 '14 at 14:05
  • I like how I can write long comments in SO :) – Rolf Jan 12 '14 at 14:05
  • 1
    I just improved my answer – Andrew M. Andrews III Jan 12 '14 at 14:06
  • I've also tried that (with the window.matchMedia). As I said, the main issue is that .AnyTime_picker() doesn't work for me, and I was trying to find something more elegant than destroying/rebuilding the datepicker. Also note that I would have to destroy the datepicker every time the window is narrow enough to switch to "mobile layout", and rebuild it (or bring it back) when the window is big again. This could be by the user resizing the browser window. I was handling it through binding that code to the window resize event, although I could also, ideally, use matchMedia events. – Rolf Jan 12 '14 at 14:09
  • Sorry, I should've mentioned that problem with `.AnyTime_picker()`. I suspect it may be incompatible with my version of jQuery - I can't think of any other reason... – Rolf Jan 12 '14 at 14:11
  • I also tried removing the datbeipcker by using it's ID, that didn't work either for some reason.. As I said, I gave up for now, and let the mobile user have two datepicker to pick from, if the native one is available, since accessibility is the priority. I'll try again some time later, maybe. Your answer is probably the right one. Anytime doesn't seem to expose any other way. – Rolf Jan 12 '14 at 14:16
  • Don't give up :) Can you post a URL with an example of the problem? Or send it to me personally? – Andrew M. Andrews III Jan 12 '14 at 14:31
  • Sure. Here you go: https://weknowtoomuch.com/projects/msuites/reserve If you resize the window and make it narrow, you'll see how it would look on a mobile, and native date controls will be enabled if available. But anytime stays enabled all the time. – Rolf Jan 15 '14 at 14:12
1

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',{...});
Andrew M. Andrews III
  • 1,989
  • 18
  • 23