Question

我正在尝试通过单击某些文本在对话框模式下启动日期选择器。

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

，其中

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

默认对话框行为（没有位置）很好（弹出中心屏幕），除了火龙头，它是顶级中心。将位置指定为Number [2]也可以正常工作。

JQueryUI api文档说：

POS
  键入：Number [2]或MouseEvent
  对话框顶部/左侧的位置为[x，y]或包含的MouseEvent   该坐标。如果未指定，则对话框在屏幕上居中。

不幸的是，他们没有使用MouseEvent的例子，我担心我在这方面达到了我的能力极限。我尝试了各种格式，例如：

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

无济于事。谷歌搜索数据贴纸对话框方法似乎带来了大量的网站高兴地鹦鹉api文档而不扩展它。

如何将MouseEvent传递给此方法？

更新
根据j08691的回答，这是我正在寻找的语法：

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

更新2

在使用不同版本的浏览器的另一台计算机上做了更多的努力，而且更多的研究使我得到以下作为我的最终答案：

<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
    );
}

（其中changeDate是另一个函数）

Answer 1

看起来网上没有太多关于这个的原因是你将使用的唯一半有用的跨浏览器event object鼠标属性是event.pageX和event.pageY。

例如：

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

请参阅 jsFiddle example ，然后点击灰色div。日期选择器将放置在鼠标点击div的坐标处。

Answer 2

试试这个：

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

如何通过MouseEvent定位JQueryUI datepicker对话框

2 个答案: