Adding value to current date

JavaScript
1

Hi guys! I’m trying to display the current date into a span tag, which I manage using the following code -

<input id="duration" class="duration1" type="text" >
 <span id="txt1"></span>
 <script type="text/javascript">
var today = new Date()
today.setDate(today.getDate());
document.getElementById("txt1").innerHTML = today;

</script>

What i would like to do now is add the value of the input to the current date. The number in the input will be between 3-14 days, so the date will need to increment to whatever value is entered. When the date is displayed, it should be displayed like so “05-Jul-13” and of course dependant on what number is entered into the input, for example 5 the date will display 10-Jul-13 if that is possible?

Thanks!

2

The date.setDate documentation says:

If the parameter you specify is outside of the expected range, setDate attempts to update the date information in the Date object accordingly. For example, if you use 0 for dayValue, the date will be set to the last day of the previous month.

So add your number of days to the day of the date. If it becomes larger than the number of months in a day (such as day 38) it will set the date to the appropriate day of the next month.

3

Thanks for that!

It works fine when i simply add the number of days in the code - for example

today.setDate(today.getDate()+1);

but i need to do something like this

today.setDate(today.getDate()+(duration));;

But i’m not sure how to make it work?

4

What seems to be the problem with that? Is the duration not a number?

5

No, its the id of the textbox.

<input id="duration" class="duration1" type="text" >
 <span id="txt1"></span>
 <script type="text/javascript">
var today = new Date()
today.setDate(today.getDate()+(duration));
document.getElementById("txt1").innerHTML = today;

</script>

When the user enters a number into the textbox i want it to add that number to todays date. The code above isn’t working?

6

Okay, well you would use document.getElementById(‘duration’) to obtain a reference to that HTML element, or querySelector(‘#duration’) or querySelector(‘.duration1’)
Once you have that reference to the HTML element, you’ll be wanting the value property from it, in order to retrieve that which was typed in the text field.

7

Something like this?

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>
<input id="duration" class="duration1" type="text">
 <span id="txt1"></span>
  <span id="txt2"></span>
 <script type="text/javascript">
var today = new Date()
document.getElementById('duration');
test = $("#duration").val();
today.setDate(today.getDate()+((test)));
document.getElementById("txt1").innerHTML = today;


</script> 
 </body>
</html>

Still cannot get it to work

8

First, you don’t need jQuery to achieve that.

But, do you want to know why your code doesn’t work? It might be more valuable for us to teach you how to debug your own code, instead of us just saying “Here’s your solution, who’s next”.

9

Ok thanks, I’ll keep working on it

10

Hi,

I think what Paul is saying is that it is better if we give you some tips and point you in the right direction, as opposed to just giving you the solution.

So, the main problem with the code you posted is that there was no update mechanism on the input field. You could type whatever you wanted into it and your program would just sit there. One way to get around this would be to use a form:

<form id="myForm">
  <input id="duration" type="text">
  <input type="submit"/>
</form>
<span id="dateHolder"></span>

Now within your JavaScript we should get references to all of the things we will need:

var form = document.getElementById("myForm"),
    duration = document.getElementById("duration"),
    dateHolder = document.getElementById("dateHolder"),
    today = new Date();

Then, we attach an onsubmit handler to the form, so that it actually does something when the user enters some input:

form.onsubmit =  function(){

  //Get the value from the input box - let's call it dur
  var dur = ...
	
  //Check it only contains digits
  if (dur.match(/^[1-9]+$/)){

    // The user entered a number. 
    // Do addition and set new date

  }
	
  //Prevent form's default submit action

}

I’ve left comments denoting all of the things that need doing.
You can use the regular expression to validate the user’s input and make sure they entered only digits.

After that we just need to initialize the date on page load.

dateHolder.innerHTML = today;

Here’s everything together:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Text input to update date</title>
  </head>
  
  <body>
    <form id="myForm">
      <input id="duration" class="duration1" type="text">
      <input type="submit"/>
    </form>
    <span id="dateHolder"></span>
    
    <script type="text/javascript">
      // Declare variables
      var form = document.getElementById("myForm"),
          duration = document.getElementById("duration"),
          dateHolder = document.getElementById("dateHolder"),
          today = new Date();
          
      // Attach event listener
      form.onsubmit =  function(){

        //Get the value from the input box - let's call it dur
        var dur = ...
	
        //Check it only contains digits
        if (dur.match(/^[1-9]+$/)){

          // The user entered a number. 
          // Do addition and set new date

        }
	
        //Prevent form's default submit action

      }
      
      // Initialize date on page load
      dateHolder.innerHTML = today;
    </script>
  </body>
</html>

Let us know how you get on :slight_smile:

11

Wow thank you, I’ve finally got it working!

12

No problem.
Would you mind showing us what you ended up with?