CODEWITHSUNDEEP
javascriptjquery
Xonal
Xonal

Reputation: 1360

Change text into 'datepicker' input field onclick

I'm trying to insert Jquery's datepicker into my webpage. I'm importing correctly, because I have it working on a form on a different page, but I'm trying to do something a little different on this one. I have a pre-entered date displayed on the page with a little "edit" icon next to it. I want to click on the icon and change the date into an input field that acts as a datepicker. It successfully changes into a text input field, but for some reason the datepicker calendar doesn't pop up when I select it.

My HTML:

    <a class="edit" href="#!" onClick="editStart()"> 
    <i class="icon-edit icon-white"></i> </a> Start Time: 
       <span style="outline-color:black;" id="start">{{ event.start }}</span>

Javascript:

function editStart(){  // Makes start time of event editable
    $('#tabs2').slideDown(200);
    $('#start').html('<input type="text" id="datepicker">');
}

Upvotes: 0

Views: 2526

Answers (2)

Jakub Korupczyński
Jakub Korupczyński

Reputation: 480

Creating input field with specific id is not enough. You need to launch datepicker on your field. So for example:

$("#datepicker").datepicker();

This field doesn't need to be created by script. It can be present on your page, you just need to run datepicker on it when you will need it.

Upvotes: 1

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

After adding the text input into the html, you still need to call jQuery's datepicker on it:

function editStart(){  // Makes start time of event editable
    $('#tabs2').slideDown(200);
    $('#start').html('<input type="text" id="datepicker">');
    $('#datepicker').datepicker();
}

Upvotes: 3

Related Questions