cordova - Jquery Mobile DateBox is not showing time picker if created dynamically -
i using jquery mobile datebox plugin date/time picker in cordova application. works fine if written html file. problem comes if clone div has datebox input , append div. time picker not poping on tap of timer icon.
the div cloning is,
<div class="time-picker-template"> <input class="time-input day-time-picker" type="text" data-role="datebox" data-options='{"mode":"timebox", "usenewstyle":true}' /> </div>
the way clone ,
var daytimepicker = $("#page-add-reminder .time-picker-template").clone(); $("#page-add-reminder #time-picker-block").append(daytimepicker);
it renders datebox input field disabled. when inspect element, shows,
<input class="time-input day-time-picker" type="text" data-role="datebox" data-options="{"mode":"timebox", "usenewstyle":true}" readonly="readonly">
i suspect readonly property input field readonly only. on tap of time icon resides next input field filled time in other case.
i compared dom element of both cloned element , general timebox element. both looks same. first didn't work later works. missing ? can suggest me how make work ?
when cloning datebox, should put templates outside page jqm not enhance before clone , add them page. here working demo:
<div id="templates"> <div class="time-picker-template"> <input class="time-input day-time-picker" type="text" data-role="datebox" data-options='{"mode":"timebox", "usenewstyle":true}' /> </div> </div> <div data-role="page" id="page1"> <div role="main" class="ui-content"> <button id="btnadd">add timepicker template</button> <div id="time-picker-block"></div> </div> </div> $(document).on("pagecreate","#page1", function(){ $("#btnadd").on("click", function(){ var daytimepicker = $("#templates .time-picker-template").clone(); $("#time-picker-block").append(daytimepicker).enhancewithin(); }); });
when click button, un-enhanced template cloned , added page, call enhancewithin() tell jqm ehance controls within block.
you have template string in script.
Comments
Post a Comment