I am trying to add datepicker calendar. However it is not visible.
Below is my code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1"><title>jQuery UI Datepicker - Select a Date
Range</title<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js" </script>
<script>
$('#date1').datepicker({ maxDate: '+0d', changeMonth: true, numberOfMonths: 1, onClose: function (selectedDate) {
$('#date2').datepicker("option", "minDate", selectedDate);
setTimeout(function () {
$('#date2').focus();
}, 100);
} }); $('#date2').datepicker({
maxDate: '+0d',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$('#date1').datepicker("option", "maxDate", selectedDate);
} }); </script> </head> <body>
<header>
<h3>Bhutan Trip planner</h3>
</header>
<div class="tableoptions"> <span class="field">
<label for="fromdate">From:</label>
<input id="date1" name='fromdate' type="text" class="width75" />
</span> <span class="field">
<label for="todate">To:</label>
<input id="date2" name='todate' type="text" class="width75" />
</span> </div> </body> </html>
thanks in advance!
Here is a working example of your code, it does work: https://jsfiddle.net/Twisty/dsn9t5g3/
Here is your Code, with a little cleaning:
You had a few tags that were not closed properly and that can kill your code.
Also, you didn't ask a question. No way to know if this is what you were looking for.