Menu
This is the working format in fiddle and below is the code i have used in my demo-site i have created a new folder name js and placed datepicker.js inside it. so i linked the following in my html.
<script type="text/javascript" src="js/datepicker.js"></script>
and my datapicker.js code is
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
and my html code is
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
but when i press the above button .js is not being called. please help
485
You need to include a version of jQuery. Download the latest release and put it in your js folder and link it like you did for datepicker.js or directly include it like this
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
If this does not work try
<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>
I am not sure if your single datepicker.js has and error, but if it does try the jquery-ui js which includes it.
I tested it with including the above 2 js sources and it worked fine.
If the direct link to the jquery site js does not work then it is another problem on your page that is not shown to us.
118
Your code is running absolutly fine on my local machine. Where i simply used the jQuery and jQueryUI CDN path from
Google Developer Site Link
Your piece of code:
<!DOCTYPE html>
<html>
<head>
<title>JS Datepicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
</script>
</body>
</html>
20
if you miss place the position of jquery it wont work. hope the below code helps you.
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
}); <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With