Question

The first script below turns simple text (a date in this case) into an editable field when clicked. I then want the datepicker() calendar to pop up when that dynamically generated field is clicked but I can’t get the calendar to appear to all.

<script type="text/javascript">
    $(document).ready(function() {
        var alreadyActive = "";
        $(".editable-date").on("click", function() {
            if(!alreadyActive) {
                OriginalText = $(this).text();
                divValue = $(this).attr('value');
                $(this).html("<form class='edit-date' ><input type='text' class='date_input' value='" + OriginalText + "' /><input type='submit' value='Update' /></form>");
                alreadyActive = "true";
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $(".date_input").datepicker();
    });
</script>

I also tried the below script to call datepicker() to no avail.

<script type="text/javascript">
    $(function(){
        $("body").on("click", ".date_input", function() {
            $(this).datepicker();
        });
    });
</script>

Answer 1

your second attempt was close, it should be:

$(this).datepicker().triggerHandler("focus");