JSFiddle - React, Tailwind, and code Playground

by Raja Sekhar Reddy Gantla

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.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">


<!-- copy these links to the page where you store all the CDN's. (the file where we wrote !DOCTYPE html in the morning) -->
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
    webshims.setOptions('forms-ext', {types: 'date'});
		webshims.polyfill('forms forms-ext');
</script>



<br>
<br>

<!-- jquery mobile 1.4.2 or higher version date picker (native) -->
<!-- <div  data-role="fieldcontain">
<label for="date1">Jquery 1.4.2 or higher date picker</label>
<input id="date1" data-role="date" type="text">
</div>
<br>
<br>
<br>
<br> -->


<!-- please copy over, below code between the two comments saying HTML5 date picker -->
<!-- HTML5 date picker -->
<div>

  <div  data-role="fieldcontain"  style="width:80%; float: left;">
    <label for="date11">HTML5 date picker</label>
    <input type="date" id="date11">
  </div>
  
  <div  style="width:20%; float: right;">
    <span>&nbsp;</span>
    <input type="reset" value="Reset" data-inline="true">
  </div>
  
</div>

<div style="clear: both"></div>
<!-- HTML5 date picker -->

JavaScript

$(document).ready(function () {
    $.datepicker.setDefaults({
        dateFormat: 'dd-mm-yy'
    });

    $(document).on("click", "#date1", function () {
        var viewportwidth = $(window).width();
        var datepickerwidth = $("#ui-datepicker-div").width();
        var leftpos = (viewportwidth - datepickerwidth) / 2;
        $("#ui-datepicker-div").css({
            left: leftpos,
            position: 'absolute'
        });
    });

}

);