title: How to position a JQueryUI datepicker dialog via a MouseEvent
body: <p>I'm trying launch a datepicker in dialog mode via clicking on some text. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type='hidden' id='datepicker'&gt;
  &lt;div onclick="getdate()"&gt;
      Click on me to launch DatePicker dialog
  &lt;/div&gt;
  </code></pre>
  
  <p>where</p>
  
  <pre class="lang-js prettyprint-override"><code>function getdate() {
      $( "#datepicker" ).datepicker("dialog", "10/12/2013", function(){alert("wibble");},{dateFormat: "dd/mm/yy"},[20,20]);
  }
  </code></pre>
  
  <p>Default dialog behaviour (no position) is fine (pops up centre screen), apart from Firefox which goes for top centre. Specifying position as Number[2] works fine as well.</p>
  
  <p>The JQueryUI api documentation says:</p>
  
  <blockquote>
    <p>pos<br>
    Type: Number[2] or MouseEvent<br>
    The position of the top/left of the dialog as [x, y] or a MouseEvent that contains
    the coordinates. If not specified the dialog is centered on the screen.</p>
  </blockquote>
  
  <p>Unfortunately, they have no example of using a MouseEvent and I fear that I am reaching the limits of my ability in this area. I tried various formats such as:</p>
  
  <pre class="lang-js prettyprint-override"><code>$( "#datepicker" ).datepicker("dialog", "10/12/2013", function(){alert("wibble");},{dateFormat: "dd/mm/yy"},$.Event("mouseclick"));
  </code></pre>
  
  <p>to no avail. Googling for datapicker dialog method seems to bring up a plethora of websites happy to parrot the api documentation without expanding on it.</p>
  
  <p>How does one pass in a MouseEvent to this method?</p>
  
  <hr>
  
  <p><strong>Update</strong><br>
  Based on j08691's answer, this is the syntax that I was looking for:</p>
  
  <pre class="lang-js prettyprint-override"><code>$( "#datepicker" ).datepicker(
      "dialog", 
      "10/12/2013", 
      function(){alert("wibble");},
      {dateFormat: "dd/mm/yy"},
      event
  );
  </code></pre>
  
  <hr>
  
  <p><strong>Update 2</strong>    </p>
  
  <p>A bit more diddling on another computer with different versions of some browsers and a bit more research has led me to the following as my final answer:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type='hidden' id='datepicker'&gt;
  &lt;div onclick="getdate(event)"&gt;
      Click on me to launch DatePicker dialog
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function getdate(e) {
      e = e || window.event;
      $( "#datepicker" ).datepicker(
          "dialog", 
          "10/12/2013", 
          function(date){changeDate(date);},
          {dateFormat: "dd/mm/yy"},
          e
      );
  }
  </code></pre>
  
  <p>(where changeDate is another function)</p>