JSFiddle - React, Tailwind, and code Playground

by polarnnn

HTML

<!-- คำนวณ BMI / วันนัดล่วงหน้า 12 สัปดาห์ ของข้อ 35->36,42 / วันนัดล่วงหน้า 24 สัปดาห์ ของข้อ 29->34 -->
<table class="table">
  <thead>
    <tr>
      <th>น้ำหนัก (kg.)</th>
      <th>ส่วนสูง (m.)</th>
      <th>BMI </th>
    </tr>
    <tr></tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-group field-sddynamicmodel-bmir1c1">

          <input type="text" id="sddynamicmodel-bmir1c1" class="form-control" name="SDDynamicModel[BMIr1c1]" value="">

          <p class="help-block help-block-error"></p>
        </div>
      </td>
      <td>
        <div class="form-group field-sddynamicmodel-bmir1c2">

          <input type="text" id="sddynamicmodel-bmir1c2" class="form-control" name="SDDynamicModel[BMIr1c2]" value="">

          <p class="help-block help-block-error"></p>
        </div>
      </td>
      <td>
        <div class="form-group field-sddynamicmodel-bmir1c3">

          <input type="text" id="sddynamicmodel-bmir1c3" class="form-control" name="SDDynamicModel[BMIr1c3]" value="">

          <p class="help-block help-block-error"></p>
        </div>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>

<!-- 29 -->
<div class="form-group field-sddynamicmodel-udip0">
  <label class="control-label" for="sddynamicmodel-udip0">29. Urine dipstick
    <br>
    <p>(วันที่ตรวจ)</p>
  </label>
  <div class="input-group" style="width:100%">
    <input type="text" id="sddynamicmodel-udip0" class="form-control" name="SDDynamicModel[UDip0]" placeholder="dd/mm/yyyy">
    <div class="input-group-addon" style="width:50px;"><i class="fa fa-calendar"></i></div>
  </div>

  <p class="help-block help-block-error"></p>
</div>

<div class="form-group field-sddynamicmodel-date_neg2">
  <label class="control-label" for="sddynamicmodel-date_neg2">34. Urine dipstick วันนัด
    <br>
    <p>(ภายหลังข้อ 29 นาน 24 สัปดาห์)</p>
  </label>
  <div class="input-group" style="width:100%">
    <input type="text" id="sddynamicmodel-date_neg2" class="form-control"...

JavaScript

// คำนวณ BMI / วันนัดล่วงหน้า 12 สัปดาห์ ของข้อ 35->36,42 / วันนัดล่วงหน้า 24 สัปดาห์ ของข้อ 29->34
$('#sddynamicmodel-bmir1c1').keyup(function(e) {
  $('#sddynamicmodel-bmir1c2').keyup(function(e) {
    var w = $('#sddynamicmodel-bmir1c1').val();
    var h = $('#sddynamicmodel-bmir1c2').val();
    var total = w / (h * h);
    $('#sddynamicmodel-bmir1c3').val((total).toFixed(1));
  });
}); //คำนวณBMI

var date = new Date();
var options = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
};
$(function() {
  $('#sddynamicmodel-scr0_date').val(date.toLocaleDateString('th-TH', options));
  $('#sddynamicmodel-scr0_date').change(function() {
    entry12 = $('#sddynamicmodel-scr0_date').val();
    entryArray12 = entry12.split("/");
    var year = parseInt(entryArray12[2]) - 543;
    var month = entryArray12[1];
    var date = entryArray12[0];
    var date12 = new Date(year + "-" + month + "-" + date);
    date12.setDate(date12.getDate() + 85);
    $('#sddynamicmodel-cr212_date').val(date12.toLocaleDateString('th-TH', options));
    $('#sddynamicmodel-date_cr312').val(date12.toLocaleDateString('th-TH', options));
  });
}); //*** หาวันนัดล่วงหน้า 12 สัปดาห์

$(function() {
  $('#sddynamicmodel-udip0').val(date.toLocaleDateString('th-TH', options));
  $('#sddynamicmodel-udip0').change(function() {
    entry24 = $('#sddynamicmodel-udip0').val();
    entryArray24 = entry24.split("/");
    var year = parseInt(entryArray24[2]) - 543;
    var month = entryArray24[1];
    var date = entryArray24[0];
    var date24 = new Date(year + "-" + month + "-" + date);
    date24.setDate(date24.getDate() + 169);
    $('#sddynamicmodel-date_neg2').val(date24.toLocaleDateString('th-TH', options))
  });
}); //*** หาวันนัดล่วงหน้า 24 สัปดาห์