没有输入的jQuery日期选择器

Question

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

我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间。不涉及任何表单元素（不，我不会添加秘密表单字段），所以简单的开箱即用方法根本行不通。

我希望有人可以就允许我以编程方式调用日期选择器的模式提供一些指导。我相信我知道如何使用 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 代码中的 _inlineDatepicker 私有方法，该方法将 datepicker 附加到 div 或 span 标签。

Answer 3

您必须动态定义输入字段，然后将日期选择器附加到您新创建的类中没有字段我不这么认为它会起作用。

<input type="hidden" id="yourField" />

并使用

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });