Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

267
Views
Change the date by one day on date picker

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>
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
about 4 years ago · Juan Pablo Isaza Report

0

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
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!