JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<button id="openDialog">
  Click to open Dialog
</button>



<div id="dates" class="hidden">
  <input type="text" class="datepicker" id="date1" />
  <input type="text" class="datepicker" id="date2" />
  <input type="text" class="datepicker" id="date3" />
  <input type="text" class="datepicker" id="date4" />
</div>

CSS

.hidden { display: none; }

JavaScript

var dialog = $("#dates").dialog({
  autoOpen: false,
  height: 'auto', 
  maxHeight: 520,
  width: 370, 
  modal: true,
  position: {
    my: "center",
    at: "center",
    of: window
  },
  open: function (event, ui) {        
    $("#dates").on('scroll', function () {
      var inp = $(this).find('input.hasDatepicker');
      $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
  },
  beforeClose: function () {
    $('#dates').off('scroll');
  },
  resizable: false
});




$( function() {
  $( "#openDialog" ).on( "click", function() {
    dialog.dialog( "open" );
  });

   $(".datepicker").datepicker();
});
  
  

$(window).resize(function () {

    if ($("#dates").is(":visible")) {
        $("#dates").dialog({
            position: {
                my: "left top",
                at: "left bottom",
                of: "#inputPassengers"
            }
        });
    }
});