Как динамически создать средство выбора даты Jquery? - PullRequest
2 голосов
/ 27 ноября 2011

Для моего приложения я пытаюсь добавить 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).

Спасибо

Ответы [ 4 ]

5 голосов
/ 27 ноября 2011

Причина, по которой он не работает для вас, заключается в том, что поле ввода, к которому вы привязываете указатель даты, недоступно в готовом документе.

Вам необходимо привязать средство выбора даты после добавления разметки в DOM.

Проверьте эту скрипку

Добавление DatePicker после того, как вы эту строку должны работать

$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();
0 голосов
/ 27 ноября 2011

все, что вам нужно, это следующее:

<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 и создавать указатель даты для каждого поля ввода с указателем даты каккласс

0 голосов
/ 27 ноября 2011

Вы можете использовать это: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ для создания DatePicker

0 голосов
/ 27 ноября 2011

Встроенные функции jQuery не имеют функции календаря.Итак, вы должны импортировать плагин.Их много:

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

Но, пожалуй, наиболее часто используется пользовательский интерфейс jQuery, потому что он имеет гораздо больше функций:

http://jqueryui.com/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...