CODEWITHSUNDEEP
jqueryhtmldatepicker
shabbir.rang
shabbir.rang

Reputation: 279

Display datepicker on dynamically created textbox

I am trying to create a div with textbox on which i want datepicker to display date. So far i am able to dynamically create the div with textbox and datepicker but i am not being able to display the date on textbox. What am i doing wrong here??

Code:

showdate(){
var newDateBoxdiv = $(document.createElement('div')).attr({ class:"EDate", id:"EDate"+i});
newDateBoxdiv.html('<input type="text" id="DisplayTextBox">');

addDateBox();


newDateBoxdiv.insertAfter('.EDate');
}



//Function called inside the above function
addDateBox(){
 $('.EDate').find('input[id^="DisplayTextBox"]').each(function () {

    $(this).datepicker({
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true

    });
    $(this).datepicker({dateFormat: 'dd-M-y'});
    var dateFormat = $( this ).datepicker( "option", "dateFormat" );
    $(this).datepicker( "option", "dateFormat", 'dd-M-y' );

});

Upvotes: 0

Views: 794

Answers (3)

Hema Dhanasekaran
Hema Dhanasekaran

Reputation: 11

use .on():

$( selector ).live( events, data, handler ); // jQuery 1.3+

$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+

$( document ).on( events, selector, data, handler ); // jQuery 1.7+

Upvotes: 1

loQ
loQ

Reputation: 2136

Updated code.. Ive noticed some errors of your code including the newDateBoxdiv values. Your textbox DisplayTextBox is not incrementing as well. Try this instead. 

showdate(){
  var edatenum = $('#increment').val();
  edateinc = "EDate"+edatenum; //increment the value of your div
  var displaytextbox = "DisplayTextBox"+edatenum; //of course you have to increment your textbox also
  $('#increment').val(""+(edatenum+1)); //increment the value of our hidden field
  var newDateBoxdiv = $('<div class="EDate" id="'+edateinc+'"> <input type="text" id="'+displaytextbox+'"></div>');
  newDateBoxdiv.insertAfter(".your_existing_box");  

     addDateBox(); //im not sure if this method already works?
}

<!-- outside of script -->
<input type='hidden' id='increment' value='1'>

Upvotes: 1

gtht90
gtht90

Reputation: 137

use .live()

http://api.jquery.com/live/

Upvotes: 0

Related Questions