Question

我有一个相当复杂的网络应用，我想添加一些日期选择用户界面。

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

我希望有人可以对允许我以编程方式调用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代码来做你想做的事情，如果你走那条路，那么我建议先看看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',
     });

没有输入的jQuery datepicker

3 个答案: