JSFiddle - React, Tailwind, and code Playground

by Uzair Mehmood

HTML

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@v6-alpha14/dist/js/tempus-dominus.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@v6-alpha14/dist/css/tempus-dominus.css">
    <h3 id="multidate">Multiple Dates <a class="anchorjs-link" aria-label="Anchor" href="#multidate"><i class="fas fa-anchor"></i></a> <small class="show-code" title="View Code"><i class="fas fa-code"></i></small></h3>

    <p>
      The picker allows for multiple dates to be selected.
    </p>

    <div class="code-blocks d-none">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="multipleDateHtml-tab" data-bs-toggle="tab" data-bs-target="#multipleDateHtml" type="button" role="tab" aria-controls="multipleDateHtml" aria-selected="true">HTML
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="multipleDateJs-tab" data-bs-toggle="tab" data-bs-target="#multipleDateJs" type="button" role="tab" aria-controls="multipleDateJs" aria-selected="false">Javascript
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="multipleDateLog-tab" data-bs-toggle="tab" data-bs-target="#multipleDateLog" type="button" role="tab" aria-controls="multipleDateLog" aria-selected="false">Events
          </button>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="multipleDateHtml" role="tabpanel" aria-labelledby="multipleDateHtml-tab">
         <pre>           <code class="language-html">
 &lt;div
     class='input-group'
     id='multipleDate'
     data-td-target-input='nearest'
     data-td-target-toggle='nearest'
 &gt;
   &lt;input
     id='multipleDateInput'
     type='text'
    ...

JavaScript

new tempusDominus.TempusDominus(document.getElementById('multipleDatePicker'), {
        display: {
          components: {
            clock: false
          }
        },
        multipleDates: true
      });