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.

fiddle

you have template string in script.


Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -