How to dynamically change Date Box Mode based on device

Question

I want to show a device specific date picker using the JQM Datebox plugin.

The AngularJS View by default contains Date Box mode option as - "datebox". Then if device is iPhone, it should be changed to 'flipbox'.

Using following piece of code which is not working:

$("#Date1").data('options', '{"mode": "flipbox", "useNewStyle":true}')
$('#Date1').trigger('datebox', { 'method': 'dorefresh' });

Answer 1

Here is a jsFiddle with the mode switch: http://jsfiddle.net/ezanker/2ffpP/

In markup I created the date input with a mode of datebox.

<input name="Date1" id="Date1" type="date" data-role="datebox" data-options='{"mode": "datebox"}' />

Then in code within the pageinit switch the mode with $('element').datebox({opt, value}) (api doc here: http://dev.jtsage.com/jQM-DateBox2/demos/api/events.html

$(document).on('pageinit', '#page1', function () {
    //check if iOS, if true run next line
    $('#Date1').datebox({"mode": "flipbox"});
});

In the fiddle I also included a couple of buttons to toggle the mode back and forth...