jQuery Inline Editing for date picker

Question

On my page, there are multiple places with date fields rendered as below; So some date are always displayed in editable text boxes and other as labels (then inline-edited)

<div class="editableDateTxt" title="06/04/2014">06/04/2011</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date1" id="date1" class="datePicker">
<input type="text" value="" placeholder="mm/dd/yyyy" name="date2" id="date2" class="datePicker">

<div class="editableDateTxt" title="06/04/2014">06/04/2012</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date3" id="date3" class="datePicker">

<div class="editableDateTxt" title="06/04/2014">06/04/2013</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date4" id="date4" class="datePicker">

Now I need to implement inline editing...i.e. when label is clicked, I want to show the jQuery UI date picker and on blur, I want to hide...

So I am using the below code;

$(document).on("click",".editableDateTxt", function () {
                        var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
                        $(this).parent().append(input);
                        $(this).remove();
                        input.focus();
                        $('.datePicker').datepicker().datepicker('show');
                });

                $(document).on("blur",".datePicker", function () {
                        $(this).parent().append($("<div class='editableDateTxt'/>").html($(this).val()));
                        $(this).remove();
                });

However, there seems to be an issue with the line;

$('.datePicker').datepicker().datepicker('show');

since there are multiple elements with class datePicker...How do I ensure that the datepicker is shown only where the div element with class "editableDateTxt" is clicked ?

---

Tried onSelect code

I updated the code as below, but nothing happens on select (i even tried adding an alert inside onSelect, but it does not fire)

$(parent).find('.datePicker').datepicker().datepicker({
    onSelect: function(date) {
        parent.append($("<div class='editableDateTxt'/>").html(date));
        $(this).remove();
    }
}).datepicker('show');

Answer 1

Instead of

$('.datePicker').datepicker().datepicker('show'); 

try:

input.datepicker().datepicker('show');

Answer 2

Not sure if I understand your problem 100%. But wouldn't just using $(this).find() solve your problem. See below:

$(document).on("click",".editableDateTxt", function () { var input = $('', {'type': 'text', 'class':'datePicker', 'value': $(this).html()}); $(this).parent().append(input); $(this).remove(); input.focus(); $(this).find('.datePicker').datepicker().datepicker('show'); });

I re-read your code. What about storing a reference to the parent and using that to search.

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    $(parent).find('.datePicker').datepicker().datepicker('show');
});

Or do all the elements share the same parent. Bit unsure as your JS seems to suggest unique parent elements, but your HTML doesn't. You may not have included all your HTML though.

Of course, just using the input variable would also work:

input.datepicker().datepicker('show');

Didn't notice that one at first.

---

Responding to your comment about closing the datepicker and just showing the selected date. Best way for this is to use the onSelect option in the datepicker. Like this:

parent.find('.datePicker').datepicker({
    onSelect: function(date) {
        parent.append($("<div class='editableDateTxt'/>").html(date));
        $(this).remove();
    }
}).datepicker('show');

See this working jsfiddle: http://jsfiddle.net/6pptH/

---

So your entire JS becomes:

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    parent.find('.datePicker').datepicker({
        onSelect: function(date) {
            parent.append($("<div class='editableDateTxt'/>").html(date));
            $(this).remove();
        }
    }).datepicker('show');
});