JSFiddle - React, Tailwind, and code Playground

by mccarthysean

HTML

<head>
    <meta charset="utf-8">
    <title>X-editable starter template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- bootstrap and JQuery -->
  <!--   <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>   -->

    <!-- x-editable (bootstrap version) -->
  <!--   <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js">
    </script> -->
    
<!--     
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script> -->
    		<!-- 
    		  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> -->
    
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


</head>

<body>
<a data-csrf="20210909043638##fe727c46279804e8966afbf672eef4b608c15c6e" data-format="YYYY-MM-DD" data-pk="490" data-role="x-editable" data-template="YYYY-MM-DD" data-type="combodate" data-url="" data-value="2019-08-01" href="#" id="run_mfg_date" name="run_mfg_date" class="editable editable-click">2019-08-01</a>

</body>

JavaScript

// make x-editable's POST compatible with WTForms
// for x-editable, x-editable-combodate, and x-editable-boolean cases
/* var overrideXeditableParams = function (params) {
  var newParams = {};
  newParams["list_form_pk"] = params.pk;
  newParams[params.name] = params.value;
  if ($(this).data("csrf")) {
    newParams["csrf_token"] = $(this).data("csrf");
  }
  return newParams;
}; */



$(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';  
    
		var $el = $("#run_mfg_date");
    $el.editable();
});

/* $.fn.editable.defaults.mode = 'inline'; */
/* 
$el.editable({
  params: overrideXeditableParams,
  combodate: {
    // prevent minutes from showing in 5 minute increments
    minuteStep: 1,
    maxYear: 2030,
  },
}); */