Question

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

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

Answer 1

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.

Check out this fiddle

Adding the datepicker after you’ve this line should work

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