JSFiddle - React, Tailwind, and code Playground
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> </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'
});
});
}
);