JSFiddle - React, Tailwind, and code Playground

by Uzair Mehmood

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
<div class="container my-4">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker14" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker14" />
          <div class="input-group-append" data-target="#datetimepicker14" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="res">

</div>

JavaScript

$(function() {
  moment().tz("Asia/Karachi").format();
  let dates = [];
  $('#datetimepicker14').datetimepicker({
    allowMultidate: true,
    multidateSeparator: ','
  })
  $("#datetimepicker14").on("change.datetimepicker", (e) => {

    if (e.date._d) {
      dates.forEach(date => {
        if (date.toISOString().split('T')[0] == e.date._d.toISOString().split('T')[0]) {
          let index = dates.indexOf(date);
          if (index !== -1) {
            dates.splice(index, 1);
          }
        }
      });
      dates.push(e.date._d);
    } else {
      dates.forEach(date => {
        if (date.toString() == e.oldDate._d.toString()) {
          let index = dates.indexOf(date);
          if (index !== -1) {
            dates.splice(index, 1);
          }
        }
      })
    }
    render(dates);
  });
});
let render = (dates) => {
  $('#res').html('');
  dates.forEach(date => {
    let dateInput = document.createElement("input");
    dateInput.type = "datetime-local";
    dateInput.value = date.toISOString().replace('Z', '').split('.')[0];
    dateInput.classList.add("form-control", "col-12", "mt-1");
    dateInput.readOnly = true;
    dateInput.disabled = true;
    $('#res').append(dateInput);
  })
}