JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group col-md-12">
  <input type="hidden" name="start" value="">
  <label>Start Date Time</label>
  <div class="input-group date">
    <input data-bs-datetimepicker="{}" type="text" class="form-control">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

<div class="form-group col-md-12">
  <input type="hidden" name="end" value="">
  <label>End Date Time</label>
  <div class="input-group date">
    <input data-bs-datetimepicker="{}" type="text" class="form-control">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

JavaScript

var dateFormat = function() {
  var a = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
    b = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
    c = /[^-+\dA-Z]/g,
    d = function(a, b) {
      for (a = String(a), b = b || 2; a.length < b;) a = "0" + a;
      return a
    };
  return function(e, f, g) {
    var h = dateFormat;
    if (1 != arguments.length || "[object String]" != Object.prototype.toString.call(e) || /\d/.test(e) || (f = e, e = void 0), e = e ? new Date(e) : new Date, isNaN(e)) throw SyntaxError("invalid date");
    f = String(h.masks[f] || f || h.masks.default), "UTC:" == f.slice(0, 4) && (f = f.slice(4), g = !0);
    var i = g ? "getUTC" : "get",
      j = e[i + "Date"](),
      k = e[i + "Day"](),
      l = e[i + "Month"](),
      m = e[i + "FullYear"](),
      n = e[i + "Hours"](),
      o = e[i + "Minutes"](),
      p = e[i + "Seconds"](),
      q = e[i + "Milliseconds"](),
      r = g ? 0 : e.getTimezoneOffset(),
      s = {
        d: j,
        dd: d(j),
        ddd: h.i18n.dayNames[k],
        dddd: h.i18n.dayNames[k + 7],
        m: l + 1,
        mm: d(l + 1),
        mmm: h.i18n.monthNames[l],
        mmmm: h.i18n.monthNames[l + 12],
        yy: String(m).slice(2),
        yyyy: m,
        h: n % 12 || 12,
        hh: d(n % 12 || 12),
        H: n,
        HH: d(n),
        M: o,
        MM: d(o),
        s: p,
        ss: d(p),
        l: d(q, 3),
        L: d(q > 99 ? Math.round(q / 10) : q),
        t: n < 12 ? "a" : "p",
        tt: n < 12 ? "am" : "pm",
        T: n < 12 ? "A" : "P",
        TT: n < 12 ? "AM" : "PM",
        Z: g ? "UTC" : (String(e).match(b) || [""]).pop().replace(c, ""),
        o: (r > 0 ? "-" : "+") + d(100 * Math.floor(Math.abs(r) / 60) + Math.abs(r) % 60, 4),
        S: ["th", "st", "nd", "rd"][j % 10 > 3 ? 0 : (j % 100 - j % 10 != 10) * j % 10]
      };
    return f.replace(a, function(a) {
     ...