jQuery UI: Date Picker displayed in UI Dialog

Displaying the UI Datepicker as a dialog.

by Faisal Khan Janjua

HTML

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div>
  <div>
    <div>
      <div class="holder">
        <input type="input" id="Field1" class="datepicker" />
        <div class="block cont1"></div>
      </div>
      <div class="holder">
        <input type="input" id="Field2" class="datepicker" />
        <div class="block cont2"></div>
      </div>
    </div>
  </div>
</div>

CSS

.holder {
  float: left;
  margin-right: 20px;
}

.block {
  position: relative;
}

#ui-datepicker-div {
  top: 0 !important;
  left: 0 !important;
}

JavaScript

$( "#Field1" ).datepicker({
  beforeShow:function(){
    $('.cont1').append($('#ui-datepicker-div'));
  }
});
$( "#Field2" ).datepicker({
  beforeShow:function(){
    $('.cont2').append($('#ui-datepicker-div'));
  }
});