Home/ Questions/Q 6588861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:06:02+00:00

So I am using the Date Picker input from Jquery Mobile and am having

  • 0

So I am using the Date Picker input from Jquery Mobile and am having some difficulty getting it to render properly. I have inclueded all the necessary files (http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/install.html) provided by the JQM team, and can get it to render when I add it directly to the static HTML:

<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>

However, I am building a form dynamically and am adding this bit of HTML on the fly. All of my other inputs are getting the Jquery Mobile styles except this one doing the following:

$(form).html(formFields);               
var page = document.getElementById('page');
$(page).trigger('create');

formFields is the HTML string I am appending to the page.

It would appear that in the static HTML page above, when the page loads JQM is adding a bunch of stuff to that code. It does not appear to be doing the same when I invoke the create method. Does anyone have any idea if there is someway around this? Thanks in advance.

UPDATE:
So with the helpful comment posted below, it would appear that since this is no an official JQM input, calling the ‘create’ method will not refresh this input and apply the necessary styles. The HTML posted above is exactly what I am creating with my string builder. The problem lay with the refreshing. When the page loads, a bunch of extra stuff is added to the date input HTML. Below is what it looks like in firebug… Any one experience this? 

<div class="ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c">
  <input id="mydate" class="ui-input-text ui-body-null ui-body-x" type="text" data-   options="{'mode': 'calbox'}" data-role="datebox" name="mydate">
  <a class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="date picker" href="#" data-theme="c" style="vertical-align: middle; float: right;">
     <span class="ui-btn-inner ui-btn-corner-all">
       <span class="ui-btn-text">date picker</span>
       <span class="ui-icon ui-icon-grid ui-icon-shadow"></span>
     </span>
  </a>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alright folks, figured it out.

    It turns out that it wasn’t getting the styles applied, even after calling the “create” method. So I turned to a hack that has been floating around the web. I basically just destroyed the whole form and rebuilt it like this:

    $('#page').page("destroy").page();

    Page was the name of the content pane where the form was living. Reloaded simple as that. Hope that helps some of you guys out there…

    • 0