JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">   

<section>

<form id="addContractForm">
    <div class="modal fade" id="modalAddContract" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div id="new-contract-app" class="modal-content">

          <div class="modal-header">
            <h4 class="modal-title text-center w-100 font-weight-bold lang" key="langAddContract"></h4>
          </div>

          <div class="modal-body">

          
 

            <div class="form-group">
              <label class="lang" key="langContractDescription" for="addContractContractDescription"></label>
              <input type="text" class="form-control" id="addContractContractDescription">
            </div>

            <b><div class="lang" key="langAddContractInstrTop"></div></b><br>

            <div class="row align-items-end">  
              <div class="form-group col">
                <label class="lang" key="langDateFrom" for="addContractFormDateFrom"></label>
                <input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateFrom" placeholder="YYYY-MM-DD">
              </div>
              <div class="form-group col">
                <label class="lang" key="langDateTo" for="addContractFormDateTo"></label>
                <input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateTo" placeholder="YYYY-MM-DD">
              </div>
            </div>
            <hr>
            
           

            <b><div class="lang" key="langAddContractInstrMid"></div></b><br>

            <div class="row align-items-end">
              <div class="form-group col-6">
                <label class="lang" key="langDeviceUser" for="addContractFormDeviceUser"></label>
                <input type="text" class="form-control"...

CSS

.ui-datepicker { z-index: 9999 !important; }
.datepicker { z-index:10800 !important; display: block; }
.form-control.datepicker {position:unset} 
.form-group.datepicker {position:unset}

JavaScript

$(function() {
      $(document).on("click", ".modal-body", function () {
       $("[data-toggle='datepicker']").datepicker({
         dateFormat: 'yy-mm-dd',
         parentEl: '#dispatch_modal'   
                                    
         });
          }); 
    });