Change the date by one day on date picker

Question

Hello I have created a booking form with html and can't find how to make it so that the check out datepicker value always be the next day that is selected on the check in datepicker.

I have already tried to input the date of the check in datepicker to a var and print it to the value of the date picker but didn't work.

I will be placed on a wordpress shortcode widget.

This is the one of the codes I have tried.

    <html>
    <body>
<form method="get">
    <script type="date/javascript">
            var indate = document.getElementById(Check_In_Date);
            var outdate = document.setElementById(Check_Out_Date);
            
            outdate.value="indate + 1";
            </script>
    
        <font>&nbsp&nbsp&nbsp&nbsp&nbsp Check In Date &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Check Out Date&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <br></font>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <input type="date" name="checkin" id="Check_In_Date" value="2022-05-16" >                             
        
        <input type="date" name="checkout" id="Check_Out_Date" value="outdate">
        
            <select name="adults">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            
            
        <select name="children">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        
    <input type="submit" value="Search">
</form>
    <body>
    </html>

SanderMaenhout · Answer 1 · 2022-02-21T17:36:08.710

I don't know if you tried using this. But this works every time for me. https://jqueryui.com/datepicker/

It automatically checks the date of today. You can edit it like u wish. Here is some example.

<!doctype html>
<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.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>

Thank you but what i am trying to do is to take the value(the client inputs that value) from the check in input and set is to +1 day and replace the default value on the check out input. — Jimis Kalar., Feb 21 '22 at 13:32
check this: https://stackoverflow.com/questions/28506845/adding-one-day-to-an-input-type-date-value — SanderMaenhout, Feb 21 '22 at 17:37

Alfredo Osorio · Answer 2 · 2022-02-21T13:54:37.693

some things are strange in your code,

Script need a function to do some thing
var outdate = document.setElementById(Check_Out_Date); try change set to get for catch the element.
Try Events javascript like event_onchange to manipulate the data https://www.w3schools.com/jsref/event_onchange.asp to change inputs values
To add 1 day you gonne learn about date on javascript https://www.w3schools.com/js/js_date_methods.asp .. about sum days https://thewebdev.info/2021/05/23/how-to-add-1-day-to-the-current-date-with-javascript/#:~:text=Date%20with%20JavaScript-,To%20add%201%20day%20to%20the%20current%20date%20with%20JavaScript,can%20use%20the%20setDate%20method.&text=to%20get%20the%20current%20day,adding%201%20day%20in%20milliseconds.
How can I add 1 day to current date?
I think datepick is a better option for you https://jqueryui.com/datepicker/ try googleit others datepickers are many on the web

Thank you very much I will try it out!!! – Jimis Kalar. Feb 21 '22 at 20:07 — Jimis Kalar., Feb 21 '22 at 20:07

Change the date by one day on date picker

2 Answers2