JSFiddle - React, Tailwind, and code Playground

by Gustavo Ramoscelli

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://wavedrom.com/skins/default.js"></script>
<script src="https://wavedrom.com/WaveDrom.js"></script>
<br />
<div class="container">
  <form class="form-inline" action="/action_page.php">
    <div class="row">
        <div class='col-sm-2'>Desde:</div>
        <div class='col-sm-2'>
            <div class="form-group">
              <input type='text' class="form-control" id='datetimepickerstart' />
            </div>
        </div>
    </div>
    <div class="row">
        <div class='col-sm-2'>Duración (minutos):</div>
        <div class='col-sm-2'>
            <div class="form-group">
              <input type="number" name="quantity" min="1" max="5">
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary" id="btnSubmit">
    Actualizar
    </button>
  </form>
</div>
<br />

<script type="WaveDrom">
    { signal : [ 
        { name: "Circuito de Via", wave: "3.4.......3.....................................", 
        data: "ocupado desocupado ocupado" }, 
        { name: "Leva Brazo Bajo", wave: "5.......3...............................5........", 
        data: "bajo no_bajo bajo" }, 
        { name: "Leva Brazo Alto", wave: "3...................5.3..........................",
        data: "no_alto alto no_alto" }, 
        { name: "Estado PaN", wave: "3.5.....4.3.........5.4...............................",
        data: "Ocup+Bajo Desocupado+Bajo Subiendo...

JavaScript

$(function () {                
  $('#datetimepickerstart').datetimepicker({ format: 'DD/MM/YYYY HH:mm:ss' });
  WaveDrom.ProcessAll()
});


$("#btnSubmit").click(function() {
   value = document.getElementById('datetimepicker').value;
   console.log(value)
});