JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://www.malsup.com/jquery/block/ui/jquery-ui-1.7.2.redmond.css" rel="stylesheet" type="text/css" />
<script src="http://malsup.com/jquery/block/jquery.blockUI.js?v2.38" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
bindCalerdar();
$('#btnTest').click(function() {
$.blockUI({ message: $('#divAddNew'), css: { border: '0', width: '200px', height: '200px'} });
});
$('#btnCancel').click(function(){
$.unblockUI();
});
});
// Bind Calerdar
function bindCalerdar() {
$(".calerdar").datepicker({
showOn: "button",
buttonText: 'Edit',
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
closeText: 'Clear'
});
}
</script>
<style type="text/css">
.ui-datepicker{width:16em;}
.ui-datepicker TH {padding-top:0.4em;padding-bottom:0.4em;}
.ui-datepicker table {font-size:0.85em; margin-bottom:0.2em;}
.ui-datepicker .ui-datepicker-buttonpane{margin-top:0.4em;}
.ui-datepicker .ui-datepicker-buttonpane button{padding-left:0.4em;padding-right:0.4em; font-size:0.85em;}
#ui-datepicker-div{z-index:1013; font-size:14px;}
.ui-datepicker .ui-datepicker-header{z-index:1014;}
.ui-datepicker-calendar{z-index:1014;}
.ui-datepicker .ui-datepicker-title{z-index:1015;}
...