How to position a JQueryUI datepicker dialog via a MouseEvent

Question

I'm trying launch a datepicker in dialog mode via clicking on some text.

<input type='hidden' id='datepicker'>
<div onclick="getdate()">
    Click on me to launch DatePicker dialog
</div>

where

function getdate() {
    $( "#datepicker" ).datepicker("dialog", "10/12/2013", function(){alert("wibble");},{dateFormat: "dd/mm/yy"},[20,20]);
}

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.

The JQueryUI api documentation says:

pos
Type: Number[2] or MouseEvent
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.

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:

$( "#datepicker" ).datepicker("dialog", "10/12/2013", function(){alert("wibble");},{dateFormat: "dd/mm/yy"},$.Event("mouseclick"));

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.

How does one pass in a MouseEvent to this method?

Update
Based on j08691's answer, this is the syntax that I was looking for:

$( "#datepicker" ).datepicker(
    "dialog", 
    "10/12/2013", 
    function(){alert("wibble");},
    {dateFormat: "dd/mm/yy"},
    event
);

Update 2

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:

<input type='hidden' id='datepicker'>
<div onclick="getdate(event)">
    Click on me to launch DatePicker dialog
</div>

function getdate(e) {
    e = e || window.event;
    $( "#datepicker" ).datepicker(
        "dialog", 
        "10/12/2013", 
        function(date){changeDate(date);},
        {dateFormat: "dd/mm/yy"},
        e
    );
}

(where changeDate is another function)

j08691 · Accepted Answer · 2013-12-08 03:27:16Z

3

It looks like the reason that there's not much on the web about this is that the only semi-useful, cross-browser event object mouse properties that you would use are event.pageX and event.pageY.

For example:

function getdate() {
    $("#datepicker").datepicker("dialog", "10/12/2013", function () {
        alert("wibble");
    }, {
        dateFormat: "dd/mm/yy"
    }, [event.pageX, event.pageY]);
}

See this jsFiddle example and click on the grey div. The datepicker will be placed at the coordinates of where the mouse clicks on the div.

answered Dec 8, 2013 at 3:27

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fruitbat Over a year ago

Perfect. This was what I was looking for. In fact it's even more straightforward than that. $("datepicker").datepicker("dialog","10/12/2013",function(){...},{dateFormat: "dd/mm/yy"},event); is enough. JQueryUI gets the coordinates for you. Of all the things I tried, I never thought that just "event" was enough. I guess it just represents the current event (which is of course onclick). Shows my javascript inexperience.

coding_idiot · Accepted Answer · 2013-12-07 22:14:18Z

0

Try this :

<div onclick="getdate()">
    <input type='hidden' id='datepicker'>
    Click on me to launch DatePicker dialog
</div>

answered Dec 7, 2013 at 22:14

coding_idiot

13.8k10 gold badges71 silver badges119 bronze badges

1 Comment

Fruitbat Over a year ago

This didn't make any difference with the variations that I was trying. The problem was that I didn't know how to pass the event.

Collectives™ on Stack Overflow

How to position a JQueryUI datepicker dialog via a MouseEvent

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related