Change text into 'datepicker' input field onclick

Question

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">');
}

Scott Mermelstein · Accepted Answer · 2013-07-15 18:43:03Z

3

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

answered Jul 15, 2013 at 18:43

Scott Mermelstein

15.4k4 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jakub Korupczyński · Accepted Answer · 2013-07-15 18:43:52Z

1

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.

answered Jul 15, 2013 at 18:43

Jakub Korupczyński

4802 silver badges7 bronze badges

Collectives™ on Stack Overflow

Change text into 'datepicker' input field onclick

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related