javascript 如何动态创建 Jquery 日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8282633/
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
How do I create a Jquery datepicker dynamically?
提问by Travis
For my app, I'm trying to add a Jquery Datepicker after a certain event (for this example, let's just say when the page loads).
对于我的应用程序，我试图在某个事件之后添加一个 Jquery Datepicker（对于这个例子，我们只说页面加载时）。
I'm currently trying to do something like this:
我目前正在尝试做这样的事情：
var mealControl = new MealControl();
$(document).ready(function(){
mealControl.createMealForm();
}); //document.ready
function MealControl() {
this.createMealForm = function(){
var currentDate = new Date();
var prettyCurrentDate = currentDate.getFullYear() + '/' + (currentDate.getMonth() + 1) + '/' + currentDate.getDate();
var innerHtml = "<p>Creating meal item data input here</p>" +
"<div>Title:<input id=\"mealTitle\" type=\"text\" align=\"center\" width=\"50\" class=\"ui-input-text ui-body-c ui-corner-all ui-shadow-inset\" />" +
"<br></div>" +
"<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
"<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
"<input data-options=\"{'mode':'calbox','calHighPicked':false, 'calHighToday':true, 'calHighPicked': false}\" data-role=\"datebox\"id=\"datePicker\" value=\"Enter consumption date here\" type=\"text\" align=\"center\" class=\"ui-input-text ui-body-c\"/>" +
"<a href=\"#\" class=\"ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow\" title=\"date picker\" data-theme=\"c\" style=\"vertical-align: middle; float: right; \">" +
"<span class=\"ui-btn-inner ui-btn-corner-all\" aria-hidden=\"true\">" +
"<span class=\"ui-btn-text\">date picker</span>" +
"<span class=\"ui-icon ui-icon-grid ui-icon-shadow\"></span></span></a>"
"</div>"
$("#contentDiv").html(innerHtml);
} //createMealForm
When I do it this way, the button that should bring up the date picker does not do anything. However, if I put all of those elements right into my
当我这样做时，应该调出日期选择器的按钮不执行任何操作。然而，如果我把所有这些元素都放在我的
<div data-role="content" id="contentDiv" class="ui-content" role="main">
the button works just fine. I'm completely stumped by this behaviour and any help would be much appreciated.
按钮工作得很好。我完全被这种行为难住了，任何帮助将不胜感激。
Also, I've read in other places it should be as simple as
另外，我在其他地方读过它应该像
("#datePicker").datepicker();
but that doesn't work for me either (Uncaught TypeError: Object [object Object] has no method 'datepicker').
但这对我也不起作用（未捕获的类型错误：对象 [对象对象] 没有方法“日期选择器”）。
Thanks
谢谢
回答by Amin Eshaq
The reason it isn't working for you is because the input field you're binding the datepicker isn't available on document ready.
它对您不起作用的原因是因为您绑定日期选择器的输入字段在文档就绪时不可用。
You need to bind the date picker after you've added the markup to the DOM.
在将标记添加到 DOM 后，您需要绑定日期选择器。
Adding the datepicker after you've this line should work
有了这条线后添加日期选择器应该可以工作
$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();
回答by bruno
jQuery built-in functions has no calendar function. So, You've to import a plugin. There's a lot of them:
jQuery 内置函数没有日历功能。所以，你必须导入一个插件。他们有很多：
http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html
http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html
But, perhaps the most used is the jQuery UI cause it has a lot more function:
但是，也许最常用的是 jQuery UI，因为它具有更多功能：
回答by Sudhir Bastakoti
You could use this: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/for creating datepicker
你可以使用这个：http: //www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ 来创建日期选择器
回答by TheWolfNL
all you need is the following:
您只需要以下内容：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
and in the form :
并在形式：
<p>Date: <input type="text" class="datepicker"></p>
this will use the Jquery UI and create a datepicker for every input field with datepicker as class
这将使用 Jquery UI 并使用 datepicker 作为类为每个输入字段创建一个日期选择器
