title: JQuery Mobile DateBox - more than 1 instance
body: <p>I am using JQuery Mobile Datebox as I am having the following problem.</p>
  
  <p>I have page A and page B.</p>
  
  <p>If I go to page B and open the date picker called "date2", then close it and click the Home page link, which goes to page A.</p>
  
  <p>Now, I'm in page a and I hit the button to open up date picker A, called "date" ...</p>
  
  <p>The problem is that I'm getting both opening ... it's like they are both opened or something.</p>
  
  <p>How can I kill the instance of the date pickers once closed please?</p>
  
  <p>Here's the relevant code for page A:</p>
  
  <p>In the head:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $( document ).bind( "mobileinit", function(){
              $.mobile.page.prototype.options.degradeInputs.date = 'text';
          }); 
      &lt;/script&gt;
  </code></pre>
  
  <p>Then the form / date picker 1:</p>
  
  <pre><code>&lt;form action="#" method="POST"&gt;
          &lt;div data-role="fieldcontain" style="visibility:hidden;"&gt;
            &lt;input value="" name="date" type="date" data-role="datebox" id="date" data-theme="a" data-options='{"mode": "calbox", "pickPageTheme": "a", "pickPageHighButtonTheme": "e", "setDateButtonLabel": "Calendar", "useDialogForceTrue": false, "useDialogForceFalse": true }'/&gt;   
  
  
            &lt;/div&gt;
            &lt;/form&gt;
  </code></pre>
  
  <p>Now the relevant code for page B</p>
  
  <p>in the page head:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $( document ).bind( "mobileinit", function(){
              $.mobile.page.prototype.options.degradeInputs.date = 'text';
          }); 
      &lt;/script&gt;
  
  &lt;script language="javascript"&gt;
      $(document).ready(function() {
  
         var queryDate = $.url.param("mydate");
         $('#date2').val(queryDate);
  
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And the form part:</p>
  
  <pre><code>&lt;form action="save.php" method="POST"&gt;
  
            &lt;label for="date2" style="margin:10px 0px;"&gt;Event Date:&lt;/label&gt;
            &lt;input value="1/1/2011" name="date2" type="date" data-role="datebox" id="date2" data-theme="a" data-options='{"pickPageTheme": "a", "pickPageHighButtonTheme": "e", "setDateButtonLabel": "Add Date", "dateFormat": "dd/mm/YYYY"}'/&gt;  
  
            &lt;label for="textarea"&gt;Add:&lt;/label&gt;
                  &lt;textarea cols="40" rows="8" name="textarea" id="textarea"&gt;&lt;/textarea&gt;
                  &lt;input type="submit" value="Save" data-theme="a" /&gt;
  
  
            &lt;/form&gt;
  </code></pre>
  
  <p>Anyone has any clues please?</p>
  
  <p>Thanks</p>