jQuery Calendar check-out date +2

Multi tool use
Multi tool use












0















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 );
} );









share|improve this question


















  • 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


















0















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 );
} );









share|improve this question


















  • 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
















0












0








0








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 );
} );









share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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
















  • 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














1 Answer
1






active

oldest

votes


















0














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>





share|improve this answer
























  • 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













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
});


}
});














draft saved

draft discarded


















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









0














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>





share|improve this answer
























  • 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


















0














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>





share|improve this answer
























  • 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
















0












0








0







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>





share|improve this answer













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>






share|improve this answer












share|improve this answer



share|improve this answer










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





















  • 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




















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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
O,Yt9o44px,KNG ZrcTzrK9AVoh9AO4Z7g4,3JP yAjWa,o,MZUuW8bVgpLKw aY8nMb,1g3 vaYeYu2y Mt,w

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas