jQuery Заменить DIV на INPUT и наоборот

Я реализую встроенную функцию редактирования.

Таким образом, сначала будет отображаться метка даты (например, 05/01/1999), и по щелчку ее она будет заменена поле ввода с таким же значением (05/01/1999)... Теперь пользователь может выберите любую дату, используя jQuery UI date picker и при выборе любой даты (например, 05/01/2005), я бы снова показал ярлык (05/01/2005)

В настоящее время я использую код ниже:

$(document).on("click",".editableDateTxt", function () {
    var currElmModelAttr = $(this).attr('data-model-attr');
    var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px','class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.datepicker().focus();
});

Каков наилучший способ реализовать то же самое?

Теперь вот ключевой момент... Я использую jQuery UI datepicker... который использует данные jQuery() внутри... Поэтому я не хочу потерять его во время прыжка с div > и наоборот...

Не могли бы вы изменить приведенный выше код, чтобы рассмотреть, что информация о jQuery data() остается.

********* ОБНОВЛЕННЫЙ КОД ниже:

 var MyView = BaseModalView.extend({
            el: "#myModalContainer",
            initialize: function() {
                var self = this;

            },

render: function() {
                var self = this,
                    $el = $(self.el);

                $el.find(".datePicker").datepicker();
                self.initEventListeners();
            },

initEventListeners: function() {
                var self = this, 
                    $el = $(self.el);

        var $this;
$(document).on("click", ".editableDateTxt", function () {
    var currElmModelId = $(this).attr('data-model-id');
    var currElmModelAttr = $(this).attr('data-model-attr');
    $this = $(this);
    var input = $('<input />', {
            'type': 'text',
            'name': currElmModelAttr,
            'data-model-id': currElmModelId, 
            'data-model-attr': currElmModelAttr,
            'style': 'width:100px',
            'class': 'datePicker',
            'value': $(this).text()
    });
    $(this).replaceWith(input);
    input.datepicker({
        onSelect: function (date) {
            $this.text(date);
            input.replaceWith($this);
            // input.blur();
        }
    }).focus();
    $(document).on("blur change", "input", function () {
        setTimeout(function () {
            var value = input.val();
            $this.text(value);
            input.replaceWith($this);
        }, 100);

    });

});

}