19

我有一个相当复杂的网络应用程序，我想添加一些日期选择 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

4

3 回答 3

16

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

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


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

显示嵌入页面而不是覆盖的日期选择器。只需在 div 上调用 .datepicker() 而不是输入。

于 2012-04-21T02:10:42.157 回答
11

我通读了 datepicker 代码，看起来，正如所写，datepicker必须附加到 input、div 或 span 标签。

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

如果您正在寻找其他方式来控制 datepicker，那么您可能必须扩展 datepicker 代码来做您想做的事情，如果您走这条路，那么我建议您先看看 _inlineDatepicker private datepicker 代码中的方法，它是将 datepicker 附加到 div 或 span 标签的方法。

于 2012-04-21T01:43:19.400 回答
0

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

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

并使用

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });
于 2012-04-20T21:42:57.940 回答