JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<table class="search-results pevs" style="width: 100%;">
    <tr>
        <td class="editable" data-type="date">07/22/2013</td>
    </tr>
    <tr>
        <td class="editable" data-type="date">05/10/2023</td>
    </tr>
    <tr>
        <td class="editable" data-type="date">12/14/2013</td>
    </tr>
</table>

JavaScript

$(document).on("focus", "td input[type=text]", function (e) {
        e.stopPropagation();
        if ($(this).hasClass("hasDatepicker")) {
            console.log("has datepicker, do nothing");
        } else {
            if ($(this).closest("td").attr("data-type") === "date") {
                var dt = $(this).val();
                var editable = $(this);
                $(this).datepicker({onSelect:function(dateText,inst){
                    //console.log(dateText);
                    //console.log(inst);                    
                    //editable.text(dateText);
                }});
                $(this).datepicker("setDate", dt);
                console.log("created a datepicker");
            }
        }
    });


    $(".editable").click(function (e) {
        if (!$(e.target).is('input, textarea')) {
            $(".editable").each(function () {
                if ($(this).has("input")) {
                    console.log('it has');
                     v = $(this).children("input").datepicker('getDate');
                    console.log(v);
                  $(this).text(v.input);
                }
            });

            var type = $(this).attr("data-type");
            var val = $(this).text();
            if (type === "text" || type === "date") {
                str = '<input type="text" data-orig="' + val + '" onfocus="this.value = this.value;" class="input" style="width: 100%;" value="' + val + '" /><br />';
            } else if (type === "textarea") {
                str = '<textarea class="input" data-orig="' + val + '" onfocus="this.value = this.value;" style="width: 100%;">' + val + '</textarea><br />';
            }
            str += '<input type="button" class="save-edit" value="Save" />';
            str += '<input type="button" class="cancel-edit" value="Cancel" />';

            $(this).html(str);
            $(this).find("input[type=text], textarea").focus();
        }
    });