jQuery Calendar check-out date +2

Multi tool use
By doing some research I found a bit of code and adopted it to make it work on my site. The code should prevent users from selecting a check-out date lower then the check-in date.
The basics of the code already works, but
1) I like to add two 2 more days to my check-out date. endDate: '+2d' doesn't seem to work.
2) How to make this code vice-versa? When I first select the check-out date, its still possible to select a day higher then the check-out date as check-in date.
'#vfb-field-2' is check-in date
'#vfb-field-3' is check-out date
jQuery( document ).ready( function($) {
setTimeout ( function() {
$(document).on('change', '#vfb-field-2', function () {
var startdate = $(this).val();
var endDate = $('#vfb-field-3').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
endDate: '+2d',
});
endDate.datepicker("setStartDate", startdate);
});
}, 150 );
} );
jquery datepicker
add a comment |
By doing some research I found a bit of code and adopted it to make it work on my site. The code should prevent users from selecting a check-out date lower then the check-in date.
The basics of the code already works, but
1) I like to add two 2 more days to my check-out date. endDate: '+2d' doesn't seem to work.
2) How to make this code vice-versa? When I first select the check-out date, its still possible to select a day higher then the check-out date as check-in date.
'#vfb-field-2' is check-in date
'#vfb-field-3' is check-out date
jQuery( document ).ready( function($) {
setTimeout ( function() {
$(document).on('change', '#vfb-field-2', function () {
var startdate = $(this).val();
var endDate = $('#vfb-field-3').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
endDate: '+2d',
});
endDate.datepicker("setStartDate", startdate);
});
}, 150 );
} );
jquery datepicker
1
for 2nd question, you need to attach for #vbf-field-3 also: $(document).on('change', '#vfb-field-3', function () {
– Amrit Shrestha
Dec 30 '18 at 11:34
Ohh. Thank you. That works fine. Just need to figure out how I can add two more days to the check-out date. :)
– Daniel
Dec 30 '18 at 12:08
add a comment |
By doing some research I found a bit of code and adopted it to make it work on my site. The code should prevent users from selecting a check-out date lower then the check-in date.
The basics of the code already works, but
1) I like to add two 2 more days to my check-out date. endDate: '+2d' doesn't seem to work.
2) How to make this code vice-versa? When I first select the check-out date, its still possible to select a day higher then the check-out date as check-in date.
'#vfb-field-2' is check-in date
'#vfb-field-3' is check-out date
jQuery( document ).ready( function($) {
setTimeout ( function() {
$(document).on('change', '#vfb-field-2', function () {
var startdate = $(this).val();
var endDate = $('#vfb-field-3').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
endDate: '+2d',
});
endDate.datepicker("setStartDate", startdate);
});
}, 150 );
} );
jquery datepicker
By doing some research I found a bit of code and adopted it to make it work on my site. The code should prevent users from selecting a check-out date lower then the check-in date.
The basics of the code already works, but
1) I like to add two 2 more days to my check-out date. endDate: '+2d' doesn't seem to work.
2) How to make this code vice-versa? When I first select the check-out date, its still possible to select a day higher then the check-out date as check-in date.
'#vfb-field-2' is check-in date
'#vfb-field-3' is check-out date
jQuery( document ).ready( function($) {
setTimeout ( function() {
$(document).on('change', '#vfb-field-2', function () {
var startdate = $(this).val();
var endDate = $('#vfb-field-3').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
endDate: '+2d',
});
endDate.datepicker("setStartDate", startdate);
});
}, 150 );
} );
jquery datepicker
jquery datepicker
asked Dec 30 '18 at 11:28
DanielDaniel
1
1
1
for 2nd question, you need to attach for #vbf-field-3 also: $(document).on('change', '#vfb-field-3', function () {
– Amrit Shrestha
Dec 30 '18 at 11:34
Ohh. Thank you. That works fine. Just need to figure out how I can add two more days to the check-out date. :)
– Daniel
Dec 30 '18 at 12:08
add a comment |
1
for 2nd question, you need to attach for #vbf-field-3 also: $(document).on('change', '#vfb-field-3', function () {
– Amrit Shrestha
Dec 30 '18 at 11:34
Ohh. Thank you. That works fine. Just need to figure out how I can add two more days to the check-out date. :)
– Daniel
Dec 30 '18 at 12:08
1
1
for 2nd question, you need to attach for #vbf-field-3 also: $(document).on('change', '#vfb-field-3', function () {
– Amrit Shrestha
Dec 30 '18 at 11:34
for 2nd question, you need to attach for #vbf-field-3 also: $(document).on('change', '#vfb-field-3', function () {
– Amrit Shrestha
Dec 30 '18 at 11:34
Ohh. Thank you. That works fine. Just need to figure out how I can add two more days to the check-out date. :)
– Daniel
Dec 30 '18 at 12:08
Ohh. Thank you. That works fine. Just need to figure out how I can add two more days to the check-out date. :)
– Daniel
Dec 30 '18 at 12:08
add a comment |
1 Answer
1
active
oldest
votes
Please refer below code :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</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>
$( function() {
$( "#indatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday',
onSelect: function(dateText, inst){
var outDate = $("#indatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()+2);
$("#outdatepicker").datepicker("option","minDate",outDate);
}
});
$( "#outdatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
onSelect: function(dateText, inst){
var outDate = $("#outdatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()-2);
$("#indatepicker").datepicker("option","maxDate",outDate);
}
});
} );
</script>
</head>
<body>
<p>check in Date: <input type="text" id="indatepicker"> check Out Date: <input type="text" id="outdatepicker"></p>
</body>
</html>
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977226%2fjquery-calendar-check-out-date-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Please refer below code :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</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>
$( function() {
$( "#indatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday',
onSelect: function(dateText, inst){
var outDate = $("#indatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()+2);
$("#outdatepicker").datepicker("option","minDate",outDate);
}
});
$( "#outdatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
onSelect: function(dateText, inst){
var outDate = $("#outdatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()-2);
$("#indatepicker").datepicker("option","maxDate",outDate);
}
});
} );
</script>
</head>
<body>
<p>check in Date: <input type="text" id="indatepicker"> check Out Date: <input type="text" id="outdatepicker"></p>
</body>
</html>
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
add a comment |
Please refer below code :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</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>
$( function() {
$( "#indatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday',
onSelect: function(dateText, inst){
var outDate = $("#indatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()+2);
$("#outdatepicker").datepicker("option","minDate",outDate);
}
});
$( "#outdatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
onSelect: function(dateText, inst){
var outDate = $("#outdatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()-2);
$("#indatepicker").datepicker("option","maxDate",outDate);
}
});
} );
</script>
</head>
<body>
<p>check in Date: <input type="text" id="indatepicker"> check Out Date: <input type="text" id="outdatepicker"></p>
</body>
</html>
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
add a comment |
Please refer below code :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</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>
$( function() {
$( "#indatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday',
onSelect: function(dateText, inst){
var outDate = $("#indatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()+2);
$("#outdatepicker").datepicker("option","minDate",outDate);
}
});
$( "#outdatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
onSelect: function(dateText, inst){
var outDate = $("#outdatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()-2);
$("#indatepicker").datepicker("option","maxDate",outDate);
}
});
} );
</script>
</head>
<body>
<p>check in Date: <input type="text" id="indatepicker"> check Out Date: <input type="text" id="outdatepicker"></p>
</body>
</html>
Please refer below code :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</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>
$( function() {
$( "#indatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday',
onSelect: function(dateText, inst){
var outDate = $("#indatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()+2);
$("#outdatepicker").datepicker("option","minDate",outDate);
}
});
$( "#outdatepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
onSelect: function(dateText, inst){
var outDate = $("#outdatepicker").datepicker("getDate");
outDate.setDate(outDate.getDate()-2);
$("#indatepicker").datepicker("option","maxDate",outDate);
}
});
} );
</script>
</head>
<body>
<p>check in Date: <input type="text" id="indatepicker"> check Out Date: <input type="text" id="outdatepicker"></p>
</body>
</html>
answered Dec 30 '18 at 12:36


