JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="popup">
    Date Picker<input type="text" class="datepicker" /><br><br>
    
    <p> working in out of datepicker: 
        <select style="width:120px;">
          <option value="0">Jan</option>
          <option value="1">Feb</option>
          <option value="2">Mar</option>
          <option value="3">Apr</option>
          <option value="4">May</option>
          <option value="5">Jun</option>
          <option value="6">Jul</option>
          <option value="7" selected="selected">Aug</option>
          <option value="8">Sep</option>
          <option value="9">Oct</option>
          <option value="10">Nov</option>
          <option value="11">Dec</option>
        </select>
    </p>
    
</div>

CSS

body {font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";font-size: 62.5%;}
.popup{height:200px;background:#ccc;border:5px solid #000;}

JavaScript

$.blockUI({
    message:$('.popup'),
    focusInput: false,
    onBlock:function(){
              
    }
});

$( ".datepicker" ).datepicker({
    dateFormat: 'dd-mm-yy',
    changeYear: true,
    changeMonth: true,
    yearRange: 'c-10:c+3',
    showButtonPanel: false            
});

$('#ui-datepicker-div').addClass('blockMsg');