HTML/datepicker.html

<!DOCTYPE html>
<html>
	<title>AppCenter - Xamarin Webview Samples</title>
	<link rel="stylesheet" href="jQueryUI/jquery-ui-1.12.0.custom/jquery-ui.min.css">
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="jQueryUI/jquery-ui-1.12.0.custom/jquery-ui.min.js"></script>
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-81122166-1', 'auto');
	  ga('send', 'pageview');

	</script>
	<script>

		var jQueryLoaded = false;
		function checkForJQuery() {

		    //if the jQuery object isn't available
		    if (typeof(jQuery) == 'undefined') {
		        
	            document.write("<h1>Could not load jQuery on this device (</h1>");
	            jQueryLoaded = false;

		    } else {
		    	jQueryLoaded = true;
		    }

		}
		
		window.onload = function () { 
		
			checkForJQuery();

			if (!jQueryLoaded)
				return;
		
			$("#datepickerPop").datepicker();
		   	$("#datepickerInline").datepicker();
		}
	</script>
	<body>

		<!-- Date Picker ============================================================================================================================================= -->
		<div class='section ui-widget ui-corner-all'>
			<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
				<span class="ui-icon ui-icon-calendar" style="float:left; margin:-2px 5px 0 0;"></span>
				Date Picker
			</p>
			<div class='ui-widget-content ui-widget ui-corner-all '>
				<p>Select a Date (Pop-up): <input type="text" id="datepickerPop"></p>
				<br>
				<p>Inline Date Picker: </p>
				<div id="datepickerInline"></div>
				<br>
				
			</div>
		</div>
		<br/>
		<br/>


	</body>
</html>