JTSage Datebox timebox JQuery Mobile will not show AM/PM Selector

Question

I'm using this plugin in a new mobile project which is a Cordova/jQuery Mobile project.

I'm attempting to use it by using data-options inline instead of a constructor called by a script. Here's my input for time:

<input id="txtQaTime" type="text" placeholder="Launch Time" data-role="datebox" data-options='{"mode":"timebox", "overrideTimeFormat":"12", "overrideTimeOutput":"%l:%M %p"}' />

It works as expected but it will NOT override the time format from 24 hour to 12 hour so it doesn't show the AM/PM selector and hours goes from 1-24.

Example of picker with these settings

I did try using the constructor method and the result was the same. I did NOT load the i18N en language js but I did try to do so and it returned format errors.

Has anyone else had this issue and a solution? Do I need to load the i18N js language file?

Thanks!

Answer 1

Option 1 - Using locales

var date = new Date();
console.log(date.toLocaleString('en-US'));

Option 2 - Using options

var options = { hour12: true };
console.log(date.toLocaleString('en-GB', options));

Note: supported on all browsers but safari atm

Answer 2

overrideTimeFormat should be 12, not "12". I had the same problem and that fixed it for me.