How to calculate current date with date selected in javascript?

Question

I am trying to work out how old a user is based on the selection statement.

I cannot calculate the current (year/month/day/hour/minute) from the user input.

The intent is that the user will see 3 box to select [Month] [Day] and [Year] of birth.

Based on the answer I want to calculate the current date minus the date selected by the user.

For some reason I can't make the logic work. I can hard code it, but I want it to be logical.

Here is my code:

<!DOCTYPE>
<html>
<title>Validate Credit Cards</title>
<head>
    <script type="text/javascript">
    /* <![CDATA[ */
    /* ]]> */
    </script>
</head>
<body>
    <form action="">
            <h1>Age Calculator</h1>
            <p>Birth Date:
                <select name="month">
                    <option>Month</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select name="day">
                    <option>Day</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                        <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
            </select>
            <select name="year">
                <option>Year</option>
                <option>1950</option>
                <option>1951</option>
                <option>1952</option>
                <option>1953</option>
                <option>1954</option>
                <option>1955</option>
                <option>1956</option>
                <option>1957</option>
                <option>1958</option>
                <option>1959</option>
                <option>1960</option>
                <option>1961</option>
                <option>1962</option>
                <option>1963</option>
                <option>1964</option>
                <option>1965</option>
                <option>1966</option>
                <option>1967</option>
                <option>1968</option>
                <option>1969</option>
                <option>1970</option>
                <option>1971</option>
                <option>1972</option>
                <option>1973</option>
                <option>1974</option>
                <option>1975</option>
                <option>1976</option>
                <option>1977</option>
                <option>1978</option>
                <option>1979</option>
                <option>1980</option>
                <option>1981</option>
                <option>1982</option>
                <option>1983</option>
                <option>1984</option>
                <option>1985</option>
                <option>1986</option>
                <option>1987</option>
                <option>1988</option>
                <option>1989</option>
                <option>1990</option>
                <option>1991</option>
                <option>1992</option>
                <option>1993</option>
                <option>1994</option>
                <option>1995</option>
                <option>1996</option>
                <option>1997</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
                <option>2007</option>
                <option>2008</option>
                <option>2009</option>
                <option>2010</option>
            </select>               
        </p>
        <p><input type="button" value="Calculate" onclick="calcAge()" /></p>
        <h2>You have lived</h2>
        <p><input type="text" name="yearCalc" size="7" /> years</p>
        <p><input type="text" name="monthCalc" size="7" /> months</p>
        <p><input type="text" name="dayCalc" size="7" /> days</p>
        <p><input type="text" name="hourCalc" size="7" /> hours</p>
        <p><input type="text" name="minCalc" size="7" /> minutes</p>
    </form> 
<script>    
    function calcAge()
        {
        var d1 = new Date();
        var month = document.forms[0].month.value;
        var day = document.forms[0].day.value;
        var year = document.forms[0].year.value;
        var yearCalc = 2012 - year;
        var monthCalc = parseInt(month);
        var dayCalc = Math.abs(d1 - parseInt(day));
        var hourCalc = Math.round();
        var minCalc = Math.round();
        document.forms[0].yearCalc.value =  yearCalc.toLocaleString();
        document.forms[0].monthCalc.value =  monthCalc.toLocaleString();
        document.forms[0].dayCalc.value =  dayCalc.toLocaleString();
        document.forms[0].hourCalc.value =  hourCalc.toLocaleString();
        document.forms[0].minCalc.value =  minCalc.toLocaleString();
        }
</script>

Why don't you calculate by use of two Date objects? You can turn it into seconds with the date object's functions and easiliy calculate. — David 10K
– David 10K, Commented Mar 29, 2013 at 20:05
you probably need to set the value property on each of your select options — Codasaurus
– Codasaurus, Commented Mar 29, 2013 at 21:57

jropella · Accepted Answer · 2013-04-02 15:23:13Z

2

The Date object (http://www.w3schools.com/jsref/jsref_obj_date.asp) has some nice functions prepackaged, more notably the getTime() function which returns Date object's time in terms of milliseconds since 1970, which is basically the same as Unix time except for the units (Unix time is seconds). To determine age, all we need to do is store the user's selections as a Date object and then take the difference between now and whatever the user put in.

var d1 = new Date();
d1.setMonth(document.forms[0].month.value);
d1.setDay(document.forms[0].day.value);
d1.setYear(document.forms[0].year.value);
var now = new Date();
var ageInMs = now.getTime() - d1.getTime();
var ageInYears = ageInMs / 86400000 / 365;

Since the getTime() function returns milliseconds, we need to convert this to years. There are 86,400,000 milliseconds in a day, and 365 days in a year (roughly).

EDIT: You may need to use parseInt() on the values of the comboboxes if they are actually strings. This would be an easy change though - instead of

d1.setMonth(document.forms[0].month.value);

you'd do

d1.setMonth(parseInt(document.forms[0].month.value, 10));

edited Apr 2, 2013 at 15:23

answered Mar 29, 2013 at 20:15

jropella

5895 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Codasaurus Over a year ago

Great answer jropella. I would stress the importance of always specifying the radix, or base, when using the parseInt function. Otherwise, you can get unexpected results: developer.mozilla.org/en-US/docs/JavaScript/Reference/… This is particularly true when dealing with dates and times coming from a form where the date value being parsed might have a leading zero. If you fail to specify base 10, parseInt() assumes base 8.

jropella Over a year ago

@Codasaurus did not know that! good catch. updated as appropriate

Collectives™ on Stack Overflow

How to calculate current date with date selected in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related