没有输入的jQuery日期选择器

Posted 2023-05-07

【中文标题】没有输入的jQuery日期选择器

【英文标题】：jQuery datepicker without input

【发布时间】：2012-05-02 11:50:20

【问题描述】：

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

【参考方案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()。

【参考方案2】：

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

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

如果您正在寻找其他方式来控制日期选择器，那么您可能需要扩展日期选择器代码以执行您希望它执行的操作，如果您走这条路，那么我建议您先看看datepicker 代码中的 _inlineDatepicker 私有方法，该方法将 datepicker 附加到 div 或 span 标签。

【讨论】：

感谢您的挖掘！我也做了一些偷看，虽然我还没有让它工作，但我发现插件实际上在调用“对话框”方法时会生成一个隐藏的 INPUT，在活动时将它隐藏在可见的日期选择器后面。似乎有点做作，但证实了许多其他 SO 帖子所暗示的：该插件实际上只是为标准情况设计的。我可能必须解决这个问题。

经过大量测试，这是唯一受支持的模式。有人需要增强日期选择器，使其更加灵活。也许那个人就是我。不过，一次只打一场。

同时使用 div/span 会导致内联（始终显示）日期选择器...与此问题相关的未回答问题（尚无答案）-***.com/questions/17371859/…

【参考方案3】：

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

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

并使用

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

【讨论】：

抱歉，应用程序的这一部分没有 INPUT，我不会添加一个，因为这是附加此行为的最明显方式。我觉得我在帖子中很清楚这一点。