JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script src="https://rawgithub.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--link rel="stylesheet" href="css/style.css" /-->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!--Datepicker relevant external files-->
<script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script src="https://rawgithub.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<input id="date1" data-role="date" type="text" data-theme="b">

CSS

//input {
  //  text-align:center !important;
//}
.ui-datepicker.ui-widget {
z-index: 100 !important;
}

JavaScript

$(document).on("click","#date1",function(){
 // $("#ui-datepicker-div").attr('align', 'center');
   // $("#ui-datepicker-div").css({left: 100, position:'absolute'});
     $.datepicker.setDefaults({dateFormat: 'yy-mm-dd'});

$("#date1").date(
{
    onSelect: function()
    { 
        var dateObject = $(this).date('getDate'); 
        alert(dateObject);
    }
});

});