没有输入的jQuery datepicker

Question

我有一个相当复杂的网络应用程序,我想添加一些日期选择UI.

我遇到的问题是我无法从文档中找出如何真正控制datepicker出现的方式和时间.没有涉及表单元素(并且不,我不会添加秘密表单字段),因此简单的开箱即用方法根本不起作用.

我希望有人可以提供一个模式的指导,允许我以编程方式调用datepicker.我相信我知道如何使用datepicker的自定义事件来初始化和定位它,并在用户解除它时恢复所选的值.我只是很难实例化一个datepicker,因为我没有将它与一个元素配对.

这是不起作用的:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
    var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );

    jQuery.datepicker('dialog',
        (bIsDate ? new Date(sOriginal) : new Date()), // date
        function() { console.log('user picked a date'); }, // onSelect
        null, // settings (i haz none)
        event // position
    );

}

原因是"jQuery.datepicker"不是一个函数.(我做错了.)

我没有与'对话'方法结合 - 这是我最好的猜测是在不引用表单元素的情况下调用它.

我正在使用jQuery 1.4.3和jQueryUI 1.8.6

Answer 1

从插件页面:http://jqueryui.com/demos/datepicker/#inline

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>


<div class="demo">
    Date: <div id="datepicker"></div>
</div><!-- End demo -->

显示嵌入页面而不是叠加层中的日期选择器.只需在div上调用.datepicker()而不是输入.

Answer 2

我通读了datepicker代码,看来,如上所述,datepicker 必须附加到input,div或span标记.

所以,如果你唯一的反对意见是使用表单元素,那么附加到div或span可能是你最好的选择,这里有一个如何做到这一点的例子:https://stackoverflow.com/a/1112135

如果你正在寻找其他方法来控制datepicker,那么你可能需要扩展datepicker代码来做你想做的事情,如果你走那条路线,那么我建议首先看一下_inlineDatepicker private datepicker代码中的方法,它是将datepicker附加到div或span标记的方法.