Javascript 没有输入的jQuery日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10253924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery datepicker without input
提问by Tom
I've got a fairly complex web app that I'd like to add some date-picking UI to.
我有一个相当复杂的网络应用程序，我想向其中添加一些日期选择 UI。
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器出现的方式和时间。不涉及表单元素（不，我不会添加秘密表单字段），因此非常简单的开箱即用方法根本行不通。
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
我希望有人可以提供有关允许我以编程方式调用日期选择器的模式的一些指导。我相信我知道如何使用日期选择器的自定义事件来初始化和定位它，并在用户关闭它时恢复所选的值。我只是很难实例化日期选择器，因为我没有将它与元素配对。
Here's what isn'tworking:
这是不起作用的：
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
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
原因是“jQuery.datepicker”不是一个函数。（我做错了。）
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
我不喜欢“对话”方法——这只是我在不参考表单元素的情况下调用一个方法的最佳猜测。
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
我正在使用 jQuery 1.4.3 和 jQueryUI 1.8.6
采纳答案by jimmym715
I read through the datepicker code, and it appears that, as written, the datepicker must beattached to an input, div, or span tag.
我通读了 datepicker 代码，看起来，正如所写的那样，datepicker必须附加到 input、div 或 span 标签上。
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
因此，如果您唯一的反对意见是使用表单元素，那么附加到 div 或 span 可能是您最好的选择，这里有一个如何做到这一点的示例：https: //stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
如果您正在寻找其他方法来控制 datepicker，那么您可能需要扩展 datepicker 代码来执行您想要它做的事情，如果您走这条路，那么我建议您首先查看 _inlineDatepicker private datepicker 代码中的方法，该方法将 datepicker 附加到 div 或 span 标签。
回答by Ricardo Souza
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
从插件页面：http: //jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
显示嵌入在页面中而不是覆盖中的日期选择器。只需在 div 而不是输入上调用 .datepicker() 。
回答by Shehzad
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
您必须动态定义输入字段，然后将日期选择器附加到您新创建的没有字段的类中，我不这么认为它会起作用。
<input type="hidden" id="yourField" />
and use
并使用
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});
