SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding value to current date

    Hi guys! I'm trying to display the current date into a span tag, which I manage using the following code -
    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luke13 View Post
    What i would like to do now is add the value of the input to the current date.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that!

    It works fine when i simply add the number of days in the code - for example
    Code:
    today.setDate(today.getDate()+1);
    but i need to do something like this
    Code:
    today.setDate(today.getDate()+(duration));;
    But i'm not sure how to make it work?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luke13 View Post
    but i need to do something like this
    Code:
    today.setDate(today.getDate()+(duration));;
    But i'm not sure how to make it work?
    What seems to be the problem with that? Is the duration not a number?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, its the id of the textbox.

    Code:
    <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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luke13 View Post
    No, its the id of the textbox.

    Code:
    <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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?
    Code:
    <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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by luke13 View Post
    Still cannot get it to work
    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".
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks, I'll keep working on it

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML Code:
    <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:

    Code JavaScript:
    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:

    Code JavaScript:
    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.

    Code JavaScript:
    dateHolder.innerHTML = today;

    Here's everything together:

    Code:
    <!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

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thank you, I've finally got it working!

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No problem.
    Would you mind showing us what you ended up with?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •