Is there a way to automatically add 1 day to the checkout date when selecting a check-in date? For example, if today is November 8, 2017 and I select November 10 as the check-in date, can the checkout date automatically adjust to November 11?
This is the HTML code:
<input name="arrival_guest" type="text" class="form-control" id="start">
<input name="departure_guest" type="text" class="form-control" id="end>
Check out my code on JSFiddle.
Here is a code snippet for you to try out:
var picker = new Pikaday({
field: document.getElementById('start'),
firstDay: 1,
minDate: new Date(currentDate.getTime() + 1 * 24 * 60 * 60 * 1000),
maxDate: new Date(2090, 12, 31),
yearRange: [2000,2090],
onSelect: function() {
var selectedDate = new Date(this.getDate());
var checkOutDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()+1);
picker2.setMinDate(checkOutDate);
},
onClose : function() {
var selectedDate = this.getDate();
var checkOutDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()+1 );
picker2.setDate(checkOutDate);
}
});
var picker2 = new Pikaday({
field: document.getElementById('end'),
onClose : function() {
var selectedDate = this.getDate();
var checkInDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()-1 );
picker.setDate(checkInDate);
}
});Here's how you can implement this in the onchange event of the initial datepicker:
$('.initial-date').change(function() {
var newDate = $('.initial-date').datepicker('getDate', '+1d');
newDate.setDate(newDate.getDate()+1);
$('.final-date').datepicker('setDate', newDate);
});
Check out this code snippet for increasing the date by one day when a change occurs in the start input field.
var startValue = document.getElementById('start').value;
var dateObj = new Date(startValue);
dateObj.setDate(dateObj.getDate() + 1);
var endDate = dateObj.getFullYear() +"-"+ dateObj.getMonth() +"-"+ dateObj.getDate();
document.getElementById('end').value = endDate;<input name="arrival_guest" type="text" class="form-control" id="start" value="2017-11-19">
<input name="departure_guest" type="text" class="form-control" id="end">UPDATE: Based on my interpretation of your request, it seems you want to ensure that the minimum date selected for the departure is based on the arrival date chosen. Please refer to this working example I have created in a fiddle. It should meet your requirements.
Here's a suggestion for your code:
picker2.setMinDate(this.getDate());
var b = convert(this.getDate());
document.getElementById('end').value = b;
Include the following function:
function convertDate(input) {
var dateInput = new Date(input);
var day = dateInput.getDate()+1;
var month = dateInput.getMonth();
var year = dateInput.getFullYear();
var endDate= new Date(year, month, day+1);
return [year,month,day].join("-");
}
Below is a simplified version of the code I am working with: <html> <head> <script src="file:///D:/OtherWork/javascript/vue/vue.js"></script> </head> <body> <div id="app"> & ...
I am currently exploring the possibility of extracting information about the column and row position (.col, .row) of the first element/tile from the view.html code snippet provided below. <div class="container" gridster="gridsterOpts"> & ...
Struggling to center two divs within a container using flexbox. Flex-wrap and align-items are working fine, but justify-content just won't cooperate. :( <div className="container"> <div className="card- ...
I am currently experimenting with creating an expand-on-hover search form within a Bootstrap 4 navbar. While I have achieved a smooth transition effect on the search form upon hover, I have noticed that the menu next to it abruptly jumps. In the past, I su ...
Currently, I am in the process of creating a straightforward angular2/expressJS application. Within my expressJS code, I have an HTTP GET router call that retrieves all users from MongoDB and successfully returns them: app.get('/getusers', funct ...
When working with Angular, I am attempting to: $scope.data = "<script> alert('hi'); </script>"; Unfortunately, this approach does not seem to be effective. I also experimented with adding ng-bind-html but did not achieve any success ...
In the upper-left block of my page, there is an image of piano keys within a 2x2 container div. The container class is called nav-blocks, and each individual block is identified by the class nav-block. Each block contains the image with the class nav-block ...
Is there a way to load a specific CSS file only when a user visits the contact.html view on my AngularJS application or site? I came across this helpful answer that almost made sense to me How to include view/partial specific styling in AngularJS. The acce ...
On my webpage, I have a selection of reports available. Currently, there are 4 sizable buttons located on the right-hand side for viewing, adding, editing, or deleting a report. However, there have been complaints from users who find it inconvenient to scr ...
Exploration Hello! I've developed a system similar to graphql, but using Sequelize exclusively. By utilizing JSON objects as query options in Sequelize, clients can send these options directly after proper sanitization. My Experiment Out of curiosi ...
Could anyone please help me figure out why my code is not functioning properly? I am trying to send form data to PHP using the post method, but my PHP script is not receiving any requests. Below is the code snippet for my signup form located in signupmodal ...
Currently, in my Vue 3 application with Pinia, I am interested in leveraging the composition API within my Pinia stores. Take a look at this example store: export const useMyStore = defineStore("my", () => { const currentState = ref(0); return ...
Hey there! I've been struggling with getting my dropdowns to open one at a time on my website. I attempted to hide them all by default, but they still insist on opening simultaneously. Any ideas on what I might be overlooking? Thank you for your help! ...
After spending 2 days struggling with this problem, scouring the API documentation of Electron.js and various websites, I am turning to you all as my final hope: Here are the 3 files that are causing the issue: main.ts (excerpt): app.whenReady().then(() ...
I created a navigation bar using an unordered list (ul) with list items (li). However, I encountered an issue where the items were displaying in reverse order until I applied the following CSS: .nav-bar .btn{ float: left; } .nav-bar u ...
I'm attempting to upload a picture using multer, here is my server-side code: const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploads/') }, filename: function (req, file, cb) { ...
Is this approach effective, or am I just overthinking it? Essentially, every click outside of the popover anchor or within the popover itself will hide all popovers. $("body").on('click', function(e) { if(!$(event.target).hasClass('with-pop ...
Is there a way to include spaces as decimal number separators? Currently, the format is 23456.00, but it needs to be 23 456 I've managed to eliminate the .00 using toFixed, but I'm struggling with adding the space separator. {{parseFloat(post.m ...
Hey everyone! I'm currently in the process of developing my very first React library. If you're curious, you can check it out here: https://github.com/HunterJS-bit/react-mini-contextmenu However, when attempting to npm install the library, I en ...
Sample Javascript code utilizing jQuery 1.7: $( function() { $.get('/ajax_dummy', function() { alert('foo'); }) }); Upon inspecting with Firebug, I observed that the HTTP GET request was successfully sent and a "hello world" respo ...