Question

对于我的应用程序，我正在尝试在某个事件之后添加一个Jquery Datepicker（对于这个例子，我们只是说当页面加载时）。

我目前正在尝试这样做：

    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

当我这样做时，应该调出日期选择器的按钮不会做任何事情。但是，如果我把所有这些元素都放到我的

中

<div data-role="content" id="contentDiv" class="ui-content" role="main">

按钮工作正常。我完全被这种行为所困扰，任何帮助都会非常感激。

另外，我在其他地方读到它应该像

一样简单

("#datePicker").datepicker();

但这对我也不起作用（Uncaught TypeError：Object [object Object]没有方法'datepicker'）。

由于

Answer 1

它不适合你的原因是因为你绑定了datepicker的输入字段在文档就绪时不可用。

在将标记添加到DOM之后，需要绑定日期选择器。

Check out this fiddle

在此行之后添加datepicker应该可以正常工作

$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();

Answer 2

jQuery内置函数没有日历功能。所以，你要导入一个插件。其中有很多：

http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html

但是，最常用的是jQuery UI，因为它有更多的功能：

http://jqueryui.com/

Answer 3

你可以使用这个：http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ 用于创建datepicker

Answer 4

您只需要以下内容：

<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>

，格式为：

<p>Date: <input type="text" class="datepicker"></p>

这将使用Jquery UI并为每个输入字段创建一个datepicker，其中datepicker为class

如何动态创建Jquery日期选择器？

4 个答案: