Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Birmingham (UK)
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Complete novice needs a steer with HTML input form using javascript

    Can someone give me a steer in the right direction.

    I have an HTML form that requires two dates to be entered. Date 1 containes the current date and date 2 is set to the current date + 1, 2, 3 or 4 years in the future less 1 day. Dates are UK format dd/mm/yyyy. This is done with a PHP script on the serverside.

    e.g.

    Date 1: 02/11/2012 Date 2: 01/11/2016

    If the user changes date 1: to say 02/06/2012 I would like to set the second date to 01/06/2016. Can this be done in javascript.
    (You can probably guess I'm a complete novice when it comes to javascript Many thanks in advance)

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    It can be done with JavaScript but as not everyone has JavaScript you'll still need to check for it on the server.

    To get the date so many years in the future less your one day you could use:

    Code:
    newDate = function(years) {
    var dd, mm, dt;
    dt = new Date();
    dt.setFullYear(dt.getFullYear()+years);
    dt.setDate(dt.getDate()-1);
    dd = dt.getDate();
    if (dd < 10) dd = '0'+dd;
    mm = dt.getMonth()+1;
    if (mm < 10) mm = '0'+mm;
    return dd+'/'+mm+'/'+dt.getFullYear();
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    felgall's script is fine to add x years to the current date, but if the date is derived from a date entered by the user into an input box things get more complicated. You need to check that the entered date is in the correct format, within a valid range, and is a valid date (not 56th Febtember).


    Code:
    <html>
    <head>
    <body>
    
    Add this many years minus one day <select id = "yearsahead">
    <option value = 0 selected>0</option>
    <option value = 1>1</option>
    <option value = 2>2</option>
    <option value = 3>3</option>
    <option value = 4>4</option>
    </select>
    <br><br>
    Enter the date in dd/mm/yyyy format <input type = "text" id = "firstdate" onblur = "addyears(this.value)">
    <br><br>
    <input type = "text" id = "seconddate" readonly>
    
    <script type = "text/javascript">
    
    function addyears(which) {
    document.getElementById("seconddate").value = "";  // clear previous result
    var yrsahead = Number(document.getElementById("yearsahead").value);
    
    var dsp = which.split("/");
    var dd = Number(dsp[0]);   // UK date format
    var mm = Number(dsp[1]);
    var yy = Number(dsp[2]);
    
    if (checkValidDate(yy,mm,dd)) {  // first check that the entered date is valid
    // if it is valid, add the selected number of years
    dt = new Date(yy,mm-1,dd);
    dt.setFullYear(dt.getFullYear()+yrsahead);
    
    dt.setDate(dt.getDate() - 1);  // subtract a day
    dd = dt.getDate();
    mm = dt.getMonth()+1;  // remember that in Javascript date objects the months are 0-11
    yy = dt.getFullYear();
    
    if (dd < 10) dd = '0' + dd;  // leading zeroes
    if (mm < 10) mm = '0' + mm;
    
    var result = dd + '/' + mm + '/' +yy;
    document.getElementById("seconddate").value = result;
    
    }
    }
    
    function checkValidDate(yr,mmx,dd) {
    var currentyear = new Date().getFullYear();
    var earliestyear = 1910;    // could be currentyear minus some value
    var latestyear = currentyear + 10;
    if (yr < earliestyear || yr > latestyear) {  // adjust these values to suit
    alert ("Year is out of range - must be " + earliestyear + " - "  + latestyear);
    document.getElementById("firstdate").value = "";
    return false;
    }
    
    var mm = mmx-1;  // remember that in Javascript date objects the months are 0-11
    var nd = new Date(yr,mm,dd);
    
    var ndmm = nd.getMonth();
    if (ndmm != mm) {
    alert ("The date you have entered is in the wrong format or is an Invalid Date!");
    document.getElementById("firstdate").value = "";
    return false; 
    }
    else {
    alert (dd + "/" + mmx + "/" + yr  + " is a Valid Date");  // comment out if desired
    return true;
    }
    }
    
    </script>
    
    </body>
    </html>
    As felgall has said, you need to check it on the server as well.

    Do please read the posting guidelines regarding thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful. For example "Set a date x years ahead".




    "I know that you believe that you understand what you think I said, but, I am not sure you realise that what you heard is not what I meant". (Robert
    McCloskey)
    Last edited by Philip M; 12-10-2012 at 11:23 AM. Reason: Noticed typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    felgall's script is fine to add x years to the current date
    That was what was asked for.

    Quote Originally Posted by dambuster View Post
    Date 1 containes the current date
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by felgall View Post
    That was what was asked for.
    No, what was asked for was

    "If the user changes date 1: to say 02/06/2012 I would like to set the second date to 01/06/2016."

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    So there were actually two completely different things being asked for. Anyway only a very minor modification to the code I originally supplied is needed to be able to start with any date at all.

    Code:
    Date.prototype.newDate = function(years) {
    var dd, mm, dt;
    dt = new Date(this);
    dt.setFullYear(dt.getFullYear()+years);
    dt.setDate(dt.getDate()-1);
    dd = dt.getDate();
    if (dd < 10) dd = '0'+dd;
    mm = dt.getMonth()+1;
    if (mm < 10) mm = '0'+mm;
    return dd+'/'+mm+'/'+dt.getFullYear();
    }
    So you then simply load the first date into a Date object (as you would do as a part of your validation of that field anyway if you are validating the date properly) and then call the newDate method on that object to return the second date already formatted as required.
    Last edited by felgall; 12-10-2012 at 08:52 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Yes, but as I have said,

    You need to check that the entered date is in the correct format, within a valid range, and is a valid date (not 56th Febtember). My script does that.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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