JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<script src="http://junk.hostsaba.com/timetracker/jquery.jeditable.mini.js"></script>
<div class="editable">click to edit</div>

JavaScript

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

$.editable.addInputType( 'datepicker', {
    element: function( settings, original ) {
      var form = $( this ),
          input = $( '<input />' );
      input.attr( 'autocomplete','off' );
      form.append( input );
      settings.onblur = 'nothing';
      return input;
    },
    plugin: function( settings, original ) {
        var form = this, input = form.find( "input" );
        settings.onblur = function() {
            original.reset( form );
        };
        input.datepicker( {
        dateFormat:'yy-mm-dd', 
        showOn: "button",
        buttonText: 'x',
        onSelect: function() {
            form.submit();
        },
        onClose: function() {
            setTimeout( function() {
                if ( !input.is( ':focus' ) ) {
                  original.reset( form );
                } else {
                  form.submit();
                }
                }, 150 );
            }
        } );
    }
} );

    $(".editable").click(function (event) {
        $(this).editable('ajax_save.php',{
            id          : 'id',
            type        : 'datepicker',
            style       : 'margin:0px;width:80%;display:inline',
            onblur      : 'cancel',
            tooltip     : ''
        });
    });