MaheskumarMaheskumar
1215
1215
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
add a comment |
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
Hello, thnak you for helping me out! But somehow, it does not work for me. Maybe it helps: this is form plugin for wordpress and the code I'm injecting through the JS of my theme. Don't know if that makes a difference. The code I originally posted does indeed work. When using yours (of course I changed the IDs) nothing happens.
– Daniel
Dec 30 '18 at 13:04
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
your date pickers already working right? then just add on select part only.
– Maheskumar
Dec 30 '18 at 14:00
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
just copy my code and past in separate HTML file and open it in your browser let's check your requirements meets or not then take those syntax part only.
– Maheskumar
Dec 30 '18 at 14:04
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Yep, your code works fine in a separate html file.
– Daniel
Dec 30 '18 at 14:24
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
Hmmm, adopting it to my needs, it won't work anymore :( I changed the ID's matching to my needs.
– Daniel
Dec 31 '18 at 16:36
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977226%2fjquery-calendar-check-out-date-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
BoF i9kOH,T,E8E9qs7wog k5w
1
for 2nd question, you need to attach for #vbf-field-3 also: $(document).on('change', '#vfb-field-3', function () {
– Amrit Shrestha
Dec 30 '18 at 11:34
Ohh. Thank you. That works fine. Just need to figure out how I can add two more days to the check-out date. :)
– Daniel
Dec 30 '18 at 12:08