CODEWITHSUNDEEP
javascriptjqueryhtml
Travis
Travis

Reputation: 646

How do I create a Jquery datepicker dynamically?

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

Upvotes: 3

Views: 17600

Answers (4)

Amin Eshaq
Amin Eshaq

Reputation: 4024

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();

Upvotes: 7

TheWolfNL
TheWolfNL

Reputation: 1283

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

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

You could use this: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ for creating datepicker

Upvotes: 0

bruno
bruno

Reputation: 91

jQuery built-in functions has no calendar function. So, You've to import a plugin. There's a lot of them:

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:

http://jqueryui.com/

Upvotes: 0

Related Questions