如何将datepicker功能添加到动态可编辑的表列

I have code snipe that works great the problem started when i had to add datepicker on top of it.

working sample:

<td 
    id="test_<?php echo $id; ?>" 
    title="Double click to edit"
    class="editable" 
    name="ExpiryDate_<?php echo $id; ?>"
>
    <?php echo $Expiry_Date; ?>
</td>

 <script>
    $(document).ready(function () {

        $(".editable").dblclick(function () {

            var OriginalContent = $(this).text();

            var pieces = $(this).attr("name");
            ID= pieces;
            var count = 1;

            $(this).addClass("cellEditing");
            count += 1;
            $(this).html("<input id='t1_"+count+"'placeholder='Click to open calendar' type='text'  value='' />");

            $(this).children().first().focus();


            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var option = confirm('Are you sure u wanna change');

                    if(option){
                   ..
                    //Call the server side file to communicate with database.
                   //send do some staff mostly send GET xmlhttp.send();
                 ..
                }
            });

            $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
            });
        });

        </script>

to add datepicker i add under:$(this).children().first().focus();

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

and This datepicker works great I can get dapicker to show dynamically, click on date without editable field closing on me and on datepick widget get close focus return to editable field and i can click Enter key==13 so I can send date to server using GET, problem is when I click anywhere on page widget just reopens I tried a lot of tweaks to make it go away but I really don't know what to do i'm stuck.

What I would like to mention the site use bootstrap v3.1.1 and jquery 1.11.1

Fiddle

Added fiddle, if I remove

$(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
        });

Then I can't leave editable field but if I leave that part of code I can't make datepick to work. After picking date it should be focus on editable field again so user can click enter to send GET

Maybe you should provide some fiddle, but from what I can see the wrong line of code is:

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

You shouldn't set focus on origFocus variable, because doing that you re-apply focus on the element. Just try these options:

$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              document.activeElement.focus();
                        });

or

$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              document.activeElement = null;
                        });

or just not setting the blur handler at all.

EDIT

Ok, i cleaned it up a little. Hope it helps

jsfiddle