logo标签列表

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

javascriptjqueryhtml
3

针对我的应用，我正在尝试在某个事件之后（例如，在页面加载时）添加一个Jquery日期选择器。

目前，我正在尝试像这样做：

    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

当我这样做时，应该显示日期选择器的按钮没有任何作用。但是，如果我将所有这些元素直接放入我的HTML中，它就可以正常工作。

<div data-role="content" id="contentDiv" class="ui-content" role="main">
的功能很正常。我对这种行为感到困惑，希望能得到帮助。

另外，我在其他地方阅读到，它应该是非常简单的：

("#datePicker").datepicker();

但是这对我也没用（未捕获的类型错误：对象[object Object]没有方法'日期选择器'）。

谢谢。

你是否已经加载了jQuery UI的JavaScript文件？ - Ehtesham
可以的。如果我把元素直接添加到页面的<div>中，而不是尝试在页面加载时执行，我就可以很好地使用jquery ui日期选择器。 - Travis
你使用的ID是datePicker（注意P要大写），但在你上面的jQuery中使用了("#datepicker")（小写p）。 - Erik Funkenbusch
@Mystere Man 对不起，这是我在发布问题时的笔误。 - Travis
4个回答
7
你无法使用datepicker的原因是在文档准备就绪时，你绑定datepicker的输入字段不可用。
你需要在向DOM添加标记后绑定日期选择器。 查看这个fiddle 在这行代码之后添加datepicker应该可以工作。
$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();
完全正确。我不敢相信我看了这么久，没发现这个问题。 - Travis
0
0
0

你所需要的只有以下内容：

<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”类的每个输入字段创建一个日期选择器

问题仍然存在，尝试在页面加载时创建它会导致页面无法加载，但是在页面启动时使用它可以正常工作。 - Travis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接