title: SalesForce, VisualForce Pages, and the jQuery date picker
body: <p>I've got a bit of an issue, and I'm hoping you can help. I was going to use SalesForce's "built in" date picker, but it appears (at least based on my experimentation) that you can only use one per VisualForce page.</p>
  
  <p>So I went the jQuery route. I can get the jQuery datepicker to work (I have two on the page).</p>
  
  <p>The problem is, when the page goes through validation, if one of the "required" elements is not there, it changes the dates to the UTC format.</p>
  
  <p>For instance, if Date 1 is in mm/dd/yy format, and I have it as 03/01/2017, it puts in the long, extended date.</p>
  
  <p>At one point, I did have it to where it would put in the dates in mm/dd/yy format, but they would be off by one day (one day early), which is no good, and I couldn't figure out how to fix it. I'm not at the office right now, and once I get there I will see if I can log in and actually post the jQuery that I have.</p>
  
  <p>Ok, so here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( function() {
                              var ad = $('input[id$="adId"]' );
                              var pld = $('input[id$="pldId"]' );
                              
                              ad.datepicker({minDate: 0, dateFormat: "mm/dd/yy"});
                              pld.datepicker({minDate: 0, dateFormat: "mm/dd/yy"});
                              
                              if(ad.val() != ""){
                                  $('input[id$="adId"]').datepicker({dateFormat: "mm/dd/yy"}).datepicker("setDate", new Date(ad.val()));
                              }
                              
                              if(pld.val() != ""){
                                  $('input[id$="pldId"]').datepicker({dateFormat: "mm/dd/yy"}).datepicker("setDate", new Date(pld.val()));
                              }
                              
                            } );</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using an  element for the date picker inside of an outputPanel.</p>
  
  <p>So basically the process is this:</p>
  
  <ol>
  <li>Go to page.</li>
  <li>Fill out all but a couple of things, but make sure dates are there.
  Dates are in mm/dd/yy format, so they would display as 03/01/2017.</li>
  <li>When validation occurs, the error messages display that the form is incomplete, and the dates are now in UTC date format (i.e. "Thu Jan 1 19:30:00 UTC+0530 1970") instead of mm/dd/yy.</li>
  </ol>
  
  <p>I <em>think</em> it's a simple formatting issue. Any advice is greatly appreciated.</p>